jeasyui扩展:combogrid实现本地数据过滤

jeasyui的combogrid插件属性filter为用户自定义本地过滤函数:

$('#cc').combogrid({
	filter: function(q, row){
		var opts = $(this).combogrid('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});

可以选中最后一行匹配行,然而并不能过滤掉不匹配行;

实现思路:

1,本地保存远程数据

2,文本框改变时原始数据匹配文本框,删除不匹配行,grid重新加载已过滤本地数据

3,数据网格面板关闭时,恢复原始数据

$.extend($.fn.combogrid.defaults, {
//添加combogrid属性原始数据: 用于本地匹配过滤 此数据在第一次onLoadSuccess时自动初始化
//如果不是第一次从远程请求数据成功,需手动更新此数据
primitiveData : null,
//添加combogrid属性输入文本与grid匹配的字段
matchField : null,
//更改combogrid属性selectOnNavigation默认值:false (true影响匹配过滤)
selectOnNavigation : false,

//设置combogrid默认onLoadSuccess行为: 初始化primitiveData 重写该事件,将覆盖
onLoadSuccess : function(data) {
	var primitiveData = $(this).combogrid('options').primitiveData;
	if (!primitiveData) {
		$(this).combogrid('options').primitiveData = data;
	}
},// end function

//添加combogrid插件默认onChange行为: 本地过滤不匹配行
onChange : function(newValue, oldValue) {
	$panel = $(this).combogrid('panel').parent('.combo-p');
	if ($panel.css('display') == 'none')
		return;// 面板未打开,直接退出
	var $grid = $(this).combogrid('grid');
	var options = $(this).combogrid('options');
	var data = options.primitiveData;
	var field = options.matchField;
	// 过滤不匹配行
	var rows = $(data.rows).filter(function() {
		if (this[field].indexOf(newValue) > -1) {
			return true;
		}
		return false;
	});
	var newData = { total : rows.length, rows : rows };
	$grid.datagrid('loadData', newData);
},// end function()

//添加combogrid插件默认onHidePanel行为: 恢复原始数据
onHidePanel : function() {
	var $datagrid = $(this).combogrid('grid');
	// 加载所有原始数据
	var primitiveData = $(this).combogrid('options').primitiveData;
	$datagrid.datagrid('loadData', primitiveData);
},// end function()

//combogrid插件默认filter过滤行为: 总是选中第一行
filter : function(q, row) {
	var index = $(this).combogrid('grid').datagrid('getRowIndex', row);
	if (index == 0) {
		return true;
	} else {
		return false;
	}
}// end function()

});// end extend()

/*
 * 添加combogrid插件方法: 绑定焦点事件,展开grid
 * 需combogrid构建完成后手动调用方法绑定该事件
 */
$.extend($.fn.combogrid.methods, { bindFocus : function(jq) {
	jq.each(function() {
		// 焦点事件绑定
		$(this).combogrid('textbox').focus(function(event) {
			var $combogrid = $(this).parent().prev('.combogrid-f');
			var $datagrid = $combogrid.combogrid('grid');
			$combogrid.combogrid('showPanel');
		});// end focus()

		return true;
	});// end each()
}// end function(jq)
});//end extend()