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

我有一个表单，它接受一个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> 

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

---

提前感谢

有许多方法可以实现您的需求，但在我看来，最简单的方法似乎是将

xmlReader

与定义为函数的

行一起使用。在函数内部，可以过滤
元素，以仅查找具有特定
子元素的元素。这样就不需要使用额外的单独的
$.ajax
调用

显示以下结果


它使用以下代码

$（“#GridTable”）.jqGrid({
url:“samina.xml”，
数据类型：“xml”，
colModel：[
{名称：“日期”，宽度：75}，
{name:“type”}，
{name:“amount”，格式化程序：“integer”，sorttype:“integer”}
],
xmlReader：{
root:“EmpDetails”，
行：功能（obj）{
var empid=$（“#empid”）.val（），
//使用特定的empid元素获取详细信息
详细信息=$（obj）.children（“详细信息”）.filter（函数（）{
if（$（this）.children（“empid”）.text（）==empid）{
返回true；
}
});
返回$（详细信息）。子项（“交易”）；
},
重复项：false，
id:“[transid]”
},
宽度：780，
高度：“自动”，
行数：5，
有一次：是的，
gridview：没错，
自动编码：正确，
iconSet：“真棒”，
寻呼机：“jqGridPager”
}).jqGrid（“navGrid”、“#jqGridPager”、{edit:false、add:false、del:false、hideemptypageparts:false}）；

上面最重要的是我更改的
xmlReader
的
row
和
id
部分。
有许多方法可以实现您的需求，但在我看来，最简单的方法似乎是将
xmlReader
与
row
定义为函数一起使用。在函数内部，可以过滤
元素，以仅查找具有特定
子元素的元素。这样就不需要使用额外的单独的
$.ajax
调用

显示以下结果


它使用以下代码

$（“#GridTable”）.jqGrid({
url:“samina.xml”，
数据类型：“xml”，
colModel：[
{名称：“日期”，宽度：75}，
{name:“type”}，
{name:“amount”，格式化程序：“integer”，sorttype:“integer”}
],
xmlReader：{
root:“EmpDetails”，
行：功能（obj）{
var empid=$（“#empid”）.val（），
//使用特定的empid元素获取详细信息
详细信息=$（obj）.children（“详细信息”）.filter（函数（）{
if（$（this）.children（“empid”）.text（）==empid）{
返回true；
}
});
返回$（详细信息）。子项（“交易”）；
},
重复项：false，
id:“[transid]”
},
宽度：780，
高度：“自动”，
行数：5，
有一次：是的，
gridview：没错，
自动编码：正确，
iconSet：“真棒”，
寻呼机：“jqGridPager”
}).jqGrid（“navGrid”、“#jqGridPager”、{edit:false、add:false、del:false、hideemptypageparts:false}）；

上面最重要的是我更改的
xmlReader
的
行和
id
部分。
您使用
textname==name&&textempid==empid
搜索
的特定
名称
和
empid
节点，但我看不到任何
名称
节点（仅
empid
）任何
的内部。让我们看看您已经找到了一些
节点，那么我不清楚您为什么不将该节点转发到
populategrid
以允许jqGrid只读特定（找到的）节点的
事务
？您可以使用jqGrid的
datastr:detailNade，数据类型：“xmlstring”
选项。如果这些信息对你来说还不够，那么我可以发布更多的实施细节。谢谢@Oleg。请忽略（textname==name）。我现在已经编辑了我的代码。我只使用empid进行验证。您可以发布更多关于如何将细节节点转发到网格的详细信息吗？您可以使用
textname==name&&textempid==empid
来搜索
的特定
“name”
和
“empid”
节点，但我在任何
中都没有看到任何
名称
节点（仅
empid
）。让我们看看您已经找到了一些
节点，那么我不清楚您为什么不将该节点转发到
populategrid
以允许jqGrid只读特定（找到的）节点的
事务
？您可以使用jqGrid的
datastr:detailNade，数据类型：“xmlstring”
选项。如果这些信息对你来说还不够，那么我可以发布更多的实施细节。谢谢@Oleg。请忽略（textname==name）。我现在已经编辑了我的代码。我只使用empid进行验证。你可以发布更多关于如何将细节节点转发到网格的详细信息吗？非常感谢你。它工作得很好。你能解释一下“rows=[]”的意义吗。Thanks@samina：不客气！当然，您可以删除不需要的
行=[]
。我想首先在
行中推送
元素，该元素具有特定的
empid
元素，但后来决定改用
jQuery.filter
。我根据答案更新了代码。非常感谢你。它工作得很好。你能解释一下“rows=[]”的意义吗。Thanks@samina：不客气！当然，您可以删除不需要的
行=[]
。我想首先推送
元素，它具有特定的
empid    $(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;
      }