ztree 示例

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="../baseAdd.jsp"%>
<title>保存角色</title>
<link rel="stylesheet" type="text/css" href="js/zTree/zTreeStyle/zTreeStyle.css">
<script src="js/zTree/jquery.ztree.core-3.5.min.js"></script>
<script src="js/zTree/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript">
var setting = {
check: {
            enable: true,
            chkStyle: "checkbox",
            autoCheckTrigger: true,
            chkboxType :{ "Y" : "ps", "N" : "ps" }
            //Y:勾选（参数：p:影响父节点），N：不勾（参数s：影响子节点）[p 和 s 为参数]
         },
async : {
enable : true, // 设置 zTree是否开启异步加载模式
url : "customerGroup/queryTree", //Ajax 获取数据的 URL 地址
autoParam : [ "id" ],
otherParam: { "groupId":'${groupId}', "queryType":'${queryType}'}
},
data:{ // 必须使用data
simpleData : {
enable : true,
idKey : "id", // id编号命名默认
pIdKey : "pid", // 父id编号命名默认
rootPId : -1 // 用于修正根节点父节点数据，即 pidKey 指定的属性值
}
},
// 回调函数
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
    //判断是否父节点
    if(treeNode.isParent){

   }else{

   }
},
//捕获异步加载出现异常错误的事件回调函数和成功的回调函数
onAsyncError : function (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){
zscf.Tips.show("加载错误：" + XMLHttpRequest);
},
onAsyncSuccess : function(event, treeId, treeNode, msg){

}
}
   };
   // 渲染
   $(document).ready(function() {
$.fn.zTree.init($("#treeDemo"), setting);
$("#btnSave").off("click").on("click", function () {
        save();
    });
   });

       //保存方法
       function save() {
            var listId=[],listName=[];
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            var ckNodes = treeObj.getCheckedNodes(true);
            $(ckNodes).each(function (i, node) {
                if (node.id != 0) {
                //子节点
               if(!node.isParent){
                   listId.push(node.id);
                   listName.push(node.name);
               }
                }
            });
           ajaxSave(listId,listName);
        }

        //ajax 方式提交保存
        function ajaxSave(listIdVal,listNameVal){
          $.ajax({
            url:'customerGroup/saveGroupFun',
      data:{
               "listId":listIdVal,
               "listName":listNameVal,
               "groupId":'${groupId}'
          },
          async: true,
     type:'post',
     cache:false,
     //这种方式比较重要的 traditional:true
     traditional: true,
     success:function(result) {
         if(result.success){
           zscf.Tips.show("保存成功！", function () {
                  window.parent.refrensh(false);
               });
         }else{
            zscf.Tips.show(result.message);
         }
        },
        error : function() {
        zscf.Tips.show("异常！");
        }
          });
       }
</script>
</head>
<body marginheight="0" marginwidth="0" >
   <div class="main_body">
    <div class="opera_item" style="margin-left: 30px;">
       <span class="name" >角色编码：</span><span class="txt">${groupCode}</span>
       <span class="name" >角色名称：</span><span class="txt">${groupName}</span>
    </div>
<div style="margin-left: 20px;">
<ul id="treeDemo" class="ztree"></ul>
</div>
<input type="button" id="btnSave" class="hide" />
</div>
</body>
</html>

后台java 代码:
/**
* 查询功能树
* @param request
* @param response
*/
@RequestMapping("/queryTree")
public void queryTree(HttpServletRequest request,HttpServletResponse response){
try{
String data = "";
String groupIdStr=request.getParameter("groupId");
int groupId=Integer.parseInt(groupIdStr);
String queryTypeStr=request.getParameter("queryType");
int queryType=Integer.parseInt(queryTypeStr);
List<Competence> comList=customerFunService.queryAllProduct();
List<Integer> groupFunIdList=customerGroupService.queryGroupFun(groupId);
StringBuffer json = new StringBuffer("[");
json.append("{id:0,pid:-1,name:\"功能\",isParent:1,open:1},");
//获取所有的父节点
for(Competence com:comList){
json.append("{id:" + com.getDropDownId() + ",");
json.append("pid:0,");
json.append("name:\"" + com.getDropDownName()+ "\",");
json.append("open:1,");
if(groupFunIdList.contains(com.getDropDownId())){
json.append("checked:true,");
}
data = json.substring(0, json.lastIndexOf(",")) + "},";
json = new StringBuffer(data);
}
List<CustomerFun> funList=customerFunService.queryCustomerFunByType(queryType);
int size=funList.size();
for(int i=0;i<size;i++){
CustomerFun fun=(CustomerFun)funList.get(i);
json.append("{id:" + fun.getFunId() + ",");
json.append("pid:" + fun.getModId()+ ",");
json.append("name:\"" + fun.getFunName()+ "\",");
json.append("open:0,");
//这里根据设置的值让checkbox选中
if(groupFunIdList.contains(fun.getFunId())){
json.append("checked:true,");
}
data = json.substring(0, json.lastIndexOf(",")) + "},";
json = new StringBuffer(data);
}
data = json.substring(0, json.length() - 1) + "]";
log.info("数据格式："+data);
response.getWriter().print(data);
response.getWriter().close();
}catch(Exception ce){
ce.printStackTrace();
log.error(" query tree error",ce);
}
    }

/**
* 保存值
* @param request
* @param response
*/
@RequestMapping(value ="/saveGroupFun",produces="application/json;charset=UTF-8")
public @ResponseBody String saveGroupFun(HttpServletRequest request,HttpServletResponse response){
   String content="";
   ResultModel result=new ResultModel();
   Date curDate=new Date();
   try{
   String [] treeId=request.getParameterValues("listId");
   String groupIdStr=request.getParameter("groupId");
   int groupId=Integer.parseInt(groupIdStr);
   customerGroupService.deleteGroupFunByGroupId(groupId);
   for(String funId:treeId){
   CustomerGroupFun groupFun=new CustomerGroupFun();
   groupFun.setFunId(Integer.parseInt(funId));
   groupFun.setGroupId(groupId);
   LoginUser user=(LoginUser)request.getSession().getAttribute(LogConstant.LOGIN_LOGINNAME);
   groupFun.setCreateId(user.getUserId());
   groupFun.setCreateTime(curDate);
   customerGroupService.saveGroupFun(groupFun);
   }
   }catch(Exception ce){
   ce.printStackTrace();
   log.error("save user role error",ce);
   }
   JSONObject jsonData = JSONObject.fromObject(result);
   content=jsonData.toString();
   return content;
}

猜你喜欢