Question

我使用div事件在jqgrid titlebar和表标题之间插入loadComplete元素。

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元素。但是每次我从1页导航到另一页时，都会画一个额外的div。

因此，当页面加载时，我得到1 div，其中显示的是“表摘要”。
然后我从第1页导航到第2页，我得到了2个div元素，这些元素都是“表格摘要”。
我从第2页导航到第1页，我得到3个div元素，内容为“表格摘要”

Answer 1

你最好使用

toolbar: [true,"top"]

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

jqgrid - 从1页导航到另一页时出现loadComplete错误

1 个答案: