异步加载 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 加复选框 及相应后台处理的更多相关文章

  1. gridview列前加复选框需要注意的一点

    前言 获取gridview每一列前面的复选框,然后获取选中的这一行的id.aspx页面,我不喜欢用这个,有的公司用自己封装的,基本上都是用封装的,这是我知道的.也有用Repeater的.可能是因为gr ...

  2. 复选框 ajax取得后台页面

    首先判断是否勾选了复选框 $("input[name='product']").click(function () { if($(this).prop("checked& ...

  3. layui表单使用开关滑块和复选框,渲染后台数据方法

    提示:整个表格要在form标签内 定义开关模板 <div class="layui-form" lay-filter="layuiadmin-app-form-li ...

  4. ztree实现复选框单选功能

    /** * ztree的默认配置项 * */ var setting = { view: { selectedMulti: false //按住ctrl是否可以多选 }, check: { enabl ...

  5. JeeSite导出多条数据(加复选框)demo

    表格图: jsp: 后台: @RequiresPermissions("shwindow:advertisementPutInList:view") @RequestMapping ...

  6. 前台checkbox复选框提交到后台处理

    前台 <input type="hidden" id="tempString" name="tempString" /> < ...

  7. ExtJS4.2学习(五)表格渲染与复选框

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...

  8. 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  9. 自定义复选框 checkbox 样式

    默认的复选框样式一般在项目中都很少用 ,看起来也丑丑的.这里提供一个优化样式后的复选框.原理就是隐藏掉默认样式,在用设计好的样式替代 html结构 <div> <input type ...

随机推荐

  1. 从 Aliyun 经典网络迁移到 Aliyun VPC 网络

    由于阿里云策略问题,要求用户从经典网络中全部迁出,搬迁到他们设置的 VPC 网络中.这里的 VPC 大概指的是逻辑上的一个虚拟局域网.即使是实际上你的机器垮机房在阿里云的不同机房.但是他们仍然能从逻辑 ...

  2. Ajax 长轮询

    长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接,客户端处理完响应信息后再向服务器发送新的请求. 优点:在无消息的情况下不会频繁的请求. 缺 ...

  3. oss命令使用

    下载文件夹 ossutil64 cp oss://folder/ out_folder/ -r --jobs 20

  4. Create an Azure SQL database in the Azure portal

    Create a SQL database An Azure SQL database is created with a defined set of compute and storage res ...

  5. BZOJ 1443 游戏(二分图博弈)

    新知识get. 一类博弈问题,基于以下条件: 1.博弈者人数为两人,双方轮流进行决策.2.博弈状态(对应点)可分为两类(状态空间可分为两个集合),对应二分图两边(X集和Y集).任意合法的决策(对应边) ...

  6. 鼠标事件-MouseEvent

    当鼠标进行某种操作时,就会生成一个event对象,该对象记录着鼠标触发事件时的所有属性. 可以通过如下方法在google控制台打印出 MouseEvent 对象. function mouseDown ...

  7. HDU4864 Task(算竞进阶习题)

    贪心 比较巧妙的贪心..先把所有机器和任务按时间是第一关键字,等级为第二关键字排序. 然后用机器去匹配每一个任务. 排序之后,在时间上满足当前任务的机器,必定也在时间上满足后面的机器,所以我们每次把时 ...

  8. 洛谷P1092 虫食算(算竞进阶习题)

    模拟+dfs 这个题就三行,搜索的话我们从右向左,从上到下.. 如果是在1,2行我们就直接枚举0-n所有数,但是到了第三行,最直接的就是填上这一列上前两行的数的和modN,在此基础上判断该填的数有没有 ...

  9. 「AC自动机」学习笔记

    AC自动机(Aho-Corasick Automaton),虽然不能够帮你自动AC,但是真的还是非常神奇的一个数据结构.AC自动机用来处理多模式串匹配问题,可以看做是KMP(单模式串匹配问题)的升级版 ...

  10. Matplotlib学习---用seaborn画联合分布图(joint plot)

    有时我们不仅需要查看单个变量的分布,同时也需要查看变量之间的联系,这时就需要用到联合分布图. 这里利用Jake Vanderplas所著的<Python数据科学手册>一书中的数据,学习画图 ...