大佬教程收集整理的这篇文章主要介绍了对Dgrid表格进行模糊搜索,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
最近在使用Dojo的拓展插件Dgrid时,需要做到一个功能——对Dgrid表格中的内容进行模糊搜索,弄了老半天也是将这个搞了出来。
昨天把模糊搜索的代码抽出来,并整理了一下。这段代码在逻辑上清晰易懂很多,毕竟要给项目组的其他人用。下面贴码。
var common = { /** * @example commom.onQuery(oInput,oGrid,aInitialData); * @description 模糊查询,在输入框输入任意值即可对表格内容进行搜索,模糊搜索的效果可参考百度的搜索。使用:(1)dgrid表格startup后,调用此函数。(2)当表格数据刷新时,需要重新调用此函数。 * @param {Object} oS input框对象,即用来进行搜索的输入框 * @param {Object} grid Dgrid表格对象 * @param {Array} initialData 表格的初始数据 * */ onQuery: function(oS,grid,initialData) { var _; os.oldLength = 0,_ = { name: "模糊搜索主体函数",searchTimeout: null,//这个变量用来设置延时,减少dgrid的刷新次数。 //模糊搜索的入口。 onQuery: function() { if(os.value != "") {//搜索框的输入值增多 if(os.value.length > os.oldLength) {//搜索框的输入值增多,进行增值搜索。 _._querymore(); } else if(os.value.length < os.oldLength) {//搜索框的输入值减少,进行减值搜索。 _._queryLess(); } } else {//搜索框的输入值为空,进行空值搜索。 _._queryNull(); } //将当前input值的长度赋值给 os.oldLength。 os.oldLength = os.value.length; },//将输入框的输入值切割为数组,并去除值为 "" 的空值。将整理完的筛选条件数组返回。 _aGetFilter: function() { //清除查询条件多余的空格 var aV = os.value.replace(/\s+/g," ").split(" "); //删除筛选条件数组的空元素 for(var i = 0; i < aV.length; i++) { if(aV[i].length == 0 || aV[i] === "") { aV.splice(i,1); } } return aV; },_queryNull: function() { _._refreshData(); },_querymore: function(aV) { var temp = null,aV = _._aGetFilter(); for(var i = 0,iL = aV.length; i < iL; i++) { //返回匹配出来的数据。 temp = grid.store.query(function(object) { return object.name.indexOf(aV[i]) >= 0; }); } //将@L_674_35@放入表格中,更新表格。 _._updateData(temp); },_queryLess: function() { var temp = null,aV = _._aGetFilter(); //重置表格数据。 _._resetData(); for(var i = 0,iL = aV.length; i < iL; i++) { //返回匹配出来的数据。 temp = grid.store.query(function(object) { return object.name.indexOf(aV[i].replace(/\s+/g,"")) >= 0;//对表格中每一行数据的name进行搜索。 }); } //将@L_674_35@放入表格中,更新表格。 _._updateData(temp); },_updateData: function(temp) { //设置延时器,减少dgrid表格的setData、refresh方法的执行次数,提高搜索性能、搜索体验。 _.searchTimeout && clearTimeout(_.searchTimeout); _.searchTimeout = setTimeout(function() { grid.store.setData(temp); grid.refresh();//刷新dgrid表格,展示@L_674_35@。 },100); },_resetData: function() { //重置表格数据为初始值,因为是立即重置,所以不加入定时器。 grid.store.setData(initialData); },_refreshData: function() { //这个方法为刷新表格数据位初始值,需要加入延时器(延时器在_._updateData方法中),防止此方法多次执行。 _._updateData(initialData); } }; //当输入框的值发生改变时,调用模糊搜索入口执行方法_.onQuery。因为考虑不同浏览器的兼容问题,所以这么写。前面兼容IE,后面谷歌火狐等。 document.all ? os.onpropertychange = _.onQuery : os.addEventListener("input",_.onQuery,falsE); } }使用方法很简单,照着注释里的来就行。
commom.onQuery(this.search,this.grid,this.initialData)
以上是大佬教程为你收集整理的对Dgrid表格进行模糊搜索全部内容,希望文章能够帮你解决对Dgrid表格进行模糊搜索所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。