EasyUI的TreeGrid的过滤功能的解决思路

EasyUI的TreeGrid的过滤功能的解决思路

写在最前面

这个星期一直在纠结easyui的treegrid的过滤功能，原因呢，自然是项目中一个莫名奇妙的需求。

easyui虽说是后端程序员的前端框架，但是说句实话，除去api，让我直接写里面的节点信息的话，还真是无从下手，在这里先对前端的同学膜拜下。

说下需求吧，最近一个项目中有个界面使用的easyui的treegrid展示，起初是没什么问题的，但是随着数据的导入发现实际操作上十分不便。原因呢是开发的时候treegrid并没有做分页的处理，目前测试环境数据达到456条，想从中找到一条然后处理的话，只能说费时费力了。于是便产生了开发个过滤搜索功能的想法。

起初感觉还是简单调用下api什么的，因为我记得datagrid就有个datagrid-filter.js官方扩展，但是查遍api手册，还是没有发现treegrid有什么现成的方法。只找到了两个属性，loader和loadFilter，好像有点什么关系。

期间我也看了下网上的解决方法，不知道是不是太简单了，网上关于TreeGrid过滤的资源很少。博问里也都被大牛无视了。

解决思路

这里列举一个在园子里看到的文章，其他也没有找到类似相关的内容了

可以查询根节点和具体子节点的信息，开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能，于是利用异步AJAX查询了一下数据返回后，赋值给变量，然后利用TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能，代码如下，来源地址：//jb51.net/article/120646.htm

function searchROM() {

var product = $('#Product').combobox('getValue');

var keytype = $('#keytype').combobox('getValue');

var keywords = $('#keywords').val();

var url = encodeURI('/GoodsROM/ROMList?product=' + product + '&keytype=' + keytype + '&keywords=' + keywords+'&'+Math.random());

$.post(url, {}, function(data) {

var d = data;//返回json格式结果

$('#grid').treegrid('loadData',d);//加载数据更新treegrid

}, 'json');

}

想法是很好的，但是奈何，我们后端的代码是封装在General里的，改后台代码影响很多，于是还是想到api，试试刚开始的loader和loadFilter吧。

loadFilter:function(data){

var newData = new Array();

var filter = $("#filter").val();

for(var i=0; i

if(data[i].nodeName.indexOf(filter)>0){

// 定义一个数组

newData.push(data[i]);

}

}

if(newData.length==0){

return data;

}else{

return newData;

}

},

我在查询出的结果上做过滤，返回处理后的结果，通过load方法重新加载。

效果不出所望，查询功能是实现了，但是因为每次查询都需要load一次数据库，本来页面初始化时数据的查询时长就达到20s，查一次来20s查一次来20s，谁受得了，结果自然被领导无情的打回了。

沿着这个思路继续找，既然访问数据库可以实现，那我是不是在页面初始化第一次的时候将数据存起来呢，所以我这次在loadFilter里就没有做逻辑的验证了，只是把data值取出来，然后将逻辑处理放在另外的函数里，功夫不负有心人，效果终究还是实现了，只是在初始化的时候查一次数据库，其他的搜索就不在load数据库了。下面贴出相关的代码给大家参考，有更好的想法的同学还请给个思路哈，这个先拜谢了。

var allData = new Array();

function doOrgChartInit(idTreeGrid, idMenu, idUriQuery) {

var bFound = true;

$('#' + idTreeGrid).treegrid({

rownumbers:true,

animate:true,

collapsible:true,

fitColumns:true,

url:idUriQuery,

idField:'nodeId',

treeField:'nodeName',

loadFilter:function(data){

if (bFound&&data[0].nodeName!="Root") {

allData = data;

bFound = false;

}

return data;

},

columns:[

[

{halign:'center', align:'left',field:'nodeName', title:'名称', width:200},

{halign:'center', align:'left',field:'description', title:'描述', width:100, align:'center'}

]

],

// ----------------------------------------------------------------------------------- 工具栏

toolbar:[

{

// 刷新

iconCls:'icon-reload',

handler:function () {

doTreeGridRefresh(idTreeGrid);

}

},

'-',

{

// 扩展当前结点

iconCls:'icon-redo',

handler:function () {

doTreeGridExpand(idTreeGrid);

}

},

'-',

{

// 收缩当前结点

iconCls:'icon-undo',

handler:functhttp://ion () {

doTreeGridCollapse(idTreeGrid);

}

},

'-',

{

// 搜索框

text: '',

},

{

// 搜索

iconCls:'icon-search',

handler:function () {

doFilter(idTreeGrid);

}

}

],

// ----------------------------------------------------------------------------------- 弹出菜单

onContextMenu:function (e, row) {

e.preventDefault();

$(this).treegrid('select', row.nodeId);

// alert(row.orgChartPk);

vOrgChartPk = row.orgChartPk;

$('#' + idMenu).menu('show', {

left:e.pageX,

top:e.pageY

});

}

});

}

