Ztree ajax关键字检索动态树

http://blog.youkuaiyun.com/liuyuhua0066/article/details/8949885?reload

实现效果：

初始页面 

匹配记录

无记录 

Js代码：

[javascript] view plain copy

1. <script type="text/javascript">  
2. var quickMsg = "输入关键字按回车键检索";  
3. $(function(){  
4.             $("#quickQuery").focus(  
5.                 function(){  
6.                     if($.trim($("#quickQuery").val()) == quickMsg)  
7.                     {  
8.                         $("#quickQuery").val("");  
9.                     }  
10.             });           
11.     });  
12.   
13. function checkBack (e, treeId, treeNode) {  
14.             var zTree = $.fn.zTree.getZTreeObj("treeForRole");  
15.             nodes = zTree.getCheckedNodes(true);  
16.             id = "";  
17.             name = "";  
18.             nodes.sort(function compare(a,b){return a.id-b.id;});  
19.             for (var i=0, l=nodes.length; i<l; i++)   
20. {  
21.                 id += nodes[i].id + ",";  
22.                 name += nodes[i].name + ",";  
23.             }  
24.             if (name.length > 0 )  
25. {  
26. name = name.substring(0, name.length-1);  
27. }  
28.             if (id.length > 0 )   
29. {  
30. id = id.substring(0, id.length-1);  
31. }  
32.             var selObj = $("#userForRoleSel");  
33.             selObj.attr("value", name);  
34.             $("#selectRole").val(id);  
35.             $("#userForRoleSel").focus();             
36.         }  
37.           
38. //ajax回调 如果无记录则给予提示  
39.     function asyncBack(event, treeId, treeNode, msg) {  
40. var nodes = $.fn.zTree.getZTreeObj("treeForRole").getNodes();  
41.             if(nodes.length==0)  
42.             {  
43. $("#treeForRole").html("<span style='color:#ff0000; margin-left:10px; margin-top:105px;'>未检索到匹配的记录</span>");  
44.             }  
45.         }  
46.       
47.     function showMenu() {  
48.                 $(function(){  
49.                     if($("#quickQuery").val() == "")  
50.                     {  
51.                         $("#quickQuery").val(quickMsg);  
52.                     }  
53.                     document.onkeydown=function(e)  
54.                     {  
55.                         //回车触发ajax查询      
56.                         if((e ? e.which :event.keyCode)==13)  
57.                             {  
58.                                  var setting = {  
59.                                             check: {  
60.                                                 enable: true,  
61.                                                 chkStyle: "checkbox",  
62.                                                 chkboxType: { "Y":"s", "N":"s"  }  
63.                                             },  
64.                                             callback: {  
65.                                                 onCheck: checkBack,  
66.                                                 onAsyncSuccess :asyncBack  
67.                                             },  
68.                                               
69.                                             async: {  
70.                                                 enable: true,  
71.                                                 url:"User_ajaxRoles.action",  
72.                                                 otherParam:{ "nameKey" : $.trim($("#quickQuery").val())},  
73.                                                 dataType: "json",  
74.                                                 dataFilter: null  
75.                                             },  
76.                                             data: {  
77.                                                 simpleData: {  
78.                                                     enable: true  
79.                                                 }  
80.                                             }  
81.                                               
82.                                         };  
83.                                   
84.                                 $.fn.zTree.init($("#treeForRole"), setting);  
85.                             }  
86.                     };  
87.                 });  
88.             var selObj = $("#userForRoleSel");  
89.             var businessOffset = $("#userForRoleSel").offset();  
90.             $("#menuContentForRole").css({left:businessOffset.left + "px", top:businessOffset.top + selObj.outerHeight() + "px"}).slideDown("fast");  
91.             $("body").bind("mousedown", onBodyDown);  
92.         }  
93.   
94. function hideMenu() {  
95.             $("#menuContentForRole").fadeOut("fast");             
96.         }  
97.   
98. function onBodyDown(event) {  
99.             if (!(event.target.id == "menuBtnForRole" || event.target.id == "menuContentForRole" || $(event.target).parents("#menuContentForRole").length>0)) {  
100.                 hideMenu();  
101.             }  
102.         }  
103. </script>  

Html代码：

[html] view plain copy

1. <s:textfield id="userForRoleSel" name="userForRoleSel" readonly="true" size="18" />   
2. <a id="menuBtnForRole" href=" javascript:showMenu();">选择</a>  
3.   
4. <div id="menuContentForRole" class="menuContent"  
5.             style=" border:1px solid #ccc;width:198px;height:160px;overflow:scroll;scroll-y;display:none;position: absolute; background-color:#fcfcfc;">  
6.             <input class="quickText" id="quickQuery" type="text" />   
7.             <ul id="treeForRole" class="ztree"   style="margin-top: 0; width: 140px;">  
8. </ul>  
9. </div>  
10. <s:hidden id="selectRole" name="role.roleId" />  

后台使用Struts2，相关代码如下

Action代码：

[java] view plain copy

1. public String ajaxRoles()   
2.         throws Exception  
3. {  
4.         try  
5.         {  
6.             result = roleService.getAjaxRoles(nameKey);  
7.         }  
8.         catch(Exception e)  
9.         {  
10.             log.error(e.getMessage());  
11.             throw e;  
12.         }  
13.         return "ajaxRoles";  
14. }  

Struts2-User.xml 代码：

[html] view plain copy

1. <package name="rbac_user" namespace="/" extends="json">  
2.     <action name="User_*" class="xx.UserAction" method="{1}">  
3.         <result name="ajaxRoles" type="json">  
4.             <param name="root">result</param>  
5.         </result>  
6.     </action>  
7. </package>  

Service代码：

[java] view plain copy

1. public String getAjaxRoles(String nameKey)  
2. {  
3.         //Dao层是一个简单的根据name查询 不再赘述  
4.         List<Role> results = roleDao.getAjaxRoles(nameKey);  
5.         JSONArray json = new JSONArray();  
6.         for (Role ro : results)  
7.         {  
8.             JSONObject jo = new JSONObject();  
9.             jo.put("id", ro.getRoleId());  
10.             jo.put("name", ro.getName());  
11.             json.add(jo);  
12.         }  
13.         return json.toJSONString();  
14. }