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,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();
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!