今天分享一个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" /> |
|
后台使用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(); } |
|
时间： 2024-10-27 22:29:15