<%@ 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;
}
分享到：
相关推荐
**jQuery zTree 示例详解** jQuery zTree是一款基于jQuery的树形插件，广泛应用于网站的导航、组织结构展示、数据管理等场景。本示例旨在详细介绍如何使用zTree，包括其基本配置、功能实现和常见操作。 ### 一、...
本教程将详细介绍如何使用 ZTree，并通过一个完整的示例来展示其功能。 ### 一、ZTree 基础 1. **安装与引入** 在项目中使用 ZTree，首先需要下载 ZTree 的 CSS 和 JS 文件，然后在 HTML 文档中引入。通常，`...
本示例将深入探讨ZTree的基本使用方法、核心功能以及常见配置。 首先，ZTree的核心在于其XML数据格式，用于定义树节点的结构和属性。在创建ZTree时，你需要准备一个XML文件，其中包含了树的所有节点。例如： ```...
ztree树做的一个小项目，用的mysql数据库，里面有数据库脚本，部署启动就能OK，http://localhost:8080/ztree 访问路径
《深入理解ZTree：基于官网示例的解析与学习》 ZTree，一款优秀的JavaScript树形插件，广泛应用于网页中的目录展示、数据管理、权限控制等场景。它以其丰富的功能、灵活的配置和良好的用户体验，深受开发者的喜爱。...
二、zTree示例解析 zTree提供了多种示例，涵盖了基础功能和高级应用，帮助开发者快速上手和理解其工作原理。以下是一些典型示例： 1. 基本树形展示：展示了zTree最基础的树结构，包括节点的添加、删除和编辑。 2. ...
zTree v3.0 正式版在功能、性能方便比 v2.x 版本都有了很多改善，尤其是性能方面。 但还要再提提醒大家，v3.0 在代码架构上的改动较大，所以升级 v2.x 版本的 zTree 必须要配合修改代码，不能仅仅升级 js 文件。
下载的`ztree_demo.7z`、`ztree.rar`和`ztree_filter.rar`压缩包包含了完整的zTree示例代码，包括HTML、CSS和JavaScript文件。解压后，开发者可以查看`demo.html`中的示例代码，了解如何集成zTree并实现过滤功能。...
这个示例代码包"zTree_v3-master"包含了该插件的完整实例，帮助开发者更好地理解和应用zTree_v3的功能。 zTree_v3的核心特性包括： 1. **数据驱动**：zTree的数据模型基于JSON格式，可以通过JavaScript数组或Ajax...
<title>zTree示例 <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="js/jquery.ztree....
提供的`zTree-zTree_v3-master`文件可能是一个完整的Ztree示例项目，包括了必要的HTML、CSS和JavaScript文件，以及示例数据。通过学习这个项目，你可以快速上手Ztree的使用。而`项目工程`很可能是包含Java后台代码...
主要分为以下几个部分：Ztree的基本介绍、AJAX的基本概念、如何结合Ztree与AJAX进行数据交互、示例代码解析以及可能遇到的问题和解决方案。 ### Ztree简介 Ztree是一款基于jQuery的树插件，它提供了一种高效的方式...
### zTree示例代码 ```html <!DOCTYPE html> <title>zTree示例 <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> <script src="js/jquery-1.4.4.min.js"></script> ...
<title>ZTree 示例 <link rel="stylesheet" href="path/to/ztree.css"> <!-- 如果需要复选框功能 --> <script src="path/to/jquery.min.js"></script> <!-- 先引入jQuery --> <script src="path/to/jquery....
在这个ZTree示例中，可能设计了一个模拟最后通牒游戏的交互界面，让用户能够提出分配提案，并观察对方的反应，从而理解人类决策行为的经济模型。 4. **示例应用**： 这个压缩包的“新建文件夹”可能包含了实现以上...
在"zTree demo"中，你可以找到关于如何使用 zTree 的各种示例和教程，帮助你更好地理解和应用这个插件。 【zTree 主要特性】 1. **灵活性**：zTree 支持静态数据加载和动态数据加载，可以根据需求灵活选择。 2. **...
### 五、zTree 示例应用 例如，我们可以实现一个简单的文件目录树，用户点击节点时弹出提示框显示节点信息： ```javascript var setting = { view: { showLine: true // 显示连线 }, callback: { onClick: ...
在本文中，我们将探讨如何使用jQuery和zTree库来实现一个树形表格的实例。zTree是一个基于jQuery的树插件，它提供了丰富的交互性和可定制性，使得创建树形结构变得简单。以下是对实现过程的详细说明： 首先，我们...
<title>jQuery zTree示例 <link rel="stylesheet" href="zTreeStyle.css" type="text/css"> <script src="jquery-1.12.4.min.js" type="text/javascript"></script> <!-- 需要先引入jQuery --> ...
这个"zTree异步加载简单示例VS2008项目完整源码"是针对开发人员的一个实用资源，提供了如何在Visual Studio 2008环境下实现zTree异步加载功能的具体代码实例。 异步加载（Async Loading）是zTree的核心特性之一，它...