这个其实也不是很困难的事情,因为今天无意中用到发现此bug,看网络上没有这个bug的说明和解决办法,记一下给有需要的人。
问题场景重现:
拿网上的demo为例:
看一下这个树形select框,并且是在下拉选可以模糊查询的情况下如下图:
我们看到下拉中有一个元素叫添加用户,那我们查询“加”如果按预期我们会找到这个元素的。
但事实是我们输入完并未找到这个元素,如下图:
先说一下解决办法吧,修改一下treeSelect.js的代码:
checkNodes: function (nodes) {
for (var i = 0; i < nodes.length; i++) {
var o = nodes[i],
pid = o.parentTId,
tid = o.tId;
if (pid !== null){
// 获取父节点
$('#' + pid).addClass(TREE_SELECT_SEARCHED_CLASS);
var pNode = TREE_OBJ.getNodesByParam("tId", pid, null);
TREE_OBJ.expandNode(pNode[0], true, false, true);
}
$('#' + tid).addClass(TREE_SELECT_SEARCHED_CLASS);
}
},
改成
checkNodes: function (nodes) {
for (var i = 0; i < nodes.length; i++) {
var o = nodes[i],
pid = o.parentTId,
tid = o.tId;
a.addPnodesClass(o);
$('#' + tid).addClass(TREE_SELECT_SEARCHED_CLASS);
}
},
addPnodesClass: function (node) {
var pid = node.parentTId;
if (pid !== null){
// 获取父节点
$('#' + pid).addClass(TREE_SELECT_SEARCHED_CLASS);
var pNode = TREE_OBJ.getNodesByParam("tId", pid, null);
TREE_OBJ.expandNode(pNode[0], true, false, true);
a.addPnodesClass(pNode[0]);
}
},
其实改的也很简单,为什么到底第三层就找到了呢,因为当时这边写的有问题,它只给上一级的父节点展开,其余的节点都隐藏了。哈哈哈哈,那我上上级节点隐藏了,自然导致搜索不到结果了。所以这里不应该是找一次父节点,而应该是递归找父节点显示出来。小问题搞定,测试结果如下: