jeasyui插件扩展datagrid-filter的改善_easyui datagrid-filter-优快云博客

本文链接：https://blog.youkuaiyun.com/nthuawei/article/details/52021658

本文介绍了针对jeasyui的datagrid-filter插件进行的两项改进：修复在1.4.5版本下出现的错位问题，通过调整resizeFilter函数中的宽度计算；提升中文输入的响应速度，增强用户体验。同时，还讲述了如何实现隐藏字段不生成过滤器，以优化数据网格的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1,解决datagrid-filter在easyui 1.4.5版本下会出现错位的情况:

datagrid-filter.js中找到resizeFilter函数,this.filter.resize(this, col.width - btn._outerWidth());改为this.filter.resize(this, col.width - btn._outerWidth()-1);

2,改善中文输入的响应:

3,隐藏字段不产生过滤器:

修改createFilter(frozen)函数:

function createFilter(frozen){
			var dc = state.dc;
			var fields = $(target).datagrid('getColumnFields', frozen);
			if (frozen && opts.rownumbers){
				fields.unshift('_');
			}
			var table = (frozen?dc.header1:dc.header2).find('table.datagrid-htable');
			table.find('tr').each(function(){
				$(this).height($(this).height());
			});
			
			// clear the old filter component
			table.find('input.datagrid-filter').each(function(){
				if (this.filter.destroy){
					this.filter.destroy(this);
				}
				if (this.menu){
					$(this.menu).menu('destroy');
				}
			});
			table.find('tr.datagrid-filter-row').remove();
			
			var tr = $('<tr class="datagrid-header-row datagrid-filter-row"></tr>');
			if (opts.filterPosition == 'bottom'){
				tr.appendTo(table.find('tbody'));
			} else {
				tr.prependTo(table.find('tbody'));
			}
			
			for(var i=0; i<fields.length; i++){
				var field = fields[i];
				var col = $(target).datagrid('getColumnOption', field);
				//以下为添加内容:忽略隐藏字段
				if(col.hidden) continue;
				//以上为添加内容
				if (col && (col.checkbox || col.expander)){
					field = '_';
				}
				var td = $('<td></td>').attr('field', field).appendTo(tr);
				if (field == '_'){continue;}
				var div = $('<div class="datagrid-filter-c"></div>').appendTo(td);
				
				var fopts = getFilter(field);
				var type = fopts ? fopts.type : 'text';
				
				var filter = opts.filters[fopts ? fopts.type : 'text'];
				var input = filter.init(div, fopts ? (fopts.options||{}) : {});
				input.addClass('datagrid-filter').attr('name', field);
				input[0].filter = filter;
				
				if (fopts){
					input[0].menu = createFilterButton(div, fopts.op);
					if (fopts.options && fopts.options.onInit){
						fopts.options.onInit.call(input[0]);
					}
				} else if (type == 'text'){
//					input.bind('keydown', function(e){
						input.bind('keyup', function(e){//修改为keyup响应
						var t = $(this);
						if (this.timer){
							clearTimeout(this.timer);
						}
						if (e.keyCode == 13){
							addFilterRule(target, {
								field: t.attr('name'),
								op: 'contains',
								value: t.val()
							});
							doFilter(target);
						} else {
							this.timer = setTimeout(function(){
								addFilterRule(target, {
									field: t.attr('name'),
									op: 'contains',
									value: t.val()
								});
								doFilter(target);
							}, opts.filterDelay);
						}
					});
				}
				
				resizeFilter(target, field);
			}
		}