easyUI使用中存在的问题

681 阅读2分钟

问题1:easyUI的combobox上下键失效

具体的问题是:在combobox按上下键会直接回调选中option的事件

下面的源码是基于jquery.easyui-1.4.3.min.js版本

找到$.fn.combobox.defaults处理键盘上下键事件 nav(_98e, dir)

$.fn.combobox.defaults = $.extend({}, $.fn.combo.defaults, {
		valueField: "value",
		textField: "text",
		groupField: null,
		groupFormatter: function(_9c8) {
			return _9c8;
		},
		mode: "local",
		method: "post",
		url: null,
		data: null,
		queryParams: {},
		keyHandler: {
			up: function(e) {
				nav(this, "prev");
				e.preventDefault();
			},
			down: function(e) {
				nav(this, "next");
				e.preventDefault();
			},
			left: function(e) {},
			right: function(e) {},
			enter: function(e) {
				_9b1(this);
			},
			query: function(q, e) {
				_9aa(this, q);
			}
		},
function nav(_98e, dir) {
		var opts = $.data(_98e, "combobox").options;
		var _98f = $(_98e).combobox("panel");
		var item = _98f.children("div.combobox-item-hover");
		if (!item.length) {
			item = _98f.children("div.combobox-item-selected");
		}
		item.removeClass("combobox-item-hover");
		var _990 = "div.combobox-item:visible:not(.combobox-item-disabled):first";
		var _991 = "div.combobox-item:visible:not(.combobox-item-disabled):last";
		if (!item.length) {
			item = _98f.children(dir == "next" ? _990 : _991);
		} else {
			if (dir == "next") {
				item = item.nextAll(_990);
				if (!item.length) {
					item = _98f.children(_990);
				}
			} else {
				item = item.prevAll(_990);
				if (!item.length) {
					item = _98f.children(_991);
				}
			}
		}
		if (item.length) {
			item.addClass("combobox-item-hover");
			var row = opts.finder.getRow(_98e, item);
			if (row) {
				_98a(_98e, row[opts.valueField]);
				if (opts.selectOnNavigation) {
					_992(_98e, row[opts.valueField]);
				}
			}
		}
	};

nav(_98e, dir)方法中最下面执行了 _992(_98e, row[opts.valueField]);

function _992(_993, _994) {
		var opts = $.data(_993, "combobox").options;
		var _995 = $(_993).combo("getValues");
		if ($.inArray(_994 + "", _995) == -1) {
			if (opts.multiple) {
				_995.push(_994);
			} else {
				_995 = [_994];
			}
			_996(_993, _995);
			opts.onSelect.call(_993, opts.finder.getRow(_993, _994));
		}
	};

而_992()这个方式中会回调opts.onSelect.call,也就是会执行combobox的onSelect方法。所以就导致上下键直接选中某个option的问题。

解决方式:

nav(_98e, dir) 中直接注释掉_992(_98e, row[opts.valueField]);这一行代码。经测试没啥问题。

问题2:easyUI DataGrid可排序列初时始化时显示排序图标

参考:www.shiqidu.com/p/81

修改jquery.easyui-1.4.3.min.js源码:

var pos=_5b8(_60e,col.field);
if(pos>=0){
cell.addClass("datagrid-sort-"+_60f[pos]);
}
if(col.sortable==true) {//这个else if 是需要你添加的
cell.addClass("datagrid-sort");
}
if(col.resizable==false){
cell.attr("resizable","false");
}

注意1:参考上面网址修改没有效果,这时一定要去掉esle ,否则没效果,也就是:

if(col.sortable==true) {//这个if 是需要你添加的
cell.addClass("datagrid-sort");
}

注意2:参考上面网址修改样式表时,发现我们系统好多easyui.css的样式表。

具体要修改的样式表要按照系统所中引入的easyui.css

具体修改如下:

/**这里是需要你添加的**/
.datagrid-sort .datagrid-sort-icon {
    display: inline;
    padding: 0 13px 0 0;
    margin-left:4px;
    background: url('images/sorter.png') no-repeat 0 center;
}
.datagrid-sort-asc .datagrid-sort-icon,.datagrid-sort-desc .datagrid-sort-icon {
    display: inline;
    margin-left:0;
}
/**这里是需要你添加的**/
.datagrid-sort-desc .datagrid-sort-icon {
    display: inline;
    padding: 0 13px 0 0;
    background: url('images/datagrid_icons.png') no-repeat -16px center;
}

.datagrid-sort-asc .datagrid-sort-icon {
    display: inline;
    padding: 0 13px 0 0;
    background: url('images/datagrid_icons.png') no-repeat 0px center;
}

用到的sorter.png

sorter.png