(二 )结构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 ...
随机推荐
- 4950: [Wf2017]Mission Improbable
4950: [Wf2017]Mission Improbable Time Limit: 1 Sec Memory Limit: 512 MBSubmit: 608 Solved: 222[Sub ...
- springcloud一些概念知识
1.Eureka 1)Eureka服务治理体系支持跨平台 2)三个核心概念:服务注册中心.服务提供者以及服务消费者 3)服务续约:注册完服务之后,服务提供者会维护一个心跳来不停的告诉Eureka Se ...
- jsonp 实现跨域例子
直接上代码: js: <html> <head> <title>JSONP</title> </head> <script src = ...
- spark学习1(hadoop集群搭建)
把原先搭建的集群环境给删除了,自己重新搭建了一次,将笔记整理在这里,方便自己以后查看 第一步:安装主节点spark1 第一个节点:centos虚拟机安装,全名spark1,用户名hadoop,密码12 ...
- linux基础(9)-获取时间
获取今天日期 date +%Y-%m-%d date +%y-%m-%d date +%F 获取昨天日期 date -d yesterday +%F date -d -1day +%F ...
- Qt 自定义PushButton
http://blog.csdn.net/zddblog/article/details/11116191 功能:鼠标弹起并在按键区域内时,按键响应.并实现normal.hover.pressed效果 ...
- js职责链模式
职责链模式(Chain of Responsiblity),使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为 ...
- java中i=i++问题分析
http://www.ticmy.com/?p=43 重点:局部变量表 和 操作数栈的执行过程. 使用javac编译后再使用javap -c Test反编译这个类查看它的字节码,如下(只摘取main方 ...
- DOM初体验(绑定事件,监听事件)
JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...
- spring: @Pointcut给重复的注解/切点定义表达式
代码如下: package ch2.test; import org.aspectj.lang.annotation.AfterReturning; import org.aspectj.lang.a ...