ztree 示例
程序员文章站
2022-06-12 09:16:33
...
<%@ 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;
}
<!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;
}
下一篇： 公鸡为何没鸡鸡