zTree树型组件(expandNode) 根据输入的关键字模糊查询并定位标红显示并且只展开匹配到的子节点的所有父节点
来源:互联网 发布:linux 策略路由 编辑:程序博客网 时间:2024/05/17 10:25
在网上找了下都是些简单就过的,根本找不到问题的解决方案,于是自己 结合zTree的官方API提供的方法来实现 代码如下
绑定树型数据:
function InspectionTemplateInitLeftTree(tree, table) {
var item_name = $("#ItemName_@(Perfix)").val();
$.get("@Url.Action("GetAllTreeJson", new { area = "IQC", controller = "InspectionTemplate" })", { itemname: item_name, rand: Math.random() }, function (data) {
if (data != null) {
var setting = {
data: {
simpleData: {
enable: true
}
},
view: {
fontCss: getFontCss
}
};
$.fn.zTree.init($("#" + tree), setting, data);
}
});
}
具体实现方法函数:
var lastValue = "", nodeList = [], allParentIds = [], fontCss = {};
//去除重复ID的方法
function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}
//定位方法
function searchNode(e) {
var zTree = $.fn.zTree.getZTreeObj("@(Perfix)treeLeft");
//debugger;
var value = $.trim($("#ItemName_@(Perfix)").get(0).value);
if (lastValue === value) return;
lastValue = value;
if (value == "") {
updateNodes(false);
lastValue = "";
zTree.expandAll(false);
return;
}
updateNodes(false);//每次进来都把上一次的状态还原
allParentIds = [];
var isLastLev = false;
nodeList = zTree.getNodesByParamFuzzy("name", value);
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].pId != null && parseInt(nodeList[i].lev) == 3) {
isLastLev = true;//判断检索出来的数据是不是最末级数据如果查询出的都是末级则找出其父父级ID
}
}
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].isParent) {
if (nodeList[i].pId == null) {
allParentIds.push(nodeList[i].id);
}
else {
allParentIds.push(nodeList[i].pId);
allParentIds.push(nodeList[i].id);
}
}
else {
if (isLastLev)//如果查询出的都是末级则找出其父父级ID
{
var ParNode = zTree.getNodeByParam("id", nodeList[i].pId == null ? nodeList[i].id : nodeList[i].pId, null);
if (ParNode.pId == null) {
allParentIds.push(ParNode.id);
}
else {
allParentIds.push(ParNode.pId);
}
}
allParentIds.push(nodeList[i].pId == null ? nodeList[i].id : nodeList[i].pId);
allParentIds.push(nodeList[i].id);
}
}
allParentIds = unique(allParentIds);
updateNodes(true);
}
function updateNodes(highlight) {
var zTree = $.fn.zTree.getZTreeObj("@(Perfix)treeLeft");
for (var i = 0; i < allParentIds.length; i++) {
var node = zTree.getNodeByParam("id", allParentIds[i], null);
if (node) {
if (node.name.indexOf($.trim($("#ItemName_@(Perfix)").val())) != -1 || highlight == false) {
node.highlight = highlight;
}
zTree.updateNode(node);
zTree.expandNode(node, parseInt(node.lev) == 3 ? false : highlight, false, i == 0 ? true : false, false);//这里用三目运算符来判断只定位第一个找到的元素(即光标定位在第一个元素上效率可以提高数倍)
}
}
}
//定义字体样式
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? { color: "#A60000", "font-weight": "bold" } : { color: "#333", "font-weight": "normal" };
}
下面是效果图:
- zTree树型组件(expandNode) 根据输入的关键字模糊查询并定位标红显示并且只展开匹配到的子节点的所有父节点
- ztree模糊查询,只保留查询到的节点
- Ztree 展开某节点下的所有的子节点
- 【ztree系列】树节点的模糊查询
- ztree递归查询某节点下的所有子节点
- SQL 递归查询(根据指定的节点向上获取所有父节点,向下获取所有子节点)
- Mysql中的递归层次查询(根据父节点查找所有的子节点和根据子节点查询所有的父节点)的两种运用
- Ztree树节点的层级展开
- zTree异步展开父节点并选中指定子节点
- (转)EasyUI组件tree只展开根节点下的一级子节点或二级子节点
- T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
- T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
- T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
- T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
- T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
- ztree 模糊搜索 子节点没有符合的时候同时隐藏父节点
- CTreeCtrl展开、收起子节点下所有的节点
- CTreeCtrl展开、收起子节点下所有的节点
- C++ Builder 将数据库数据导出到Excel中总结3
- 【C++实现python字符串函数库】二:字符串匹配函数startswith与endswith
- 工厂方法模式与抽象工厂模式
- Material Design for Developers(二)开始
- 【C++实现python字符串函数库】strip、lstrip、rstrip方法
- zTree树型组件(expandNode) 根据输入的关键字模糊查询并定位标红显示并且只展开匹配到的子节点的所有父节点
- C++11特性:auto关键字
- UIView头文件学习
- C++11特性:decltype关键字
- QT信号槽机制
- 非常规手法求1+2+…+n的值。
- public,protect,private,
- C++ 自由存储区是否等价于堆?
- git pull/push时候总提示输入账号密码 - 免除设置