异步ztree 加复选框 及相应后台处理
异步加载 tree，点一下节点，就发一下请求到后台，然后显示出得到的当前层级节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.js" ></script>
<body>
<ul id="myTree"></ul> ///定义ztree要显示的容器标签 </body>
<script>
var myTreeNodes = []; //定义接收返回集合的容器，为了在后面init真正初始化树时，作为最后一个参数用
var IDMark_A = "_a"; //定义个变量，其实就是为了后面匹配tree自动生成的a标签（在这里做下说明而已，不定义直接在下面拼也行吧）
var mySetting = {
view:{
addDivDom: myyAddDivDom //自定义控件，这里是加入了复选框
},
data:{
key:title:"name", //设置title提示信息对应的属性名称 也就是节点相关的某个属性
children:"childNodes"
},
async:{
enable:true, //是否开启异步加载模式
type:'post',
url: myGetUrl,//得到请求路径的方法
dataFilter: myFilter //对于请求回来的数据进行预处理的方法
}
} //加入自定义的显示控件 （这里是文本框）
function myAddDivDom(tree,treeNode){
var aObj = $("#"+treeNode.tId+IDMark_A);///这个就是个选择器，选的是原节点所在的a标签（这是tree自己生成的a标签）
if(treeNode.myCheck=="1"){///这个是可以自己加判断，让指定的对象前加上复选框
var editStr = "<input type='checkbox' value='"+treeNode.id+"'onfocus='this.blur();'></input>";
aObj.before(editStr); ///before是jq的方法，意思是在调用者标签的签名加入参数（参数也可以是标签，和html()方法的参数是一样的）
}
} //得到请求路径
function myGetUrl(treeId,treeNode){
var firstId = "";//第一个节点对象的id
var url = "";
if(treeNode==null){ //第一次，加载树时发的请求
url = path+"xxx/loadNextTreeNodes.do?id="+firstId+"&otherParam"+otherParam;
}else{//树加载完成后，点击某个（有子节点的）节点后发出的请求
url = path + "xxx/loadNextTreeNodes.do?id="+treeNode.id+"&otherParam"+otherParam;
}
return url;
} //对返回的数据进行预处理
function myFilter(treeId,parentNode,childNodes){
for (var i=0,i<childNodes.length;i++) {
/*
下面等号左边的 childNodes[i] 的属性都是在 tree中要显示的每个节点的属性，
而右边的childNodes[i]的属性则表示从后台得到的对象集合中每个对象的真实属性
*/
childNodes[i].code=xxxx;
childNodes[i].open=true;
childNodes[i].name = childNodes[i].xxxName;
childNodes[i].xxx = childNodes[i].xxxxx; if(childNodes[i].hasChild==1){
childNodes[i].isParent = true;///要显示成树，集合中的数据必须要有个boolean类型的 isParent属性
//可以在后台对象属性上直接加上，也可以在预处理这里的js中根据条件加上这个属性
}
}
return childNodes;
} ///上面这些都是为了生成树的准备信息，下面这句才是真正生成树的代码(当然这句可以放在任意位置，比如最上面也可以)
$.fn.zTree.init($("#myTree"),mySetting,myTreeNodes);//参数1：容器对象 2：tree的setting设置 3：接收后台返回值的数组
/*
执行这句的时候，会自动 先执行 myGetUrl 方法，得到 url，然后自动发送这个url到后台请求数据（就和ajax一样，其实这句话里面就是发了一个ajax请求），
然后请求回来的 数据会自动先传入myFilter方法的childNodes参数中，并执行myFilter方法，
然后在加载tree的同时自动调用myAddDivDom方法，在对应的节点前拼好checkbox复选框，并显示在页面上。
*/ </script> <script>
//下面这些都是java代码
@ResponseBody
@RequestMapping("loadNextTreeNodes")
public void loadNextTreeNodes(){
List list=[];//假设后台有一个要展示为 tree的list集合
for(item:list){
item.setHasChild("0");
if(xxx){
item.setHasChild("1");
}
}
writeJson(list);//把list转成json写到前台
} //下面这个就是封装了个写json到前台的方法，供参考
public void writeJson(Object obj){
PrintWriter out = null;
try{
response.setContentType("");
response.setHeader("");
response.setHeader("");
out = response.getWriter();
out.print(new Gson().toJson(obj));
}catch(Exception e){ }finally{
try{
FileUtil.flushAndCloseWrite(out);//关闭流
}catch(e){
}
}
} </script>
</html>
异步ztree 加复选框 及相应后台处理的更多相关文章
- gridview列前加复选框需要注意的一点
前言 获取gridview每一列前面的复选框,然后获取选中的这一行的id.aspx页面,我不喜欢用这个,有的公司用自己封装的,基本上都是用封装的,这是我知道的.也有用Repeater的.可能是因为gr ...
- 复选框 ajax取得后台页面
首先判断是否勾选了复选框 $("input[name='product']").click(function () { if($(this).prop("checked& ...
- layui表单使用开关滑块和复选框，渲染后台数据方法
提示:整个表格要在form标签内 定义开关模板 <div class="layui-form" lay-filter="layuiadmin-app-form-li ...
- ztree实现复选框单选功能
/** * ztree的默认配置项 * */ var setting = { view: { selectedMulti: false //按住ctrl是否可以多选 }, check: { enabl ...
- JeeSite导出多条数据（加复选框）demo
表格图: jsp: 后台: @RequiresPermissions("shwindow:advertisementPutInList:view") @RequestMapping ...
- 前台checkbox复选框提交到后台处理
前台 <input type="hidden" id="tempString" name="tempString" /> < ...
- ExtJS4.2学习(五)表格渲染与复选框
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...
- 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
- 自定义复选框 checkbox 样式
默认的复选框样式一般在项目中都很少用 ,看起来也丑丑的.这里提供一个优化样式后的复选框.原理就是隐藏掉默认样式,在用设计好的样式替代 html结构 <div> <input type ...
随机推荐
- Partition算法以及其应用详解上(Golang实现)
最近像在看闲书一样在看一本<啊哈!算法> 当时在amazon上面闲逛挑书,看到巨多人推荐这本算法书,说深入浅出简单易懂便买来阅读.实际上作者描述算法的能力的确令人佩服.就当复习常用算法吧. ...
- python学习笔记(1)--python特点
python诞生于复杂的信息系统时代,是计算机时代演进的一种选择. python的特点,通用语言,脚本语言,跨平台语言.这门语言可以用于普适的计算,不局限于某一类应用,通用性是它的最大特点.pytho ...
- 使用mysqlbinlog恢复数据
前提:mysql数据库开启了binlog日志,并且有对应的日志文件 起因:今天由于同事对数据库的误操作不小心删除了一条数据 方法一:通过binlog日志文件恢复数据 通过mysqlbinlog恢复My ...
- comparable和comparator
Comparable Comparable可以认为是一个内部比较器,实现了Comparable接口的类有一个特点,就是这些类是可以和自己比较的,在compareTo方法中指定具体的比较方法. comp ...
- 八、.net core 通过数据库配置文件连接操作数据库
一.创建DotNetCore项目 直接创建core项目并不勾选docker支持 二.nuget进行连接MySQL程序集的下载安装 1.MySql.Data.EntityFrameworkCore方式 ...
- Vuex的API文档
前面的话 本文将详细介绍Vuex的API文档 概述 import Vuex from 'vuex' const store = new Vuex.Store({ ...options }) [构造器选 ...
- nargin
nargin 编辑 nargin为“number of input arguments”的缩写. 在matlab中定义一个函数时, 在函数体内部, nargin是用来判断输入变量个数的函数.在matl ...
- iOS 通知推送APNS
结合网上各个资料,再简单整理的一份. 一.APNS推送说明 1.你的IOS应用需要去注册APNS消息推送功能. 2.当苹果APNS推送服收到来自你应用的注册消息就会返回一串device token给你 ...
- P1319 压缩技术
很多小伙伴卡在此题的原因可能是因为不知道怎么让它输入无限个数字吧?除了用string,在这里我是看到“压缩码保证 N * N=交替的各位数之和”这一句话,想到用while循环.只要输入的数的总和t小于 ...
- 使用npm安装appium时的坑
使用命令安装appium 命令安装 npm install -g appium(如果安装失败那么就指定国内的淘宝源安装吧,官方源我应该试了n次费了很大劲才安装成功) 指定淘宝源安装:设置 npm 淘宝 ...