对Dgrid表格进行模糊搜索

前端之家收集整理的这篇文章主要介绍了对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;
					});
				}
				//将搜索结果放入表格中,更新表格。
				_._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进行搜索。
					});
				}
				//将搜索结果放入表格中,更新表格。
				_._updateData(temp);
			},_updateData: function(temp) {
				//设置延时器,减少dgrid表格的setData、refresh方法的执行次数,提高搜索性能搜索体验。
				_.searchTimeout && clearTimeout(_.searchTimeout);
				_.searchTimeout = setTimeout(function() {
					grid.store.setData(temp);
					grid.refresh();//刷新dgrid表格,展示搜索结果。
				},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)

猜你在找的Dojo相关文章