EasyUI--combotree模糊查詢
阿新 • • 發佈：2019-01-22
<head>
<meta charset="utf-8" />
<title>EASY_UI搜尋框</title>
</head>
<script src="jquery-easyui-1.5.5.2/jquery.min.js"></script>
<script src="jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<script src="jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5.2/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.5.2/themes/icon.css" />
<style>
#select {
width: 250px;
height: 20px;
}
</style>
<body>
<div>
<input id="select" type="text" class="easyui-combotree" data-options="
url: 'json/jxgljtree.json',
method:'get',
checkbox:true,
lines:true,
multiple:true,
panelHeight:150,
panelWidth:250,
clickNodeForSpan:true,
editable : true,
keyHandler : {
query : function(q) {
var t = $(this).combotree('tree');
var nodes = t.tree('getChildren');
for(var i=0; i<nodes.length; i++){
var node = nodes[i];
if (node.text.indexOf(q) >= 0){
$(node.target).show();
} else {
$(node.target).hide();
}
var opts = $(this).combotree('options');
if (!opts.hasSetEvents){
opts.hasSetEvents = true;
var onShowPanel = opts.onShowPanel;
opts.onShowPanel = function(){
var nodes = t.tree('getChildren');
for(var i=0; i<nodes.length; i++){
$(nodes[i].target).show();
}
onShowPanel.call(this);
};
$(this).combo('options').onShowPanel = opts.onShowPanel;
}
}
}
" />
</div>
</body>
</html>