由于没有找到jqxTree的前台模糊匹配(有一个incrementalSearch,但是效果并不是很好),
所以动手写了一个简单的jqxTree search
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="keywords" content="jQuery Tree, Tree Widget, Tree" />
<meta name="description" content="jqxTree的搜索框控件" />
<title id='Description'>jqxTree的简单搜索框控件</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="jqxTree_search.js"></script>
<script type="text/javascript" src="events.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#container{
width: 200px;
height: 400px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #ccc;
}
.toolbar{
width: 100%;
height: 40px;
position: relative;
border-bottom: 1px solid #ccc;
}
.toolbar input{
width: 100%;
height: 100%;
outline: none;
border: 0;
padding-left: 10px;
}
.toolbar span{
display: block;
width: 20px;
height: 20px;
right: 5px;
top: 50%;
margin-top: -10px;
cursor: pointer;
position: absolute;
}
.jqxTreex{
width: 100%;
border: 0;
}
</style>
</head>
<body>
<div id='container'>
<div class="toolbar">
<input type="text" name="" id="searchBox" />
<span class="wx_jqx_reset" title="没有引图标库 用个X代替">x</span>
</div>
<div id='jqxTree' class="jqxTreex">
</div>
</div>
</body>
</html>
jqxTree_search.js
var jqxTreeSearch = function(id, textboxId, delayTime) {
this.tree = $('#' + id); //树容器标识
this.inputs = $('#' + textboxId); //输入框标识
this.preValue = '#####$$$$$'; //初始时,上一次的值
this.delayTime = delayTime; //延迟时间
this.timer = null; //定时器
};
jqxTreeSearch.prototype = {
Search: function(value) {
//获取树的所有子节点
clearTimeout(this.timer);//清除定时器
var items = this.tree.jqxTree('getItems');
var inputValue = $.trim(value); //去除首尾空格,缓存当前
var that = this;
this.timer = setTimeout(function() { //设置定时器
if(inputValue != that.preValue) {
if(inputValue == '') { //输入框没有值(删除)
that.resetItem();
/*that.ExpandedAll();*/
} else {
that.CollapsedAll();
that.resetItem();
var matchedNodeList = [];
if(that.tree && that.tree.length > 0) {
var node = null;
for(var i = 0, len = items.length; i < len; i++) {
node = items[i];
if(that.isMatch(inputValue, node.label)) {
matchedNodeList.push(node);
}
}
that.showParent(matchedNodeList);
that.showChilden(matchedNodeList);
that.showNode(matchedNodeList);
}
that.preValue = value;
}
}
}, this.delayTime);
},
isMatch: function(searchText, targetText) {
return targetText.toUpperCase().indexOf(searchText.toUpperCase()) != -1;
},
hideNode: function(arr) {
var node = null;
for(var i in arr) {
node = arr[i];
this.tree.jqxTree('disableItem', node.element);
}
},
showNode: function(arr) {
var node = null;
for(var i in arr) {
node = arr[i];
$(node.titleElement[0]).css({
'background': '#3399ff',
'color': '#fff'
});
}
},
CollapsedAll: function() {
this.tree.jqxTree('collapseAll');
},
ExpandedAll: function() {
this.tree.jqxTree('expandAll');
},
resetItem: function() {
/*console.log(this.timer);
clearTimeout(this.timer);//清除定时器*/
var items = this.tree.jqxTree('getItems');
for(var i = 0, len = items.length; i < len; i++) {
this.tree.jqxTree('enableItem', items[i].element);
$(items[i].titleElement[0]).css({
'background': '#fff',
'color': '#000'
});
}
},
showChilden: function(arr) {
var node = null;
for(var i in arr) {
node = arr[i];
if(node.hasItems) {
this.tree.jqxTree('expandItem', node.element);
}
}
},
showParent: function(arr) {
var node = null;
for(var i in arr) {
node = arr[i];
if(node.parentElement) {
var parEle = node.parentElement;
this.tree.jqxTree('expandItem', parEle);
}
}
}
};
$(document).ready(function() {
// Create jqxTree
var source = [{
icon: "../../images/mailIcon.png",
label: "Mail",
expanded: true,
items: [
{ icon: "../../images/calendarIcon.png", label: "王1" },
{ icon: "../../images/contactsIcon.png", label: "王2", selected: true }
]
},
{
icon: "../../images/folder.png",
label: "Inbox",
expanded: true,
items: [
{ icon: "../../images/folder.png", label: "李一" },
{ icon: "../../images/folder.png", label: "李二" },
{ icon: "../../images/folder.png", label: "李三" },
{ icon: "../../images/folder.png", label: "Other" },
]
},
{ icon: "../../images/recycle.png", label: "Deleted Items" },
{ icon: "../../images/notesIcon.png", label: "Notes" },
{ iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
{ icon: "../../images/favorites.png", label: "Favorites" },
{ icon: "../../images/recycle.png", label: "Deleted Items" },
{ icon: "../../images/notesIcon.png", label: "Notes" },
{ iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
{ icon: "../../images/favorites.png", label: "Favorites" },
];
// create jqxTree
$('#jqxTree').jqxTree({ source: source, width: '100%', checkboxes: true });
$('#jqxTree').jqxTree('collapseAll');
var c1 = new jqxTreeSearch('jqxTree', 'searchBox',500);
console.log(c1)
$('#searchBox').on('keyup', function() {
var that = $(this);
c1.Search(that.val());
})
$('.wx_jqx_reset').on('click',function(){
$(this).parent().find('#searchBox').val('');
c1.resetItem();
});
});
实际效果图
代码待会另附