写在最前面
这个星期一直在纠结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的查询功能,代码如下,来源地址:https://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"htmlcode">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的过滤功能的解决思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]