Ztree ajax关键字检索动态树

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

实现效果：

初始页面

匹配记录

无记录

Js代码：

[javascript] view plain copy

<scripttype="text/javascript">
varquickMsg="输入关键字按回车键检索";
$(function(){
$("#quickQuery").focus(
function(){
if($.trim($("#quickQuery").val())==quickMsg)
{
$("#quickQuery").val("");
}
});
});
functioncheckBack(e,treeId,treeNode){
varzTree=$.fn.zTree.getZTreeObj("treeForRole");
nodes=zTree.getCheckedNodes(true);
id="";
name="";
nodes.sort(functioncompare(a,b){returna.id-b.id;});
for(vari=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);
}
varselObj=$("#userForRoleSel");
selObj.attr("value",name);
$("#selectRole").val(id);
$("#userForRoleSel").focus();
}
//ajax回调如果无记录则给予提示
functionasyncBack(event,treeNode,msg){
varnodes=$.fn.zTree.getZTreeObj("treeForRole").getNodes();
if(nodes.length==0)
{
$("#treeForRole").html("<spanstyle='color:#ff0000;margin-left:10px;margin-top:105px;'>未检索到匹配的记录</span>");
}
}
functionshowMenu(){
$(function(){
if($("#quickQuery").val()=="")
{
$("#quickQuery").val(quickMsg);
}
document.onkeydown=function(e)
{
//回车触发ajax查询
if((e?e.which:event.keyCode)==13)
{
varsetting={
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);
}
};
});
varselObj=$("#userForRoleSel");
varbusinessOffset=$("#userForRoleSel").offset();
$("#menuContentForRole").css({left:businessOffset.left+"px",top:businessOffset.top+selObj.outerHeight()+"px"}).slideDown("fast");
$("body").bind("mousedown",onBodyDown);
}
functionhideMenu(){
$("#menuContentForRole").fadeOut("fast");
}
functiononBodyDown(event){
if(!(event.target.id=="menuBtnForRole"||event.target.id=="menuContentForRole"||$(event.target).parents("#menuContentForRole").length>0)){
hideMenu();
}
}
</script>

HTML代码：

[html] view plain copy

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

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

Action代码：

[java] view plain copy

publicStringajaxRoles()
throwsException
{
try
{
result=roleService.getAjaxRoles(nameKey);
}
catch(Exceptione)
{
log.error(e.getMessage());
throwe;
}
return"ajaxRoles";
}

Struts2-User.xml 代码：

[html] view plain copy

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

Service代码：

[java] view plain copy

publicStringgetAjaxRoles(StringnameKey)
{
//Dao层是一个简单的根据name查询不再赘述
List<Role>results=roleDao.getAjaxRoles(nameKey);
JSONArrayjson=newJSONArray();
for(Rolero:results)
{
JSONObjectjo=newJSONObject();
jo.put("id",ro.getRoleId());
jo.put("name",ro.getName());
json.add(jo);
}
returnjson.toJSONString();
}

原文链接：https://www.f2er.com/ajax/166134.html

Ztree ajax关键字检索动态树

猜你在找的Ajax相关文章