0

我正在编写一个包含多个 jqGrid 的页面。我的代码遵循 JavaScript MVC 模式，该模式将为我的 HTML 元素（包括 jqGrids）提供 API。因此，归根结底，我可以通过调用我的 API 来创建网格。就像是：

var grid1 = new grid();
grid1.init();
var grid2 = new grid();
grid2.init();

我已经使用其他 javascript 组件完成了它，并且效果很好。但是，当我在同一页面上创建多个 jqGrid 实例时，页面上只有一个 jqPager 附加到最后一个网格。有人知道为什么吗？

这是我的代码（请注意，这是一个简化版本，实际上我将其分隔在不同的 .js 文件中，并且还遵循许多其他设计模式）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
</head><body>

<!-- IMPORT JS -->  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.min.js"></script>    

<script>

$(document).ready(function() {
    function grid() {
        //=== LOCA VARIABLES ===//
        var myGrid = $('<table>').attr( "id", "useraccount-search-datagrid");
        var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager");
        var localData1 = {
            "page" : 1,
            "totalRecords" : 5,
            "pageSize" : 3,
            "rows" : [
                { Name : "Name 1"},
                { Name : "Name 3"},
                { Name : "Name 2"}
            ]
        };

        function publicInit(){
            $("body").append(myGrid, myPager);
            myGrid.jqGrid({
                pager : myPager,
                data: localData1.rows,
                datatype : "local",
                colModel : [
                    { name : 'Name', index : 'Name', width : "500"}
                ],
                localReader: {
                    repeatitems: false
                },
                rowNum : 3,
                viewrecords : true,
                height : "auto",
                ignoreCase : true
            });
        }
        //=== REVEALING PATTERN===//
        return {
            init: publicInit
        }
    };

    var grid1 = new grid();
    grid1.init();

    $("body").append("<br><br>"); //Add some spacing to distinguish between both grids

    var grid2 = new grid();
    grid2.init();

});
</script>
</body>
</html>

任何帮助将不胜感激。

4

1 回答 1

1

在我看来，您的代码生成<table>和<div>元素具有相同的id 属性。所以第二个网格var grid2 = new grid();只是添加页面上已经存在的元素<table>。<div>这是一个错误。一个 HTML 页面上所有元素的所有id属性都必须是唯一的。所以线路myGrid = $('<table>').attr( "id", "useraccount-search-datagrid");和var myPager = $("<div>").attr("id", "useraccount-search-datagrid-pager");必须改变。

如果您只需要分配一些唯一的 id，您可以$.jgrid.randId()在内部使用 jqGrid 中使用的方法。代码可能是

var myGrid = $("<table>").attr("id", $.jgrid.randId());
var myPager = $("<div>").attr("id", $.jgrid.randId());

此外，我强烈建议您使用 JavaScript 中使用的名称转换。如果您需要使用new运算符来创建对象，您应该将函数重命名grid为Grid.

于 2013-04-30T18:04:39.313 回答