jqgrid - 使用 jqgrid 加载数据后是否可以修改 colModel？

Question

我有一个 jqGrid，我需要在加载数据后但在将其解析为网格之前更改模型。换句话说，我想我想在 loadComplete 处理程序中做到这一点。我看到这种方法:Setting JqGrid's colName and colModel from JSON data ，但我已经编写了一堆使用“使用 jqGrid 加载数据”方法的网格，而不是在那里使用的“预加载数据并将其传递给 jqGrid”，我希望避免重新-编码，或者让这个与众不同。

(隐藏和显示隐藏的列也不实用。)

这可能吗？

更多细节:

基本上，在我看到数据之前，我不知道我需要哪些列。假设我按州显示流量:

Date      CA     WA     NY    MN
4/20      100    90     85    72
4/21       95    85     89    70

只能显示四种状态，但数据中可能有更多(或可能更少)，所以我希望它们按流量顺序列出。现在，数据是这样的:

{
date : 4-20,
ca : 100,
wa : 90,
ny : 85,
mn : 72
hi : 56,
il : 30
},
{
date : 4-21,
ca : 95,
wa : 85, // note: for a given row, a column might be relatively lower
ny : 89, // than another. The column order is based on the overall
mn : 70
hi : 60,
il : 45
}

或者它可能是:

{
date : 4-20,
ny : 110,
hi : 95,
il : 90,
wa : 80
}

我试过设置像 state1、state2、state3、state4 这样的列，然后使用 jsonmap 重新映射它们，但是没有用。

加载一次 = 真，数据类型 = json

Answer 1

我找到了一种看起来可行的方法。

我的解决方案的想法如下。您使用 colModel有许多隐藏的列，其名称为“cm0”、“cm1”、“cm2”……所有列都具有与您的情况相同的数据。为了更容易地填充数据，我使用自 jqGrid 3.8.2 以来存在的列模板:

var mygrid=jQuery("#list"),
    cmIntTemplate = {
        width:50,
        sorttype:"int",
        formatter:"integer",
        align:"right",
        hidden:true
    },
    cm = [
        // here we define the first columns which we always has
        // the list can be empty or has some columns with
        // the properties other as the rest (without cmIntTemplate)
        {name:"date",label:"Date",key:true,width:100, fixed:true,
         formatter:'date',formatoptions:{srcformat:"m-d",newformat:"m/d"}}
    ], maxCol = 30, dummyColumnNamePrefix = "cm";

// Add dummy hidden columns. All the columns has the same template
for (i=0;i<maxCol;i++) {
    cm.push({name:dummyColumnNamePrefix+i,template:cmIntTemplate});
}

之后我以标准方式创建 jqGrid，但使用 jsonReader其中使用 page as function :

jsonReader: {
    repeatitems: false,
    page: function (obj) {
        // ------------------------
        // here I add the main code
        // ------------------------
        return obj.page;
    }
}

函数来自 jsonReader.page返回与默认值相同的值 jsonReader ，但我使用了函数的方式，因为函数会在读取 JSON 数据的主要包含之前直接调用。在代码内部，我获取数据的第一行并使用它的属性名称来填充 jsonmap对应列的属性并设置列名。此外，我制作了一些虚拟列，以显示所有 JSON 数据可见，其余虚拟列隐藏。应该做的最后一件事是校正先前计算的网格宽度。所以网格看起来像这样:



或者像这样



取决于 JSON 输入数据。
page的代码功能如下:

page: function (obj) {
    var rows = obj.rows, colModel = mygrid[0].p.colModel,
        cmi, iFirstDummy, firstRow, prop,
        orgShrinkToFit, isFound,
        showColNames = [], hideColNames = [];

    if (typeof(rows) === "undefined" || !$.isArray(rows) || 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
    firstRow = rows[0];
    for (prop in firstRow) {
        if (firstRow.hasOwnProperty(prop)) {
            // we will use the properties name of the first row
            // as the names of the column headers of the grid

            // find column index having prop as the name
            isFound = false;
            for(i=0;i<colModel.length;i++) {
                cmi = colModel[i];
                if (cmi.name === prop) {
                    isFound = true;
                    showColNames.push(prop);
                    break;
                }
            }
            if(!isFound) {
                // labels defines the column names
                cmi = colModel[iFirstDummy];
                showColNames.push(cmi.name);
                mygrid.jqGrid('setLabel',cmi.name,prop);

                // because of bug in jqGrid with calculation of width
                // we have to reset the width
                cmi.width = cmIntTemplate.width;

                // we set jsonmap which jqGrid will use instead
                // of dummy column names to read all row data
                cmi.jsonmap = prop;
                iFirstDummy++;
            }
        }
    }

    // fill the list of unused columns
    for(i=0;i<colModel.length;i++) {
        cmi = colModel[i];
        if ($.inArray(cmi.name, showColNames) === -1 && dummyTestRegex.test(cmi.name)) {
            hideColNames.push(cmi.name);
        }
    }
    mygrid.jqGrid('showCol',showColNames);
    mygrid.jqGrid('hideCol',hideColNames);

    setGridWidthAndRestoreShrinkToFit(orgShrinkToFit);

    return obj.page;
}

内部 page函数我使用小辅助函数

var 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) {
        // calculate the new grid width
        var width=0, i=0, headers=mygrid[0].grid.headers, l=headers.length;
        for (;i<l; i++) {
            var th = headers[i].el;
            if (th.style.display !== "none") {
                width += $(th).outerWidth();
            }
        }

        // restore the original value of shrinkToFit
        mygrid.jqGrid('setGridParam',{shrinkToFit:orgShrinkToFit});

        // set the grid width
        mygrid.jqGrid('setGridWidth',width);
    },
    dummyTestRegex = new RegExp(dummyColumnNamePrefix+"(\\d)+");

你可以看到的工作演示 here .

更新 : Another answer与 the demo展示了如何创建具有另一种输入数据格式的网格:[[], [], ...] (array of arrays) - matrix。