ztree 进行组织机构名称搜索,将搜索结果以树形展示
时间: 2024-02-11 17:04:55 浏览: 98
要在 zTree 中进行组织机构名称搜索,并将搜索结果以树形展示,可以按照以下步骤进行:
1. 首先,需要在每个节点上添加一个标记,用于存储该节点的组织机构名称。可以在 zTree 的数据源中添加一个 `name` 属性,用于存储组织机构名称。
2. 在页面中添加一个搜索框,用于接收用户输入的搜索关键字。
3. 在搜索框的 `keyup` 事件中,调用 zTree 的 `getNodesByParamFuzzy` 方法进行模糊搜索。该方法的参数包括要搜索的字段名(即上面添加的 `name` 属性)、要搜索的文本、要搜索的父节点对象等等。得到搜索结果后,可以将搜索结果渲染成一个新的 zTree 组件,然后将该组件展示在页面上。
下面是一个示例代码:
```html
<div>
<input type="text" id="searchInput" placeholder="请输入组织机构名称进行搜索">
</div>
<div id="treeContainer"></div>
```
```javascript
// zTree 数据源
var zTreeData = [
{
id: 1,
name: "总公司",
children: [
{ id: 11, name: "技术部" },
{ id: 12, name: "市场部" },
{ id: 13, name: "财务部" }
]
},
{
id: 2,
name: "分公司1",
children: [
{ id: 21, name: "技术部" },
{ id: 22, name: "市场部" },
{ id: 23, name: "财务部" }
]
},
{
id: 3,
name: "分公司2",
children: [
{ id: 31, name: "技术部" },
{ id: 32, name: "市场部" },
{ id: 33, name: "财务部" }
]
}
];
// 初始化 zTree
var zTreeObj = $.fn.zTree.init($("#treeContainer"), {
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: null
}
}
}, zTreeData);
// 监听搜索框键盘事件
$("#searchInput").on("keyup", function() {
var inputValue = $(this).val().trim();
if (inputValue === "") {
// 搜索框内容为空,重置 zTree
zTreeObj.destroy();
zTreeObj = $.fn.zTree.init($("#treeContainer"), {
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: null
}
}
}, zTreeData);
} else {
// 搜索框内容不为空,进行搜索
var searchResult = zTreeObj.getNodesByParamFuzzy("name", inputValue, null);
if (searchResult.length > 0) {
// 渲染搜索结果
var searchTreeObj = $.fn.zTree.init($("#treeContainer"), {
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
idKey: "id",
pIdKey: "parentId",
rootPId: null
}
}
}, searchResult);
// 展开所有节点
searchTreeObj.expandAll(true);
} else {
// 没有搜索结果
alert("未找到匹配的组织机构名称!");
}
}
});
```
在搜索框中输入关键字后,页面会根据搜索结果自动展示相应的树形结构。如果搜索框内容为空,页面会重置为最初的树形结构。
阅读全文
相关推荐










