一种形式的多个jqGrids导致单独的启动变量发生冲突

时间:2015-05-19 06:45:28

标签: javascript jquery jqgrid mvcjqgrid

我的表单中有多个jqGrids。现在对于我的表单中的多个jqGrids,我通过包含一个js文件来实现它,该文件的内容为jqGrid定义,并且该js文件的内容如下:

var MyGridData = MyGridData || (function () {
    var _args = {};
    return {
        init: function (Args){
            _args = Args;
        },
        initiateGrid: function (){
            this.fillGridSchema(_args[6]);
        },
        fillGridSchema: function (){
            $('#' + _args[0]).jqGrid({
                url: _args[1],
                datatype: "json",
                mtype: "POST",
                ajaxGridOptions: {contentType: 'application/json; charset=utf-8' },
                serializeGridData: function(postdata){
                    return JSON.stringify(postdata);
                },
                postData: {colOrder: _args[2], data: _args[3]},
                search: true,
                colNames: _args[4],
                colModel: _args[5],
                viewrecords: true,
                pager: jQuery('#pager_' + _args[7]),
                rowNum: 10,
                rowList: [10, 20, 30, 40],
                //further required jqGrid properties here for ex: sortorder, //loadonce, gridview, ignorecase, etc.
                onSelectRow: function (rowId) {
                    if(_args[8] != ''){
                        var rowData = jQuery(this).getRowData(rowId);
                        var fn = window[_args[4]];
                        if(typeof fn === 'function'){
                            fn(rowData);
                        }
                    }
                }
            });
        }
    }
}

现在生成jqGrid,调用以下代码:

MyGridData.init([
    'GridName1', 'griddataurl', 'colOrder', 'postDataargs', 'colNames', 'colModel', 'ExtraParams', 'pager', 'onSelectRowfunction'
]);
MyGridData.initiateGrid();

现在我面临的问题是,我正在第一个网格的rowselect上填充我的第二个网格,并且我在编程中默认选择我的网格中的第一行。因此,当选择第一个网格的第一行时,我在第一个网格的onSelectRow中调用一个函数,以便按照该函数中第一个网格中的选择填充我的第二个网格。但问题是_args参数向我展示了第一个网格的参数,当它第一次被调用时。第二次调用第一个网格的onSelectRow时,它显示_args参数具有第二个网格参数的值而不是第一个网格的参数。我无法找到问题所在。如果任何人能够找到问题,请告诉我解决方法。

1 个答案:

答案 0 :(得分:0)

抱歉,我不喜欢上面的代码。如果您需要为两个网格使用一些常用参数,则可以定义

$.extend(true, $.jgrid.defaults, {
    datatype: "json",
    mtype: "POST",
    ajaxGridOptions: {contentType: "application/json; charset=utf-8" },
    serializeGridData: function (postdata) {
        return JSON.stringify(postdata);
    },
    search: true,
    viewrecords: true,
    rowNum: 10,
    rowList: [10, 20, 30, 40],
    gridview: true,
    autoencode: true
});

之后,您可以创建两个跳过上述选项的网格。您将创建简洁易读的代码,以满足您的需求。

顺便说一下,在第一个网格中选择行之后,第二个网格将被加载。在这种情况下,您可以先使用datatype: "local"创建第二个网格。它将阻止向第二个网格中指定的url发送任何请求。在第一个网格的onSelectRow内,您可以动态地将第二个网格的datatype更改为"json",为第二个网格设置postData并触发reloadGrid。它的原因不是所有需要做的事情。可以考虑清除第一个网格{或beforeRequestloadComplete内的第二个网格。它清除了刷新(和取消选择)第一个网格的第二个网格。