function doFilter(idTreeGrid) {

var newData = new Array();

var filter = $("#filter").val();

if (allData.length==0) {

alert("请先点击Root初始化界面");

return false;

}

for(var i=0; i

if(allData[i].nodeName.indexOf(filter)>0){

// 定义一个数组

newData.push(allData[i]);

}

}

if (filter=="") {

$('#' + idTreeGrid).treegrid('loadData',allData);

}else{

$('#' + idTreeGrid).treegrid('loadData',newData);

}

}

总结

以上所述是给大家介绍的EasyUI的TreeGrid的过滤功能的解决思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

if(data[i].nodeName.indexOf(filter)>0){

// 定义一个数组

newData.push(data[i]);

}

}

if(newData.length==0){

return data;

}else{

return newData;

}

},

我在查询出的结果上做过滤，返回处理后的结果，通过load方法重新加载。

效果不出所望，查询功能是实现了，但是因为每次查询都需要load一次数据库，本来页面初始化时数据的查询时长就达到20s，查一次来20s查一次来20s，谁受得了，结果自然被领导无情的打回了。

沿着这个思路继续找，既然访问数据库可以实现，那我是不是在页面初始化第一次的时候将数据存起来呢，所以我这次在loadFilter里就没有做逻辑的验证了，只是把data值取出来，然后将逻辑处理放在另外的函数里，功夫不负有心人，效果终究还是实现了，只是在初始化的时候查一次数据库，其他的搜索就不在load数据库了。下面贴出相关的代码给大家参考，有更好的想法的同学还请给个思路哈，这个先拜谢了。

var allData = new Array();

function doOrgChartInit(idTreeGrid, idMenu, idUriQuery) {

var bFound = true;

$('#' + idTreeGrid).treegrid({

rownumbers:true,

animate:true,

collapsible:true,

fitColumns:true,

url:idUriQuery,

idField:'nodeId',

treeField:'nodeName',

loadFilter:function(data){

if (bFound&&data[0].nodeName!="Root") {

allData = data;

bFound = false;

}

return data;

},

columns:[

[

{halign:'center', align:'left',field:'nodeName', title:'名称', width:200},

{halign:'center', align:'left',field:'description', title:'描述', width:100, align:'center'}

]

],

// ----------------------------------------------------------------------------------- 工具栏

toolbar:[

{

// 刷新

iconCls:'icon-reload',

handler:function () {

doTreeGridRefresh(idTreeGrid);

}

},

'-',

{

// 扩展当前结点

iconCls:'icon-redo',

handler:function () {

doTreeGridExpand(idTreeGrid);

}

},

'-',

{

// 收缩当前结点

iconCls:'icon-undo',

handler:functhttp://ion () {

doTreeGridCollapse(idTreeGrid);

}

},

'-',

{

// 搜索框

text: '',

},

{

// 搜索

iconCls:'icon-search',

handler:function () {

doFilter(idTreeGrid);

}

}

],

// ----------------------------------------------------------------------------------- 弹出菜单

onContextMenu:function (e, row) {

e.preventDefault();

$(this).treegrid('select', row.nodeId);

// alert(row.orgChartPk);

vOrgChartPk = row.orgChartPk;

$('#' + idMenu).menu('show', {

left:e.pageX,

top:e.pageY

});

}

});

}

function doFilter(idTreeGrid) {

var newData = new Array();

var filter = $("#filter").val();

if (allData.length==0) {

alert("请先点击Root初始化界面");

return false;

}

for(var i=0; i

if(allData[i].nodeName.indexOf(filter)>0){

// 定义一个数组

newData.push(allData[i]);

}

}

if (filter=="") {

$('#' + idTreeGrid).treegrid('loadData',allData);

}else{

$('#' + idTreeGrid).treegrid('loadData',newData);

}

}

总结

以上所述是给大家介绍的EasyUI的TreeGrid的过滤功能的解决思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

if(allData[i].nodeName.indexOf(filter)>0){

// 定义一个数组

newData.push(allData[i]);

}

}

if (filter=="") {

$('#' + idTreeGrid).treegrid('loadData',allData);

}else{

$('#' + idTreeGrid).treegrid('loadData',newData);

}

}

总结

以上所述是给大家介绍的EasyUI的TreeGrid的过滤功能的解决思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。