jqgrid-从一页导航到另一页时发生loadComplete错误

问题描述

我正在使用loadComplete事件在jqgrid titlebar和表头之间插入一个div元素.

I am inserting a div element between the jqgrid titlebar and table headers using loadComplete event.

HTML代码

<div class="userinfo">
   <table id="myjqgrid"></table>
   <div id="Pager"></div>
   <script src="js/myjqgrid.js" type="text/javascript"></script>
</div>

JSON

{
    "mypage": {
        "outerwrapper": {
            "page":"1",
            "total":"1",
            "records":"1",
            "innerwrapper": {
                "rows":[
                    {
                        "id":"1",
                        "cells":
                        [
                            {
                                "value":"12345",
                                "label": "ID"
                            },
                            {
                                "value":"David",
                                "label": "FirstName"
                            },
                            {
                                "value":"Smith",
                                "label": "LastName"
                            }
                        ]
                    },
                    {
                        "id":"2",
                        "cells":
                        [
                            {
                                "value":"37546",
                                "label": "ID"
                            },
                            {
                                "value":"Willy",
                                "label": "FirstName"
                            },
                            {
                                "value":"Peacock",
                                "label": "LastName"
                            }
                        ]
                    },
                    {
                        "id":"3",
                        "cells":
                        [
                            {
                                "value":"62345",
                                "label": "ID"
                            },
                            {
                                "value":"Kim",
                                "label": "FirstName"
                            },
                            {
                                "value":"Holmes",
                                "label": "LastName"
                            }
                        ]
                    },
                    {
                        "id":"4",
                        "cells":
                        [
                            {
                                "value":"186034",
                                "label": "ID"
                            },
                            {
                                "value":"Andy",
                                "label": "FirstName"
                            },
                            {
                                "value":"Wills",
                                "label": "LastName"
                            }
                        ]
                    }
                ]
            }
        }
    }
}

JQGrid定义(myjqgrid.js)

$(function (){
    var getValueByName = function (cells, cellItem) {
        var i, count = cells.length, item;
        for (i = 0; i < count; i += 1) {
            item = cells[i];
            if (item.label === cellItem) {
                return item.value;
            }
        }
        return '';
    };
    $("#myjqgrid").jqGrid({
        url: "myjqgrid.json",
        datatype: "json",
        contentType: "application/x-javascript; charset=utf-8",
        colNames:['ID','FirstName', 'LastName'],
        colModel:[
            {name:'ID',index:'ID',jsonmap:function(obj){return getValueByName(obj.cells, "ID");}, width:150, align:"center"},
            {name:'FirstName',index:'FirstName',jsonmap:function(obj){return getValueByName(obj.cells, "FirstName");}, width:150, align:"left", sortable:true},
            {name:'LastName',index:'LastName',jsonmap:function(obj){return getValueByName(obj.cells, "LastName");}, width:150, align:"left", sortable:true}
        ],
        jsonReader: {
            root: "mypage.outerwrapper.innerwrapper.rows",
            page: "mypage.outerwrapper.page",
            total: "mypage.outerwrapper.total",
            records: "mypage.outerwrapper.records",
            repeatitems: false
        },
        rowNum:2,
        rowList:[2, 4],
        pager: '#Pager',
        recordpos: 'left',
        multiboxonly:true,
        viewrecords: true,
        sortorder: "desc",
        multiselect: true,
        scrolloffset: 0,
        loadonce: true,
        sortable: true,
        sorttype: "text",
        cache: true,
        height: "auto",
            caption: "MY JQGRID",
        loadComplete: function(){
            $("<div>Table Summary</div>").insertAfter("#gview_myjqgrid .ui-jqgrid-titlebar");
        }
    });
    $("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false,position:'right'});
});

问题

正在显示多余的div元素.但是，每次我从一页导航到另一页时，它都会绘制一个额外的div.

The extra div element is getting displayed. BUT each time I navigate from 1 page to another, it draws an extra div.

• 因此，当页面加载时，我得到1 div，内容为表摘要".
• 然后，我从第1页导航到第2页，得到2个div元素，它们显示为表摘要".
• 我从第2页导航到第1页，得到3个div元素，它们显示为表摘要"

• So, when the page loads I get 1 div that reads 'Table Summary'.
• Then I navigate from page 1 to page 2, I get 2 div elements that read 'Table Summary'.
• I navigate back from page 2 to page 1, I get 3 div elements that read 'Table Summary'

推荐答案

您最好使用

toolbar: [true,"top"]

jqGrid的

参数以添加空div.如果确实需要手动添加潜水，则应将代码$("<div>Table Summary</div>").insertAfter("#gview_myjqgrid .ui-jqgrid-titlebar");从loadComplete中移出.您应该将代码放置在之后(在$("#myjqgrid").jqGrid({...});之后).

parameter of jqGrid to add empty div. If you do need to add the dive manually you should move the code $("<div>Table Summary</div>").insertAfter("#gview_myjqgrid .ui-jqgrid-titlebar"); out of loadComplete. You should place the code after creating of the grid (after $("#myjqgrid").jqGrid({...});).

这篇关于jqgrid-从一页导航到另一页时发生loadComplete错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！