jqgrid:几个问题 – 矩阵显示

我将矩阵数据存储在表格中,如下表所示:

> MatrixDimensions – MatrixId,NoOfRows,NoOfCol
> MatrixValues – MatrixId,RowNo,ColNo,Value

我怎样才能使jqGrid不采取.行和列动态
并在矩阵中显示序列化数据?有没有直接的方法或我是否必须实现循环以在矩阵中上传数据?

我可以将行显示为列和列作为行(因此列标题垂直对齐)?

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

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

我修改了代码,以便它使用数组(矩阵)而不是具有命名属性的对象上的数组.所以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');
});

转置矩阵(在主对角线上反射)的最简单方法是在服务器上.如果你不能这样做,你可以创建并填充页面函数内部的转置矩阵(参见上面的代码),然后用转置矩阵替换obj的行部分.

转载注明原文:jqgrid:几个问题 – 矩阵显示 - 代码日志