现在位置首页 / 项目实战 /正文

ztree+Struts2异步检索数据demo

作者: IT小兵 | 2016年6月27日| 热度:℃ | 评论: |参与:

在文章[ztree教程--zTree实现文本框输入关键词自动匹配下拉效果]中介绍了文本框输入关键字自动匹配的例子,是基于js查询的。

今天分享一个ztree+Struts2异步检索数据demo。

首先效果图:

实现效果:

初始页面 

匹配记录

无记录 

客户端html和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>
<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();
}

更多教程请查看:

http://www.suchso.com/catalog.asp?tags=ztree 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询