Ztree ajax关键字检索动态树

来源：互联网发布：mysql数据库编程编辑：程序博客网时间：2024/04/19 13:40

http://blog.csdn.net/liuyuhua0066/article/details/8949885?reload

实现效果：

初始页面

匹配记录

无记录

Js代码：

[javascript] view plaincopy

<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代码：

[html] view plaincopy

<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代码：

[java] view plaincopy

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

Struts2-User.xml 代码：

[html] view plaincopy

<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代码：

[java] view plaincopy

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