Question

我有一个XML文件，其结构如下：

<products>
    <product>
        <id>P1</id>
        <name>PRODUCT 1</name>
        <accessories>
            <accessory>
                <id>acc_1</id>
                <name></name>
            </accessory>
            <accessory>
                <id>acc_2</id>
                <name></name>
            </accessory>
            <accessory>
                <id>acc_3</id>
                <name></name>
            </accessory>
        </accessories>
    </product>
    <product>
        <id>P2</id>
        <name>PRODUCT 2</name>
        <accessories>
            <accessory>
                <id>acc_1</id>
                <name>ACC 1</name>
            </accessory>
            <accessory>
                <id>acc_2</id>
                <name>ACC 2</name>
            </accessory>            
        </accessories>
    </product>
</products>

我希望使用jqGrid 网格中的每个产品的子网格中的附件（带加号图标）。

为此，我使用以下js：

var myGrid = $("#prods").jqGrid({ url: 'products.xml', datatype: "xml", colNames:["id", "Name"], colModel:[ {name:"id", key: true, index:"id", width:90, xmlmap:"id", sortable:true}, {name:"Name", index:"Name", width:100, sortable:true, xmlmap:"name"}} ], width: 300, height:480, ignoreCase: true, viewrecords: true, loadonce: true, sortname: 'Name', sortorder: "asc", sortable: true, pager: "#pager", xmlReader: { root: "products", row: "product", repeatitems: false, id: "sku", subgrid: { root: "products>product>accessories", row: "accessory", repeatitems:false, id: "id" } }, caption: "Products", subGrid: true, subGridRowExpanded: function(grid_id, row_id) { var subgrid_table_id; subgrid_table_id = grid_id + "_t"; jQuery("#" + grid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>"); jQuery("#" + subgrid_table_id).jqGrid( { colNames: [ 'Id', 'Name'], colModel: [ {name:"accid",index:"accid",width:80, xmlmap:"id"}, {name:"accname",index:"accname",width:80, xmlmap:"name"} ], height: 50, rowNum:10, }); } });

它没有显示子记录。我还尝试将子网格中的相同根/行作为父网格，并使用这样的引用作为ID：“products＆gt; product＆gt; accessories＆gt; accessory＆gt; id”但它也不起作用。

任何人都已经找到了一个可行的示例（事实上我的数据源是网格/子网格的同一个文件），就像我想要的那样。

希望这很清楚，否则请不要犹豫，要求提供更多细节。

Answer 1

jqGrid的

Subgrids功能主要用于动态填充数据。我的意思是，每次点击加号时，都会进行jQuery.ajax调用以从服务器获取数据。您希望在一个XML响应中（在一个XML文件中）获取整个网格和子网格数据。对于这种情况，我可以建议你两种替代的实现方式。

您可以看到第一个直播here。第二个here。

网格中需要的第一个更改是使用xmlmap:">id"和xmlmap:">name"而不是xmlmap:"id"和xmlmap:"name"。这是必需的，因为子网格的XML数据具有与主网格相同的XML元素名称。

现在对代码有一些评论。解决方案的第一个版本使用subGridUrl与主网格相同的URL。因此，为了能够读取XML数据的正确部分，我在每个子网格展开（subGridBeforeExpand内部）上修改了jqGrid的xmlReader.subgrid.root参数。

可以更快速地从服务器加载products.xml文件是使用以前请求的本地缓存。要执行此操作，请执行jqGrid的prmNames: {nd:null,page:null,rows:null,sort:null,order:null,search:null}参数或serializeGridData: function() { return ""; }或postData:""，这些参数都会删除发送到服务器的所有参数。要从子网格数据的GET请求中删除其他参数，请使用serializeSubGridData: function() {return "";}。

第一个解决方案的完整代码在这里：

$("#prods").jqGrid({
    url: 'products.xml',
    datatype: "xml",
    colNames:["id", "Name"],
    colModel:[
        {name:"id",   index:"id",   width:90,  xmlmap:">id", key: true},
        {name:"Name", index:"Name", width:100, xmlmap:">name"}
    ],
    width: 400,
    height:"100%",
    ignoreCase: true,
    viewrecords: true,
    loadonce: true,
    sortname: 'Name',
    sortorder: "asc",
    sortable: true,
    pager: "#pager",
    xmlReader: {
        root: "products",
        row: "product",
        repeatitems: false,
        subgrid: {
            row: "accessory",
            repeatitems:false,
            id: "id"
        }
    },
    subGridBeforeExpand: function(pID, id) {
        this.p.xmlReader.subgrid.root =
            "products>product:has('id:contains('"+id+"')')>accessories";
    },
    caption: "Products",
    //serializeGridData: function() { return ""; },
    //prmNames: {nd:null,page:null,rows:null,sort:null,order:null,search:null},
    postData:"",
    serializeSubGridData: function() {
        // remove parameters like "nd_=1301502998517" and "id=P1"
        // appended to the url
        return "";
    },
    subGrid: true,
    subgridtype:'xml',
    subGridUrl:'products.xml',
    subGridModel:[
        {
            name : ['id','name'],
            width : [80,80] ,
            align : ['left','left']
        }
    ]
});

另一个解决方案不使用subgrid的{{1}}部分而只使用subGridRowExpanded样式中的Subgrid as grid，但我使用xmlReader代替{datatype:'xmlstring' 1}}。在下面的代码中，我使用小技巧datatype:'xml'不仅接受字符串作为datatype:'xmlstring'参数的值。而不是那个可以使用纯XML解析数据。因此，我将解析后的XML数据保存在变量中的datastr内，然后使用以前保存的解析后的XML数据。

第二个解决方案的完整代码在这里：

loadComplete

带有子网格和单个XML文件的JqGrid作为输入

1 个答案: