easyui 重写combobox选中事件,使其支持Ctrl,Shift按键多选

使用过easyui框架的同学,对combobox肯定不陌生,它应该是select标签的加强版,有着禁用,只读,动态加载,格式化列等实用的功能.

在使用时,需要多选将multiple属性改为true就可以,单选则改为false.很方便.

任何事物都有它的两面性,有方便的地方,肯定也会有不怎么方便的地方.

例如我就遇到过这个问题, 当单选需求大于多选需求,而多选又必须要有的时候,默认的多选会给单选造成不友好的体验;比如说选省份的时候默认选中的是北京,我要改为上海,直接点击上海肯定是不行的,北京还在,那么就需要先取消北京的选中,再去选中上海.

为了优化用户的体验,现构思为将其默认为单选,按住Ctrl键使用默认多选,按住Shift使用批量多选,实现如下:

首先,因为easyui的combobox组件初始化后是新加的元素,所以不能绑定按键事件在原元素上,可以绑定在父元素上.这里我是绑定在了body中,因为可能后续也会用到.

js代码如下:

绑定按键事件代码(以下代码记录Ctrl和Shift按键是否按下):

// 按键码:ALT: 18,DOWN: 40,RIGHT: 39,UP: 38,LEFT: 37
var KEY = {SHIFT: 16,CTRL: 17};

// 按键状态
var inputFlags = {isShiftDown: false,isCtrlDown: false};

//是否禁用网页上选取的内容
function onselectstart(enable){
	document.onselectstart = function(){
		event.returnValue = enable;
	}
}

//响应键盘按下事件
function keyPress(event) {
	var e = event || window.event;
  	var code = e.keyCode | e.which | e.charCode