ztree 加搜索框_ztree 模糊搜索带复选框

zTree插件，带复选框，模糊查询，隐藏不符合的节点

对比图

zTree模糊搜索Demo

搜索

var nodeList;

$(function() {

init();

})

function init() {

var zNodes = [ //ztree 测试数据，也可以从数据库拉取

{

name: "根节点-000",

open: true,

children: [{

name: "父节点-123-AB",

open: true,

children: [{

name: "叶子节点-A-1"

},

{

name: "叶子节点-A-2"

},

{

name: "叶子节点-B-1"

},

{

name: "叶子节点-B-2"

}

]

}, {

name: "父节点-2123-CD",

open: true,

children: [{

name: "叶子节点-C-1"

},

{

name: "叶子节点-C-2"

},

{

name: "叶子节点-D-1"

},

{

name: "叶子节点-D-2"

}

]

}, {

name: "父节点-123-AB",

open: true,

children: [{

name: "叶子节点-A-1"

},

{

name: "叶子节点-A-2"

},

{

name: "叶子节点-B-1"

},

{

name: "叶子节点-B-2"

}

]

}, {

name: "父节点-2123-CD",

open: true,

children: [{

name: "叶子节点-C-1"

},

{

name: "叶子节点-C-2"

},

{

name: "叶子节点-D-1"

},

{

name: "叶子节点-D-2"

}

]

}]

}

];

var setting = { //ztree配置选项

check: {

enable: true

},

view: {

dblClickExpand: false, //表示双击节点 切换 / 不切换 展开状态

showLine: true,

// selectedMulti: false,// 支持 / 不支持 同时选中多个节点

nameIsHTML: true, //支持 / 不支持 HTML 脚本

showIcon: false //没有小图标

},

data: {

key: {

name: "name",

title: "name"

}

}

};

zTreeObj = $.fn.zTree.init($("#tree-obj"), setting, zNodes);

$("#search-bt").click(filter);

};

//过滤ztree显示数据

function filter() {

var allNode = zTreeObj.transformToArray(zTreeObj.getNodes());

zTreeObj.hideNodes(allNode);

function filterFunc(node) {

var keywords = $("#keyword").val();

if (node.name.indexOf(keywords) != -1) return true;

return false;

};

var keywords = $("#keyword").val();

if (keywords == "") {

zTreeObj.showNodes(allNode);

// zTreeObj.expandAll(false);

} else {

nodeList = zTreeObj.getNodesByFilter(filterFunc);

for (var n in nodeList) {

if (nodeList.hasOwnProperty(n)) {

findParent(zTreeObj, nodeList[n]);

}

}

zTreeObj.showNodes(nodeList);

}

}

function findParent(treeObj, node) {

treeObj.expandNode(node, true, false, false);

var pNode = node.getParentNode();

if (pNode != null) {

nodeList.push(pNode);

findParent(treeObj, pNode);

}

};