Ztree ajax關鍵字檢索動態樹

Ztree官網：http://www.ztree.me/v3/main.php#_zTreeInfo

實現效果：

初始頁面 

匹配記錄

無記錄 

Js代碼：

<script type="text/javascript">var quickMsg = "輸入關鍵字按斷行符號鍵檢索";$(function(){$("#quickQuery").focus(function(){if($.trim($("#quickQuery").val()) == quickMsg){$("#quickQuery").val("");}});});function checkBack (e, treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeForRole");nodes = zTree.getCheckedNodes(true);id = "";name = "";nodes.sort(function compare(a,b){return a.id-b.id;});for (var i=0, l=nodes.length; i<l; i++) {    id += nodes[i].id + ",";name += nodes[i].name + ",";}if (name.length > 0 ){name = name.substring(0, name.length-1);}if (id.length > 0 ) {id = id.substring(0, id.length-1);}var selObj = $("#userForRoleSel");selObj.attr("value", name);$("#selectRole").val(id);$("#userForRoleSel").focus();}//ajax回調 如果無記錄則給予提示function asyncBack(event, treeId, treeNode, msg) {var nodes = $.fn.zTree.getZTreeObj("treeForRole").getNodes();if(nodes.length==0){$("#treeForRole").html("<span style='color:#ff0000; margin-left:10px; margin-top:105px;'>未檢索到匹配的記錄</span>");}}function showMenu() {$(function(){if($("#quickQuery").val() == ""){$("#quickQuery").val(quickMsg);}document.onkeydown=function(e){    //斷行符號觸發ajax查詢    if((e ? e.which :event.keyCode)==13)        {         var setting = {            check: {        enable: true,        chkStyle: "checkbox",                chkboxType: { "Y":"s", "N":"s"  }        },        callback: {        onCheck: checkBack,        onAsyncSuccess :asyncBack        },                async: {        enable: true,        url:"User_ajaxRoles.action",        otherParam:{ "nameKey" : $.trim($("#quickQuery").val())},        dataType: "json",        dataFilter: null        },        data: {        simpleData: {        enable: true        }        }                };                $.fn.zTree.init($("#treeForRole"), setting);}};});var selObj = $("#userForRoleSel");var businessOffset = $("#userForRoleSel").offset();$("#menuContentForRole").css({left:businessOffset.left + "px", top:businessOffset.top + selObj.outerHeight() + "px"}).slideDown("fast");$("body").bind("mousedown", onBodyDown);}function hideMenu() {    $("#menuContentForRole").fadeOut("fast");}function onBodyDown(event) {if (!(event.target.id == "menuBtnForRole" || event.target.id == "menuContentForRole" || $(event.target).parents("#menuContentForRole").length>0)) {hideMenu();}}</script>

Html代碼：

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

後台使用Struts2，相關代碼如下

Action代碼：

public String ajaxRoles()         throws Exception{        try        {            result = roleService.getAjaxRoles(nameKey);        }        catch(Exception e)        {            log.error(e.getMessage());            throw e;        }        return "ajaxRoles";}

Struts2-User.xml 代碼：

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

Service代碼：

public String getAjaxRoles(String nameKey){        //Dao層是一個簡單的根據name查詢 不再贅述        List<Role> results = roleDao.getAjaxRoles(nameKey);        JSONArray json = new JSONArray();        for (Role ro : results)        {            JSONObject jo = new JSONObject();            jo.put("id", ro.getRoleId());            jo.put("name", ro.getName());            json.add(jo);        }        return json.toJSONString();}