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

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> elements 仅查找具有特定 <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部分xmlReader我改变了。