Jqgrid: some questions - matrix mapping

Question

I have matrix data stored in a table as shown below:

• MatrixDimensions - MatrixId, NoOfRows, NoOfCol
• MatrixValues ​​- MatrixId, RowNo, ColNo, Value

How can I make jqGrid not to accept. rows and columns dynamically and also display serialized data in a matrix? Is there a direct way or do I need to implement for loops to load data into a matrix?

Is it possible to display rows as columns and columns as rows (so that the column headings are vertically aligned)?

Can I enable only inline editing and disable form-based editing?

Answer 1

I just wrote the answer to another question, where I described how to create a grid with a dynamic number of columns (the number of rows is always dynamic in jqGrid). It seems to me that you can display any matrix. In this case, you can make the code simpler because you can use common column names such as "1", "2", etc. (Or "Col. 1", "Col. 2", etc.) etc.

I changed the code so that it uses an array of arrays (a matrix) instead of an array on objects with named properties. So jqGrid will look like this:

or that:

depending on JSON input data.

The full demo can be found here . The full JavaScript demo code can be found below:

 var mygrid=jQuery("#list"), cmTxtTemplate = { width:40, align:"center", sortable:false, hidden:true }, currentTemplate = cmTxtTemplate, i, cm = [], maxCol = 30, dummyColumnNamePrefix = "", //"Col. ", clearShrinkToFit = function() { // save the original value of shrinkToFit var orgShrinkToFit = mygrid.jqGrid('getGridParam','shrinkToFit'); // set shrinkToFit:false to prevent shrinking // the grid columns after its showing or hiding mygrid.jqGrid('setGridParam',{shrinkToFit:false}); return orgShrinkToFit; }, setGridWidthAndRestoreShrinkToFit = function(orgShrinkToFit,width) { // restore the original value of shrinkToFit mygrid.jqGrid('setGridParam',{shrinkToFit:orgShrinkToFit}); mygrid.jqGrid('setGridWidth',width); }, dummyTestRegex = new RegExp(dummyColumnNamePrefix+"(\\d)+"), counter = 1; // Add dummy hidden columns. All the columns has the same template for (i=0;i<maxCol;i++) { cm.push({name:dummyColumnNamePrefix+(i+1),template:currentTemplate}); } mygrid.jqGrid({ url:'Matrix1.json', datatype: "json", // colNames will be set based on the properties for JSON input colModel:cm, height:"auto", rownumbers:true, loadonce:true, gridview: true, rowNum: 1000, sortname:"", jsonReader: { cell: "", id: function (obj) { return "id"+counter++; }, page: function (obj) { var rows = obj.rows, colModel = mygrid[0].p.colModel, cmi, width = 0, iFirstDummy, cols, orgShrinkToFit, showColNames = [], hideColNames = []; if (typeof(rows) === "undefined" || !(rows.length>0)) { // something wrong need return return obj.page; } // find the index of the first dummy column // in the colModel. If we use rownumbers:true, // multiselect:true or subGrid:true additional // columns will be inserted at the begining // of the colModel iFirstDummy = -1; for(i=0;i<colModel.length;i++) { cmi = colModel[i]; if (dummyTestRegex.test(cmi.name)) { iFirstDummy = i; break; } } if (iFirstDummy === -1) { // something wrong need return return obj.page; } orgShrinkToFit = clearShrinkToFit(); // we get the first row of the JSON data cols = rows[0].length; // fill the list of unused columns for(i=0;i<colModel.length;i++) { cmi = colModel[i]; if (i<iFirstDummy+cols) { cmi.width = currentTemplate.width; showColNames.push(cmi.name); } else { hideColNames.push(cmi.name); } } mygrid.jqGrid('showCol',showColNames); mygrid.jqGrid('hideCol',hideColNames); setGridWidthAndRestoreShrinkToFit(orgShrinkToFit, cols*currentTemplate.width); return obj.page; } } }); $("#readJson1").click(function() { mygrid.jqGrid('setGridParam', {datatype:'json',page:1,url:'Matrix1.json'}) .trigger('reloadGrid'); }); $("#readJson2").click(function() { mygrid.jqGrid('setGridParam', {datatype:'json',page:1,url:'Matrix2.json'}) .trigger('reloadGrid'); }); 

The easiest way to transpose the matrix (flip it along the main diagonal) is on the server. If you cannot do this, you can create and populate the transposed matrix inside the page function (see My code above) and simply replace the row part of obj with the transposed matrix.