首页 > 代码库 > Easyui中tree组件实现搜索定位功能及展开节点定位
Easyui中tree组件实现搜索定位功能及展开节点定位
这几天遇到个input + tree 实现搜索功能的需求，在这里贴出来供大家参考下，如果你有更好的实现效果希望不腻赐教！
首先给大家看看效果 小二 上图 ：
需要的部件知识： easyui API
方法：
select target 选择一个节点，‘target‘参数表示节点的DOM对象。
expand target 展开一个节点，‘target‘参数表示节点的DOM对象。在节点关闭或没有子节点的时候，节点ID的值(名为‘id‘的参数)将会发送给服务器请求子节点的数据。
在遇到这个问题的时候，不知道如何下手 ，于是查找相关的资料 找到了 ， 不过跟我的又不相同
http://blog.csdn.net/huyongl1989/article/details/9450753
下面我就说说我的思路吧 ：
1.在系统启动时，会默认加载若干个树节点数据(因为我的树的数据量比较大，所以不是一次性把数据全部加载完，而是用户点击展开某个节点时，
再去数据库加载相应节点的数据，如果是数据量比较小的话， 可以将所有节点一次性加载完成，在这个的基础上做搜索定位会简单很多）
2.当用户输入某个要定位节点的名称之后，我会去数据库中进行模糊匹配，找出该名称的节点可能为哪些个。如果只匹配到一个则直接定位，
如果匹配了多个，则将这些节点的详细信息展示出来，让用户自己选择去定位具体的哪一个节点。
3.当用户选择定位某个节点后，再去数据库中查找相关的节点信息。
4.在查询出这些数据之后，我会将树的原来的数据源给替换成要定位的数据也是数据data
5.在对树的数据源进行更新处理之后，只需要将指定的节点展开，然后将定位设置为选中状态并让其处于当前窗口的视野范围内就达到了搜索定位的效果。
当用户单击查询按钮时，把输入框的值传入到控制器，让后台处理得到 输入值的父节点(也许父节点任有父节点，所以要把全部的上级都给查出来)
然后根据最高级节点依次展开，这样就实现了我的搜索功能！
下面废话不多说直接 上代码 ：
function cityTree1JudicialdoSearch() { $("#cityTree1").tree(‘collapseAll‘); var root = $("#cityTree1").tree("find", "43"); $("#cityTree1").tree("expand", root.target); $.ajax({ type: "post", url: "/JudicialHelp/getAddressIdByName", data: { AddressName: $("#cityTree1_bt_information").val() }, anysc: true, success: function (data) { data = http://www.mamicode.com/$.parseJSON(data);"4") { var rootNode = $("#cityTree1").tree("find", data[i].sf_upbm); //获取当前节点的父节点 var rootNode1 = $("#cityTree1").tree("getParent", rootNode.target); //获取当前节点的父节点的父节点 $("#cityTree1").tree("expand", rootNode1.target); $("#cityTree1").tree("expand", rootNode.target); var childeNode = $("#cityTree1").tree("find", data[i].sf_dm); //获取当前节点 $("#cityTree1").tree("select", childeNode.target); //定位当前节点 } else if (data[i].area_lv == "3") { var rootNode = $("#cityTree1").tree("find", data[i].sf_upbm); //获取当前节点的父节点 $("#cityTree1").tree("expand", rootNode.target); var childeNode = $("#cityTree1").tree("find", data[i].sf_dm); //获取当前节点 $("#cityTree1").tree("select", childeNode.target); //定位当前节点 } else if (data[i].area_lv == "2") { var Node = $("#cityTree1").tree("find", data[i].sf_dm); //获取当前节点 $("#cityTree1").tree("expand", Node.target); $("#cityTree1").tree("select", Node.target); //定位当前节点 } } } }); }
本篇为原创： 转载请注明出处 www.cnblogs.com/izhiniao 谢谢！
Easyui中tree组件实现搜索定位功能及展开节点定位