Question

我正在编写一个包含多个jqGrids的页面。我的代码遵循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>

任何帮助都将受到高度赞赏。

Answer 1

在我看来，您的代码会使用相同的 id属性生成<table>和<div>个元素。因此，第二个网格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，则可以在内部使用jqGrid中使用的$.jgrid.randId()方法。代码可能是

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

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

jqGrid - 同一页面上的多个网格只显示一个寻呼机

1 个答案: