前文
需要针对easyui的tree框做搜索,但是又不想用搜索框,因为那样需要用户每次输完后点击搜索才能搜索,用户体验太差,最好还是做成input框监听键盘输入事件,这样用户每输入一个字符都能触发搜索事件。话不多说,开始代码吧!
html布局
我是直接在存放tree的下方添加输入框,考虑到布局,添加了region来放置输入框,类型用的是easyui-textbox。
<div region="south" border="true" >
<input id="search_tree" style="width:100%;height:100%;" type="text" class="easyui-textbox" >
</div>
对应的绑定键盘事件如下,需要写到$(function())即入口函数里:
$('#search_tree').textbox('textbox').bind('keyup', function() {
var tempValue = $(this).val();
if (null != tempValue && '' != tempValue && undefined != tempValue) {
//alert(tempValue)
search_tree(tempValue)
}
});
用bind绑定keyup,判断当输入框非null时触发函数search_tree(val),当然这之间可以用alert调试看是否正常触发。
search_tree的实现还是非常简单的,首先我们需要获取需要搜索的tree的所有节点,然后展开对应节点,循环遍历获取每个节点的值与输入框的值判断,如果indexof存在的话,就对应的滚动到该节点,并高亮显示即可。
function search_tree(tempValue) {
// alert(tempValue)
var node = $("#objlist>ul").tree('getChildren');
console.log("node is",node)
$("#objlist>ul").tree('expandAll', node.target);
//查找相应节点并滚动到该节点,高亮显示
for (i = 0; i < node.length; i++) {
var treeId = node[i].id;
var treeName = node[i].text;
console.log("treename is",treeName)
//如果找到了,就滚动到对应的节点,并高亮显示
if (treeName.indexOf(tempValue) >= 0) {
var nodes = $("#objlist>ul").tree('find', treeId);
$("#objlist>ul").tree('scrollTo', node[i].target);
$("#objlist>ul").tree('select', node[i].target);
return
}
}
}
总结
参考了网上的一些blog,用了最简单的方法实现,当然还可以监听enter事件,这样用户搜到了就可以直接进行搜索。