JQgrid-使用xml数据类型填充选择过滤器工具栏搜索

Question

我有树网格类型的JqGrid，我正试图在过滤器工具栏中填充基于服务器数据的选择搜索(以XML格式返回的数据(。我发现了一些函数，它们从特定的行中获得唯一的值，然后以正确的格式构建字符串(例如："：All；1:1；2:2；3:3"(。

我的一个网格选项是loadonce:true，我从文档中了解到，如果这个选项设置为true，并且我从服务器以XML或JSON格式获取数据，它会自动将数据类型属性更改为local，并且我想要执行的所有更改都在客户端代码上。

这是我想做的：

<script>                        
$(document).ready(function () {
jQuery("#treegrid").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'name',
direction: 'rtl',
url: 'Handlers/JQTreeGridDataHandler.ashx',// from here i'm getting the XML data from server and it works fine
datatype: "xml",                                
mtype: "POST",
colNames: ["id", "Account", "Acc Num", "Debit", "Credit", "Balance"],
colModel: [
{ name: 'id', index: 'id', width: 1, hidden: true, key: true },
{ name: 'name', index: 'name', width: 180 },// this is the col that i want to add the select filter
{ name: 'num', index: 'acc_num', width: 80, align: "center", search: false },
{ name: 'debit', index: 'debit', width: 80, align: "right", search: false },
{ name: 'credit', index: 'credit', width: 80, align: "right", search: false },
{ name: 'balance', index: 'balance', width: 80, align: "right", search: false }
]
height: 'auto',
sortname: 'name',
sortorder: 'asc',
loadonce: true,
viewrecords: true,
pager: "#ptreegrid",
caption: "Treegrid example"
});

setSearchSelect.call($("#treegrid"), "name");                            
$("#treegrid").jqGrid('filterToolbar', { stringResult: true, defaultSearch: "cn" });
});
//Functions for Toolbar searching
var getUniqueNames = function (columnName) {
var t = $("#treegrid").jqGrid('getGridParam', 'data'),
texts = $.map(t, function (item) { return item.name; }), uniqueTexts = [],
textsLength = texts.length, text, textsMap = {}, i;
for (i = 0; i < textsLength; i++) {
text = texts[i] 
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
},
buildSearchSelect = function (uniqueNames) {
var values = ":All;";
$.each(uniqueNames, function () {
values += this + ":" + this + ";";
});
return values.slice(0, -1);
},
setSearchSelect = function (columnName) {
$("#treegrid").jqGrid('setColProp', columnName,
{
stype: "select",
searchoptions: {
sopt: ['eq'],
value: buildSearchSelect(getUniqueNames.call($("#treegrid"), columnName))                                            
}
});
};
</script>

请帮我理解我做错了什么。非常感谢

Answer 1

您描述的问题是由ajax调用引起的。说明：栅格是根据栅格选项创建的。并对数据进行ajax调用。根据您的服务器响应、请求的数据量、网络连接等，数据会有延迟。将数据com解锁到您称之为fintion的网格，以根据数据构建选择，但网格中不存在数据。要解决这个问题，你有两个选项

1.使用setTimeout延迟创建select和serch类

...
setTimeout(function() {
setSearchSelect.call($("#treegrid"), "name");                            
$("#treegrid").jqGrid('filterToolbar', { stringResult: true, defaultSearch: "cn" });
}, 800);
...

2.推荐的第二种方法是在加载tha数据时调用这些函数一次。这可以在gridComplete事件中完成，并且一个标志指示g是select is build。代码下方：

var buildselect = false;
jQuery("#treegrid").jqGrid({ 
url: 'data.xml', 
treedatatype: "xml", 
mtype: "POST", 
colNames:["id","Account","Acc Num", "Debit", "Credit","Balance","Enabled"], 
colModel:[ 
{name:'id',index:'id', width:1,hidden:true,key:true}, 
{name:'name',index:'name', width:180 }, 
{name:'num',index:'acc_num', width:80, align:"center", search: false}, 
{name:'debit',index:'debit', width:80, align:"right", search: false}, 
{name:'credit',index:'credit', width:80,align:"right", search: false}, 
{name:'balance',index:'balance', width:80,align:"right", search: false}, 
{name:'enbl', index:'enbl', hidden: true} 
], 
height:'auto', 
pager : "#ptreegrid", 
treeGrid: true, 
loadonce : true,
ExpandColumn : 'name', 
caption: "Treegrid example",
gridComplete : function() {
if(!buildselect) {
setSearchSelect.call($("#treegrid"), "name");                            
$("#treegrid").jqGrid('filterToolbar', { stringResult: true, defaultSearch: "cn" });
buildselect = true;
}
}
});

这是你的代码的工作演示