Question

我有一个表单，它接受一个id作为输入，并根据xml文件中此id的存在，它必须使用相同的xml文件中的相关信息填充jqgrid表。请帮忙。我的xml代码看起来像

<EmpDetails>
  <Detail detailid="1">
    <empid>12345</empid>
    <Transaction transid="11">
      <date>09-01-2015</date>
      <type>Credit</type>
      <amount>15000</amount>
    </Transaction>
    <Transaction transid="12">
      <date>09-02-2015</date>
      <type>Debit</type>
      <amount>200</amount>
    </Transaction>
    <Transaction transid="13">
      <date>09-03-2015</date>
      <type>Debit</type>
    </Transaction>
  </Detail>
  <Detail detailid="2">
    <empid>67890</empid>
    <Transaction transid="21">
      <date>09-02-2015</date>
      <type>Debit</type>
      <amount>1200</amount>
    </Transaction>
   </Detail>
</EmpDetails>

并且javascript代码是

    $(document).ready(function () {

        $('#button1').click(function () {

            var textname = $('#name').val();
            var textempid = $('#empid').val();

            $.ajax({
                type: "GET",
                url: "DataScripts/Data1.xml",
                cache: false,
                dataType: "xml",
                success: function (xml) {
                    $(xml).find('Detail').each(function () {
                        var empid = $(this).find("empid").text();
                        var detailid = $(this).attr('detailid');

                        if (textempid==empid)
                        {
                            populategrid(detailid);
                        }

                    });
                }
            });

  function populategrid(detailid)
        {
           $('#GridTable').jqGrid({

                url: 'DataScripts/Data1.xml',
                datatype: "xml",
                colModel: [
                    {label: 'date', name: 'date', key: false, width: 75, xmlmap: 'date'},
                    {label: 'type', name: 'type', sortable: true, xmlmap: 'type'},
                    {label: 'amount', name: 'amount', sortable: true, xmlmap: 'amount'} 
                ],
                xmlReader: {
                    root: "EmpDetails",
                    row: "Detail>Transaction",
                    repeatitems: false,
                    id: "[detailid]"
                },
                width: 780,
                height: 250,
                rowNum: 5,
                pager: "#jqGridPager",
            }).navGrid('#jqGridPager', { edit: false, add: false, del: false }); 
           return;
      }

当我执行此操作时，我会看到另一个empid的事务详细信息以及输入的empid的事务信息也会显示在网格上。

提前致谢

Answer 1

有很多方法可以实现您的要求，但最简单的方法是使用xmlReader并将row定义为函数。在函数内部，可以过滤<Detail>元素以仅查找具有特定<empid>子元素的元素。这种方式不需要使用额外的单独$.ajax电话。

The demo显示以下结果

它使用以下代码

$("#GridTable").jqGrid({
    url: "samina.xml",
    datatype: "xml",
    colModel: [
        {name: "date", width: 75},
        {name: "type"},
        {name: "amount", formatter: "integer", sorttype: "integer"}
    ],
    xmlReader: {
        root: "EmpDetails",
        row: function (obj) {
            var empid = $("#empid").val(),
                // get Detail with specific empid element
                details = $(obj).children("Detail").filter(function () {
                    if ($(this).children("empid").text() === empid) {
                        return true;
                    }
                });
            return $(details).children("Transaction");
        },
        repeatitems: false,
        id: "[transid]"
    },
    width: 780,
    height: "auto",
    rowNum: 5,
    loadonce: true,
    gridview: true,
    autoencode: true,
    iconSet: "fontAwesome",
    pager: "#jqGridPager"
}).jqGrid("navGrid", "#jqGridPager", { edit: false, add: false, del: false, hideEmptyPagerParts: false });

以上最重要的是我更改的row id部分。

仅使用选定的xml数据填充jqgrid

1 个答案: