【问题标题】:can't sort multiple jq grids无法对多个 jq 网格进行排序
【发布时间】:2011-05-16 11:57:56
【问题描述】:

我在我使用的 html 页面中有 3 个网格

加载一次:真; 数据类型:xml;

加载数据后我更改

数据类型:本地;

我这样做是为了在我进行排序或分页时,我不想调用重新加载。 当我的页面中只有一个网格但当我的页面上有 3 个网格时,这很有效。排序不起作用。

谁能帮忙。

this.createPortServerGrid = function(){
    //_this.rowDataLoaded = false;
    _this.X$("#serverGrid").jqGrid({
        mtype : 'POST',
        url : DXOP_SERVER,
        datatype : "xml",
        postData : {
            swNote1 : '<epiq> <request> <action> <object>commline</object> <method>find</method> <language>enus</language> </action> <data> <row> <dynamic>0</dynamic> </row> </data> <sql> <orderby>devicename</orderby> </sql> </request> </epiq>'
        },
        colModel : [ {
            label : "Name",
            name : 'name',
            index : 'name',
            xmlmap : "name"
        }, {
            label : "Port",
            name : 'devicename',
            index : 'devicename',
            sorttype: 'int',
            xmlmap : "devicename"
        }, {
            label : "Port State",
            name : 'state',
            index : 'state',
            xmlmap : "state"

        }, {
            name : 'pk',
            index : 'pk',
            xmlmap : "pk",
            hidden : true
        }, {
            name : 'childserverfk',
            index : 'childserverfk',
            xmlmap : "childserverfk",
            hidden : true
        },

        {
            name : 'porttmplfk',
            index : 'porttmplfk',
            xmlmap : "porttmplfk",
            hidden : true
        } ],

        xmlReader : {
            root : "data",
            row : "row",
            repeatitems : false,
            id : "pk"
        },

        rowNum : 10,
        height : 400,
        autowidth : true,
        rowList : [ 10, 20, 30 ],
        pager : '#pager3',
        altRows : true,
        sortname : 'name',
        loadonce : true,
        recordpos : 'left',
        viewrecords : true,
        sortorder : "desc",
        multiselect : false,
        afterInsertRow : function(rowid, rowdata, rowelem) {
            $('#' + rowid).contextMenu('port_portMenuJqGrid',
_this.serverPortMenu);
        },
        loadComplete : function(rowId) {
            var sraw = _this.X$("#serverGrid").getGridParam('xmlRawData');
            handleErrorMessage(sraw);
            _this.serverParseRowData(sraw);
            _this.createPortTemplateGrid();

            _this.serverfilterGrid();
            if(_this.serPortSel != null){                                   
                _this.X$('#serverGrid').jqGrid('setSelection',
_this.serPortSel); 
            }
            _this.X$('#serverGrid').setGridParam({datatype:'local'});
            alert("********"+_this.X$('#serverGrid').setGridParam('datatype')[0]);
        },
        onSelectRow : _this.loadServerGrid,
        ondblClickRow : _this.editServerTemplate

    });
};
this.createCurrentSessionGrid = function(){
    _this.X$("#currentTemplGrid").jqGrid({
        mtype : 'POST',
        url : DXOP_SERVER,
        datatype : "xml",
        postData : {
            swNote1 : '<epiq> <request> <action> <object>commline</object> <method>find</method> <language>enus</language> </action> <data> <row> <dynamic>1</dynamic> </row> </data> <sql> <orderby>devicename</orderby> </sql> </request> </epiq>'
        },
        colModel : [ {
            label : " Current File Name",
            name : 'currentfilename',
            index : 'currentfilename',
            xmlmap : "currentfilename"
        }, {
            label : "Current Byte Sent",
            name : 'currentbytessent',
            index : 'currentbytessent',
            xmlmap : "currentbytessent"
        }, {
            label : "Current Byte Recived",
            name : 'currentbytesreceived',
            index : 'currentbytesreceived',
            xmlmap : "currentbytesreceived"
        }, {
            label : "Port State",
            name : 'state',
            index : 'state',
            xmlmap : "state"

        }, {
            label : "Current Endpoint",
            name : 'currentendpoint',
            index : 'currentendpoint',
            xmlmap : "currentendpoint"

        }, {
            label : "Current User",
            name : 'dynamic',
            index : 'dynamic',
            xmlmap : "dynamic"

        }, {
            name : 'pk',
            index : 'pk',
            xmlmap : "pk",
            hidden : true
        } ],

        xmlReader : {
            root : "data",
            row : "row",
            repeatitems : false,
            id : "pk"
        },

        rowNum : 10,
        height : 400,
        autowidth : true,
        rowList : [ 10, 20, 30 ],
        pager : '#pager3',
        altRows : true,
        //loadonce : true,
        sortname : 'id',
        recordpos : 'left',
        viewrecords : true,
        sortorder : "desc",
        multiselect : false,
        afterInsertRow : function(rowid, rowdata, rowelem) {
            $('#' + rowid).contextMenu('port_currentMenuJqGrid',
_this.currentSessionMenu);
        }
        ,onSelectRow : _this.curSessionSelectedRow,
        loadComplete : function(rowId) {
            var craw = _this.X$("#currentTemplGrid") .getGridParam('xmlRawData');
            handleErrorMessage(craw);
            _this.currentParseRowData(craw);
            _this.currentfilterGrid();
            if(_this.curSessnSel != null){
                _this.X$('#currentTemplGrid').jqGrid('setSelection',
_this.curSessnSel); 
            }
        }

    });
};
this.curSessionSelectedRow = function(){
    _this.portTempSel = _this.X$("#currentTemplGrid").jqGrid('getGridParam', 'selrow');
};
this.createPortTemplateGrid = function(){
    _this.X$("#portTemplGrid").jqGrid({
        mtype : 'POST',
        url : DXOP_SERVER,
        datatype : "xml",
        postData : getPostData('<action> <object>porttemplate</object> <method>find</method> <language>enus</language> </action> <data> <row/> </data> '),
        colModel : [ {
            label : "Name",
            name : 'name',
            index : 'name',
            xmlmap : "name"
        }, {
            label : "Type",
            name : 'linetype',
            index : 'linetype',
            xmlmap : "linetype"

        }, {
            label : "Job Look up Timeout",
            name : 'getworktimeout',
            index : 'getworktimeout',
            xmlmap : "getworktimeout"

        }, {
            name : 'pk',
            index : 'pk',
            xmlmap : "pk",
            hidden : true
        } ],

        xmlReader : {
            root : "data",
            row : "row",
            repeatitems : false,
            id : "pk"
        },

        rowNum : 10,
        height : 400,
        autowidth : true,
        rowList : [ 10, 20, 30 ],
        pager : '#pager2',
        loadonce : true,
        altRows : true,
        sortname : 'name',
        recordpos : 'left',
        viewrecords : true,
        sortorder : "desc",
        multiselect : false,
        afterInsertRow : function(rowid, rowdata, rowelem) {
            $('#' + rowid).contextMenu('port_porttemplMenuJqGrid',
_this.portTemplateMenu);
        },
        onSelectRow : _this.portTemplSelectedRow,
        ondblClickRow : _this.editPortTemplate,
        loadComplete : function(rowId) {
            var traw = _this.X$("#portTemplGrid").getGridParam('xmlRawData');
            handleErrorMessage(traw);                       
            _this.templateParseRowData(traw);
            _this.createCurrentSessionGrid();
            //_this.X$("#portTemplGrid").trigger("reloadGrid");
            //_this.X$("#portTemplGrid").setGridParam({datatype:'xml'}).trigger('reloadGrid');

            _this.X$('#portTemplGrid').setGridParam({datatype:'local'});
            _this.portfilterGrid();
            if(_this.portTempSel != null){
                _this.X$('#portTemplGrid').jqGrid('setSelection',
_this.portTempSel); 
            }
        }
    });
};

