(二 )结构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 ...
随机推荐
- SOA 面向服务架构 阅读笔记(二)
SOA并不能保证企业的员工更加轻松,企业的收益更加客观. 6.软件组件 6.1 组件和组件的作用 通过可重用的软件代码-组件,可以构建灵活的软件. 6.2 软件组件又称为应用程序,程序,函数,模 ...
- CSS3 3D发光切换按钮
在线演示 本地下载
- 各种排序算法-用Python实现
冒泡排序 # 冒泡排序 def bubble_sort(l): length = len(l) # 外层循环 length遍,内层循环少一遍 while length: for j in range( ...
- recovery 差分升级包制作超时【转】
本文转载自:https://blog.csdn.net/csdn66_2016/article/details/73800349 我们在对android系统升级的时候,可以减少升级包的大小,只升级差异 ...
- centos iscsi 配置
首先是服务器的设置:[root@localhost 桌面]# yum install scsi-target-* -y 安装服务 配置yum的方法太简单了,我就不写了[root@local ...
- 【BZOJ2733】永无乡[HNOI2012](splay启发式合并or线段树合并)
题目大意:给你一些点,修改是在在两个点之间连一条无向边,查询时求某个点能走到的点中重要度第k大的点.题目中给定的是每个节点的排名,所以实际上是求第k小:题目求的是编号,不是重要度的排名.我一开始差点被 ...
- 泛型学习第三天——C#读取数据库返回泛型集合 把DataSet类型转换为List<T>泛型集合
定义一个类: public class UserInfo { public System.Guid ID { get; set; } public string LoginName ...
- JavaScript -- 操作input CheckBox 全选框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Linux嵌入式 -- 内核 - 系统调用
1. 系统调用 定义 Linux内核中设置了一组用于实现各种系统功能的子程序,称为系统调用.用户可以通过系统调用命令在自己的应用程序中调用它们. 系统调用和普通的函数调用非常相似,区别仅仅在于,系统调 ...
- cmscp实例笔记
1.迭代循环 [@NodeList;list] [#list list as node] [#if node.name == "产品试用"] [/#if] [#if node.na ...