在第一篇的基础上更改,在实际项目中的使用。

一: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交互的简单使用的更多相关文章

  1. 树结构ztree的 ajax交互的简单使用

    今天做前端页面要用到树结构,用了第三方插件ztree,搞了好久不过终于弄出来了,, 一点小心得.(用的版本 V3 ) 首先看下载的文件结构: 一:将要用到的CSS 和 JS 拷贝到工程中,我这里在工程 ...

  2. ajax交互数据简单拼装,数组成字符串

    json2Form:function(json) { var str = ""; for(var p in json){ // 判断对象是否为数组 if(typeof json[p ...

  3. Python搭建Web服务器,与Ajax交互,接收处理Get和Post请求的简易结构

    用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...

  4. 进击的Python【第十二章】:mysql介绍与简单操作,sqlachemy介绍与简单应用

    进击的Python[第十二章]:mysql介绍与简单操作,sqlachemy介绍与简单应用 一.数据库介绍 什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数 ...

  5. C#编程利器之二:结构与枚举(Structure and enumeration)【转】

    C#编程利器之二:结构与枚举(Structure and enumeration) 在上一篇文章中,介绍了类如何封装程序中的对象.而实际中,出了类可以封装对象外,结构和枚举也可以封装一些对象,本文将着 ...

  6. struts2 的验证框架validation如何返回json数据 以方便ajax交互

    struts2 的验证框架validation简单,好用,但是input只能输出到jsp页面通过struts2的标签<s:fielderror  />才能取出,(EL应该也可以). 如果使 ...

  7. struts2中使用json插件实现ajax交互

    json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...

  8. jq的ajax交互封装

    jq封装的ajax,然后 在此前和此后都是很多要考虑的  ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...

  9. MySQL之单表查询 一 单表查询的语法 二 关键字的执行优先级(重点) 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER BY 八 限制查询的记录数:LIMIT 九 使用正则表达式查询

    MySQL之单表查询 阅读目录 一 单表查询的语法 二 关键字的执行优先级(重点) 三 简单查询 四 WHERE约束 五 分组查询:GROUP BY 六 HAVING过滤 七 查询排序:ORDER B ...

随机推荐

  1. 默认连接电脑的模式为MTP【转】

    本文转载自:https://blog.csdn.net/tangzhihai0421/article/details/53487208 Android L后默认的usb连接模式为“仅充电”,而且不会随 ...

  2. Java 访问修饰符总结

    Java中的访问修饰符 Java面向对象的基本思想之一是封装细节并且公开接口. Java语言采用访问控制修饰符来封装类及类的方法和属性的访问权限,从而向使用者暴露接口.隐藏细节. Java访问控制分为 ...

  3. mybatis 一对多和多对一

      在学习MyBatis3的过程中,文档上面一直在强调一个id的东西!在做这个实验的时候,也因为没有理解清楚id含义而导致一对多的“多”中也只有一条数据.id和result的唯一不同是id表示的结果将 ...

  4. 手写RateLimiter

    自定义注解 封装 如果需要让接口实现限流RateLimiter使用 网关:一般拦截所有的接口 实现限流 秒杀 抢购 或者大流量的接口才会实现限流.灵活 不是所有接口都需要限流  秒杀等接口需要限流 设 ...

  5. 【atcoder】All Your Paths are Different Lengths[arc102D](乱搞)

    题目传送门:https://arc102.contest.atcoder.jp/tasks/arc102_b 这道题有点毒瘤啊,罚时上天.. 显然若$ l=2^n $那么就可以直接二进制拆分,但是如果 ...

  6. 针对oracle集群的连接配置

    Java连接oracle数据库集群的配置:<DB NAME="WFS" DRIVER="oracle.jdbc.driver.OracleDriver" ...

  7. json数据与Gson工具类的使用

    JS中使用JSON JSON对象 --> JSON字符串:JSON.stringify(对象) JSON字符串 --> JSON对象:JSON.parse(JSON字符串) <scr ...

  8. javascript测试框架mocha

    node测试框架mocha 简单.灵活.有趣,mocha是一个功能丰富的javascript测试框架,运行在node和浏览器中,使异步测试变得更加简单有趣.http://mochajs.org/ 安装 ...

  9. poj 2395 bfs/记录路径

    http://poj.org/problem?id=2935 Basic Wall Maze Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  10. Linux_总结_02_最小化安装后需要安装和更新的命令

    一.前言 二.安装命令 1.配置yum源 2.更新yum sudo yum -y update 3.安装ifconfig 最小化安装后,是无法使用ifconfig命令的. 可参见:CentOS7下解决 ...