(二 )结构ztree的 ajax交互的简单使用
在第一篇的基础上更改,在实际项目中的使用。
一:HTML 代码:
<SCRIPT type="text/javascript">
var setting = {
async: {
enable: true,
url:"${ctx}/threeLesson/ztreeAjax", //没点击一次节点AJAX 都会与此路径交互一次
autoParam:[ "id", "name" ], //ajax提交的时候,传的是id值
otherParam:{"chk":"chk"},
dataFilter: dataFilter
},
check: {
enable: true,
autoCheckTrigger: true
},
data: {
simpleData: {
enable: true,
idKey : "id", // id编号命名
pIdKey : "pId", // 父id编号命名
rootPId : 0
}
},
callback: {
onCheck: onCheck,
onAsyncSuccess: onAsyncSuccess
}
}; function dataFilter(treeId, parentNode, childNodes) {
if (parentNode.checkedEx === true) {
for(var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].checked = parentNode.checked;
childNodes[i].halfCheck = false;
childNodes[i].checkedEx = true;
}
}
return childNodes;
}
function onCheck(event, treeId, treeNode) {
cancelHalf(treeNode)
treeNode.checkedEx = true;
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
cancelHalf(treeNode);
}
function cancelHalf(treeNode) {
if (treeNode.checkedEx) return;
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
treeNode.halfCheck = false;
zTree.updateNode(treeNode);
}
var zNodes =[
//根节点, ${department.id}。。。等数据是服务器传回来的 isParent:true:是否是父节点,毫无疑问我找个是父节点所以要添加找个参数
{ id:"${department.id}", pId:"${department.parentId}", name:"${department.name}", isParent:true}
]; $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//获取ID值
function onCheck(e,treeId,treeNode){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
nodes=treeObj.getCheckedNodes(true),
v="";
id="";
for(var i=0;i<nodes.length;i++){
v+=nodes[i].name + ",";
id+=nodes[i].id + ",";
}
$("#myid").val(id);
} </SCRIPT> <table>
<tr>
<td width="80px" align="left" valign="top" >发送给谁:</td>
<td><ul id="treeDemo" class="ztree" ></ul></td>
</tr>
</table>
二:action代码:
/**
* 点击树节点请求此接口
* @param id :Department的ID
* @param response
* @param model
* @throws Exception
*/
@RequestMapping(value="/threeLesson/ztreeAjax",method=RequestMethod.POST)
public void ztreeTestpost(String id,HttpServletRequest request,HttpServletResponse response,ModelMap model) throws Exception{
request.setCharacterEncoding("gb2312");
response.setContentType("text/html;charset=utf-8");
//查找组织下的用户
List<User> userList=userService.getUserListByOrganizationId(Long.valueOf(id));
//获取部门
List<Department> departmentList=departmentService.getDepartmentByParentId(Long.valueOf(id)); StringBuffer strbuf=new StringBuffer("[");
if (departmentList.size()>0) {
for (int i = 0; i < departmentList.size(); i++) {
strbuf.append("{\"id\":"+departmentList.get(i).getId()+",\"pId\":"+departmentList.get(i).getParentId()+",\"name\":\"" +departmentList.get(i).getName()+"\",isParent:true},");
}
}
if (userList.size()>0) {
for (int i = 0; i < userList.size(); i++) {
String uid="u"+Long.toString(userList.get(i).getId()); // 加U区分用户ID和组织ID
strbuf.append("{\"id\":\""+uid+"\",\"pId\":"+userList.get(i).getOrganizationId()+",\"name\":\"" +userList.get(i).getName()+"\"},");
}
}
String ss=strbuf.toString();
ss=ss.substring(0, ss.length()-1);
ss=ss+"]";
PrintWriter pw = response.getWriter();
pw.write(ss);
}
(二 )结构ztree的 ajax交互的简单使用的更多相关文章
- 树结构ztree的 ajax交互的简单使用
今天做前端页面要用到树结构,用了第三方插件ztree,搞了好久不过终于弄出来了,, 一点小心得.(用的版本 V3 ) 首先看下载的文件结构: 一:将要用到的CSS 和 JS 拷贝到工程中,我这里在工程 ...
- ajax交互数据简单拼装,数组成字符串
json2Form:function(json) { var str = ""; for(var p in json){ // 判断对象是否为数组 if(typeof json[p ...
- Python搭建Web服务器,与Ajax交互,接收处理Get和Post请求的简易结构
用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...
- 进击的Python【第十二章】:mysql介绍与简单操作,sqlachemy介绍与简单应用
进击的Python[第十二章]:mysql介绍与简单操作,sqlachemy介绍与简单应用 一.数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数 ...
- C#编程利器之二:结构与枚举(Structure and enumeration)【转】
C#编程利器之二:结构与枚举(Structure and enumeration) 在上一篇文章中,介绍了类如何封装程序中的对象.而实际中,出了类可以封装对象外,结构和枚举也可以封装一些对象,本文将着 ...
- struts2 的验证框架validation如何返回json数据 以方便ajax交互
struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror />才能取出,(EL应该也可以). 如果使 ...
- struts2中使用json插件实现ajax交互
json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...
- jq的ajax交互封装
jq封装的ajax,然后 在此前和此后都是很多要考虑的 ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...
- MySQL之单表查询 一 单表查询的语法 二 关键字的执行优先级(重点) 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER BY 八 限制查询的记录数:LIMIT 九 使用正则表达式查询
MySQL之单表查询 阅读目录 一 单表查询的语法 二 关键字的执行优先级(重点) 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER B ...
随机推荐
- SQL单行函数和多行函数
单行函数和多行函数示意图: 单行函数分为五种类型:字符函数.数值函数.日期函数.转换函数.通用函数 单行函数: --大小写控制函数 select lower('Hello World') 转小写, u ...
- Unity Json 之三
今天在网上看到一个simplejson,直接调用这两个API就可以了,简单易用 string jsonstr = SimpleJson.SimpleJson.SerializeObject(json) ...
- Cgroups控制cpu,内存,io示例【转】
本文转载自:https://www.cnblogs.com/yanghuahui/p/3751826.html 百度私有PaaS云就是使用轻量的cgoups做的应用之间的隔离,以下是关于百度架构师许立 ...
- dfs枚举
深度优先搜索(DFS,Depth-First Search)是搜索手段之一.它从某个状态开始,不断的转移状态知道无法转移,然后退回到前一步的状态,继续转移到其他状态,如此不断重复,直到找到最终的解. ...
- 异常:没有找到本地方法库,java.lang.UnsatisfiedLinkError: no trsbean in java.library.path
1.问题描述 迁移环境中遇到这个问题 : Fri Apr 20 15:22:31 CST 2018, Exception:500004___-500004,没有找到本地方法库,java.lang.Un ...
- Vue 什么是组件
Vue.js组件 组件的作用:组件是自定义元素,可扩展html元素,封装可复用的代码. 组件的注册一定要在初始化根实例之前,负责组件是不起作用的. 全局组件在初始化实例的时候被使用 局部组件仅在实例/ ...
- codeforces 705A:Hulk
Description Dr. Bruce Banner hates his enemies (like others don't). As we all know, he can barely ta ...
- 浏览器指纹--纯js拿到浏览器指纹
序言: 前两天有接收到一下问题,如何拿到浏览器指纹中的位置信息和CPU,在这之前完全没有接触过浏览器指纹,抱着学习和好奇的心态,就去网上查了大量的资料.下面我将学习过程和成果贴出来给大家. 步骤 1. ...
- 数据库排序规则的冲突(理解collate Chinese_PRC_CI_AS)
之前碰到了数据库排序规则冲突问题,即百度或者 Google 的老话题: “ 无法解决 equal to 操作中‘ sql_latin1_general_cp1_ci_as ’和‘ chinese_pr ...
- 将命令绑定到事件中(WPF)
绑定到指定名称控件的——>指定属性上 <i:Interaction.Triggers> <i:EventTrigger E ...