未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

写在最前面

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

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

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

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

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

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

解决思路

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

可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能,代码如下,来源地址:http://www.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<data.length; 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:function () {
doTreeGridCollapse(idTreeGrid);
}
},
'-',
{
// 搜索框
text: '<input id="filter" type="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<allData.length; 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的过滤功能的解决思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:EasyUI的TreeGrid的过滤功能的解决思路
本站链接:http://www.codesec.net/view/561127.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(36)