Заполнять jqgrid только с выбранными данными xml

Question

У меня есть форма, которая принимает идентификатор в качестве ввода и основывается на существовании этого идентификатора в XML-файле, он должен заполнять таблицу jqgrid соответствующей информацией из того же XML-файла. Пожалуйста помоги. Мой 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 часть xmlReader которой я изменился.