对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)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!