谢谢,

德文

【问题讨论】:

  • 您应该发布您使用的 JavaScript 代码。如果您使用loadonce: true,则在从服务器加载第一次数据后,jqGrid 会自动将数据类型更改为'local'。重要的是,您发布用于所有网格的 XML 数据。一页上有许多网格的典型问题 - id 重复。
  • 如果您发布包含代码,您应该选择它并单击“{}”按钮,在每行的开头添加 4 个空格。此外,您应该包括网格的测试 XML 数据。没有数据就无法测试排序。

标签: sorting jqgrid


【解决方案1】:

您对网格“#serverGrid”和“#currentTemplGrid”使用相同的寻呼机“#pager3”,这是不允许的。您不能在网格之间共享一个寻呼机 div。

此外,如果某些网格列不应解释为文本,则应定义描述数据类型的 sorttype

如果您使用afterInsertRow,网格的运行速度会慢很多。如果需要对loadComplete内的所有行进行数据绑定:

loadComplete: function() {
    // your old code here and then
    $('tr.jqgrow',this).contextMenu('port_portMenuJqGrid',_this.serverPortMenu);
}

删除afterInsertRow 后,您应该将gridview:true 参数添加到网格中。将多次提升网格性能。

【讨论】:

    猜你喜欢
    • 2021-07-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-06
    相关资源
    最近更新 更多