jqgrid：几个问题 - 矩阵显示

Question

我有矩阵数据存储在表格中，如下表所示：

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

如何让jqGrid拒绝。行和列动态 并在矩阵中显示序列化数据？有没有直接的方法，还是我必须实现for循环才能在矩阵中上传数据？

我可以将行显示为列和列作为行（因此列标题垂直对齐）吗？

我是否可以仅启用内联编辑并禁用基于表单的编辑？

Answer 1

我刚刚写了the answer到另一个问题，其中我描述了如何使用动态列数创建网格（行数在jqGrid中始终是动态的）。在我看来，这种方式可以显示任何矩阵。在您的情况下，您可以使代码更简单，因为您可以使用通用列名称，如“1”，“2”等（或“第1列”，“第2列”等）等。< / p>

我修改了代码，以便在具有命名属性的对象上使用数组数组（矩阵）而不是数组。所以jqGrid看起来像这样：

或者这个：

取决于输入JSON数据。

可以找到完整的演示here。您可以在下面找到该演示的完整JavaScript代码：

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');
});

转置矩阵（在主对角线上反射）的最简单方法是在服务器上。如果你不能这样做，你可以创建并填充page函数内的转置矩阵（参见上面的代码），然后用转置替换row的{​​{1}}部分基质