JQuery zTree 的使用
当zTree来展示大量数据时，页面容易卡屏，这样的话往往是通过异步来请求数据，zTree异步的使用： 1、定义树 var orgTree; var orgSetting = { check :{ enable: true, chkStyle: "checkbox",//树节点是多选框，可以多选，此处可以有不同的配置，例如单选-radio chkboxType : { "Y" : "s", "N" : "s"}, /** *{ "Y" : "", "N" : "" };被勾选时：不关联父节点和子节点；取消勾选时：不关联父节点和子节点 *{ "Y" : "ps", "N" : "" };被勾选时：关联父节点和子节点；取消勾选时：不关联父节点和子节点 *{ "Y" : "", "N" : "ps" };被勾选时：不关联父节点和子节点；取消勾选时：关联父节点和子节点 *{ "Y" : "ps", "N" : "ps" };被勾选时：关联父节点和子节点；取消勾选时：关联父节点和子节点 * 由此可见可以根据不同的需求，配置不同的值 * */ radioType: "all" }, data: { simpleData: { enable: true } }, view :{ showIcon: true }, callback : { onClick : clickCheck, onAsyncSuccess: onAsyncSuccess }, //此处为一部请求数据的配置 async: { enable: true, autoParam: ["id"],//异步请求时所传递的参数 dataType: "json", type: "post",//此处尽可能的使用posy请求，以便传递更多的参数 contentType: "application/x-www-form-urlencoded", url: "${ctx}/messageNotice/messageNoticeToOrgTree" } }; 2、定义树显示的div <div id="orgContent" class="hide"> <ul id="orgTree" class="ztree"></ul> </div>
3、触发树的弹出 $('#showParentOrg').on('click',function () { var url = "${ctx}/messageNotice/messageNoticeToOrgTree"; $.ajax({ url: url, dataType: "json", data:{"id":$("#currOrgId").val(),"ids":$("#orgIds").val()}, /** * 此处将需要请求的数据的父级节点的编号id和已经选择的节点的编号ids都传递到后台， * 以便下次编辑树的时候可以将被选中的节点回显（此处的回显工作交给了后台） *org.put("checked", "true");//将选中属性加上 *org.put("isParent", true);//将是否父节点的属性加上 */ type:"post", success: function(data){ orgTree = $.fn.zTree.init($("#orgTree"),orgSetting,data); dialog.show(); /** *此处是回显树中被选中节点的第二种方法，是通过前台来设置 */ //checkedOrgTreeNodes($("#orgIds").val()); } }); }); //回显树中被选中节点的第二种方法 function checkedOrgTreeNodes(ids){ if(ids != ""){ var idsArray = ids.split("；"); for(var i=0;i<idsArray.length;i++){ var node = orgTree.getNodesByParam("id", idsArray[i]); if(node[0] != undefined){ node[0].checked = true; orgTree.updateNode(node[0], true); } } } } /** * 此方法主要是用于在异步请求完数据后可以将上次被选中的节点回显到树中 * 因为在异步加载树的时候没有办法将已经选择的节点的编号ids都传递到后台， * 所有除了第一次的异步加载之外其他的异步加载树数据后，都将回显选中的节点的 * 事情都是前台来做 */ function onAsyncSuccess(event, treeId, treeNode, msg) { checkedOrgTreeNodes(orgIds); } 4、java后台经过查询将形成树的json格式的字符串返回到前台 4.1 controller代码 @RequestMapping(value="messageNoticeToOrgTree") @ResponseBody public String messageNoticeToOrgTree(String id,String ids){ return messageNoticeService.messageNoticeToOrgTree(id,ids); } 4.2 serviceImpl代码 [codesyntax lang="java" lines="normal" lines_start="2"]
public String messageNoticeToOrgTree(String id, String ids) {
String parentId="";
if(StringUtils.isNotBlank(id)){
parentId=id;
}else{
parentId=SystemConfig.getProperty("mostOrgParentId");
}
List<Map<String, Object>> orgList = sysOrgDao.findByOrgTree(parentId);
if(null!=orgList&&orgList.size()>0){
if(StringUtils.isNotBlank(ids)){
if(ids.lastIndexOf("；")>-1){
String [] strs=ids.split("；");
for(Map<String,Object> org:orgList){
for(String str:strs){
if(org.get("id").equals(str)){
org.put("checked", "true");
}
}
BigDecimal count=(BigDecimal)sysOrgDao.getCountChildOrg(org.get("id").toString());
if(null!=count){
if(count.intValue()>0){
org.put("isParent", true);
org.put("icon", "/wjjs/portal/static/images/orgParent.gif");
}else{
org.put("icon", "/wjjs/portal/static/images/orgChild.gif");
}
}
}
}else{
for(Map<String, Object> org:orgList){
BigDecimal count=(BigDecimal)sysOrgDao.getCountChildOrg(org.get("id").toString());
if(null!=count){
if(count.intValue()>0){
org.put("isParent", true);
org.put("icon", "/wjjs/portal/static/images/orgParent.gif");
}else{
org.put("icon", "/wjjs/portal/static/images/orgChild.gif");
}
}
if(org.get("id").equals(ids)){
org.put("checked", "true");
}
}
}
}else{
for(Map<String, Object> org:orgList){
BigDecimal count=(BigDecimal)sysOrgDao.getCountChildOrg(org.get("id").toString());
if(null!=count){
if(count.intValue()>0){
org.put("isParent", true);
org.put("icon", "/wjjs/portal/static/images/orgParent.gif");
}else{
org.put("icon", "/wjjs/portal/static/images/orgChild.gif");
}
}
}
}
}
return JSONObject.toJSONString(orgList);
} [/codesyntax]