问题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可排序列初时始化时显示排序图标
修改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
