给easyui的textbox绑定回车事件
项目有一个textbox输入框,需要绑定一个回车搜索事件。
一开始想着,直接使用js的on或者jquery的keydown方法直接绑定,但是事件不生效。
$("#propName").textbox({width: 200,prompt: "请输入物品名称进行搜索"
}).keydown(function() {if(event.keyCode === 13) {let rowData = $("#role_list").datagrid("getSelected");if (rowData) {let roleId = rowData.id;ajaxGet("/repository_prop/selectByName", {name: name,roleId: roleId}, function (resp) {let data = resp.data;if (data.length > 0) {// todo:展示查询结果} else {let message = "少侠没有该物品哦!";alertMsg(message);}}, error);}}
});
通过F12查看到输入框已经被绑定了两个keydown事件。
于是,就先解绑keydown事件,然后再重新绑定:
$("#propName").textbox({width: 200,prompt: "请输入物品名称进行搜索"
}).unbind("keydown").keydown(function() {if(event.keyCode === 13) {let rowData = $("#role_list").datagrid("getSelected");if (rowData) {let roleId = rowData.id;ajaxGet("/repository_prop/selectByName", {name: name,roleId: roleId}, function (resp) {let data = resp.data;if (data.length > 0) {// todo:展示查询结果} else {let message = "少侠没有该物品哦!";alertMsg(message);}}, error);}}
});
气人的是,还是绑定失败了!!!
一怒之下,我点开easyui的源代码,发现easyui的textbox组件有这么一个事件属性:
inputEvents: {blur: function (e) {var t = $(e.data.target);var opts = t.textbox("options");if (t.textbox("getValue") != opts.value) {t.textbox("setValue", opts.value);}}, keydown: function (e) {if (e.keyCode == 13) {var t = $(e.data.target);t.textbox("setValue", t.textbox("getText"));}}
},
上面的这个代码没看懂,但是像是easyui通过这种方式管理了组件的keydown事件。
最后,直接把源代码里的inputEvents属性重新定义,保留原来的blur事件。
$("#propName").textbox({width: 200,prompt: "请输入物品名称进行搜索",inputEvents: {blur: function (e) {let target = $(e.data.target);let opts = target.textbox("options");if (target.textbox("getValue") !== opts.value) {target.textbox("setValue", opts.value);}},keydown: function (event) {if(event.keyCode === 13) {let rowData = $("#role_list").datagrid("getSelected");if (rowData) {let roleId = rowData.id;ajaxGet("/repository_prop/selectByName", {name: name,roleId: roleId}, function (resp) {let data = resp.data;if (data.length > 0) {// todo:展示查询结果} else {let message = "少侠没有该物品哦!";alertMsg(message);}}, error);}}}}});
经过一番尝试,终于成功绑定了keydown事件。