树结构ztree的 ajax交互的简单使用
今天做前端页面要用到树结构，用了第三方插件ztree，搞了好久不过终于弄出来了，， 一点小心得。（用的版本 V3 ）
首先看下载的文件结构：
一：将要用到的CSS 和 JS 拷贝到工程中，我这里在工程中建一个文件夹ztreeStyle专门放ztree插件所需要的文件，里面可能有些文件用不上吧，但是我也不去深究了 刚接触 以后有时间在慢慢细化吧！
二：下面是action代码了，，非常之简单一目了然。
//此方法是当第一次进页面的时候为父节点赋值， 为了测试里面写的都是些死数据，
@RequestMapping(value="/ztree/ztreeTestget",method=RequestMethod.GET)
public String ztreeTestget(HttpServletResponse response,HttpServletRequest request,ModelMap model) throws Exception{
System.out.println("进来了进来了进来了进来了进来了进来了进来了进来了进来了进来了进来了");
List<PartyCategory > li=new ArrayList<PartyCategory>();
PartyCategory pp=new PartyCategory();
pp.setId(1); //id
pp.setParentId(0); //父ID
pp.setName("哈哈"); PartyCategory ppp=new PartyCategory();
ppp.setId(2);
ppp.setParentId(0);
ppp.setName("呵呵"); PartyCategory pppp=new PartyCategory();
pppp.setId(3);
pppp.setParentId(0);
pppp.setName("嘿嘿"); li.add(pp);
li.add(ppp);
li.add(pppp);
model.addAttribute("li", li); return "ZtreeTest";
} //次方法当点根节点的时候进去然后返回子节点数据 ， 为了测试ajax输出返回的是手写的死数据
@RequestMapping(value="/ztree/ztreeTest",method=RequestMethod.POST)
public void ztreeTest(String id,HttpServletResponse response,HttpServletRequest request) throws Exception{
request.setCharacterEncoding("gb2312");
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.write("[{\"id\":4,\"pId\":0,\"name\":\"" +11111+"\"},{\"id\":5,\"pId\":0,\"name\":\"" +22222+"\"}]");
}
三：下面是jsp，基本上自己没写什么就是从下载的插件里有demo页面代码拷贝过来就基本OK了 就是稍微的改动一些代码，自己加了少许的代码，，
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'addPost.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="description" content="This is my page">
</head>
<script type="text/javascript" src="${ctx }/res/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="${ctx }/res/ztreeStyle/css/demo.css" type="text/css">
<link rel="stylesheet" href="${ctx }/res/ztreeStyle/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery.ztree.excheck-3.5.js"></script> <SCRIPT type="text/javascript"> var setting = {
async: {
enable: true,
url:"${ctx}/ztree/ztreeTest", //没点击一次节点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 =[
//这里我用到了jstl表达式forEach循环，循环的就是
//后台request作用域里存放的数据，而这里就是首次加载页面是树显示的根节点
<c:forEach items="${li}" var="abc" varStatus="vs">
{ id:"${abc.id}", pId:"${abc.parentId}", name:"${abc.name}"},
</c:forEach>
]; $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}); //获取节点复选框的值
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 + ",";
// alert(nodes[i].id); //获取选中节点的值
}
alert(id); //获取选中节点的值
$("#myid").val(id);
} </SCRIPT> <body>
<hr/>
<input type="text" id="myid" />
<br/>
<form action="" method="post">
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" name="trees" class="ztree"></ul>
</div>
</div>
<input type="submit" value="form提交">
</form>
——————————————————————————————————————————————————————————————————————————————————————————————————————
<h1><a href="${ctx }/ztree/ztreeTestget">测试</a></h1> </body>
</html>
此时已经结束了，，简单的一棵ajax请求的树已经实现，，
树结构ztree的 ajax交互的简单使用的更多相关文章
- （二 ）结构ztree的 ajax交互的简单使用
在第一篇的基础上更改,在实际项目中的使用. 一:HTML 代码: <SCRIPT type="text/javascript"> var setting = { asy ...
- ajax交互数据简单拼装，数组成字符串
json2Form:function(json) { var str = ""; for(var p in json){ // 判断对象是否为数组 if(typeof json[p ...
- 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 ...
- Python搭建Web服务器，与Ajax交互，接收处理Get和Post请求的简易结构
用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...
- jq的ajax交互封装
jq封装的ajax,然后 在此前和此后都是很多要考虑的 ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...
- ThinkPHP中使用ajaxReturn进行ajax交互
以管理员登录为例来介绍下$this->ajaxReturn与模板页进行ajax交互使用方法 首先看PHP控制器的处理,在application/Admin/Controller/LoginCon ...
- 关于文件上传的ajax交互
首先我们来了解一下上传文件 <input type="file"> input的file常用上传类型 后缀名 MIME名称 *.3gpp audio/3gpp, vid ...
- springmvc与ajax交互常见问题
这是我个人再编写博客系统的时候,因个人疏忽犯下的低级错误. 不过犯错是一件好事,有助于总结. 1.关于参数前加@RequestBody 如果是使用ajax交互时,必须要加上这个contentType: ...
随机推荐
- CSS3动画表单
在线演示 本地下载
- 优美的英文诗歌Beautiful English Poetry
<When you are old>——<当你老了> --- William Butler Yeats ——威廉·巴特勒·叶芝When you are old and grey ...
- leetcode刷题1:两数之和two_sum
题目:(难度:Easy) 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, ...
- Java I/O 小结
主要内容: 一.输入流基类:InputStream 和 OutputStream(字节流). Reader 和 Writer(字符流) 二.文件字节流:FileInputStream和FileOutp ...
- 语义web基础知识学习
最近找了一本书,<语义web技术基础>----Pascal Hitzler等编著的.因为最近在看关于自然语言处理的一些东西,就顺带翻了一下,做一点学习笔记,方便以后查看. 本书的作者 Pa ...
- YII2笔记之三
activeform布局findAll等不能满足where, order by, limit,底层调用了findByConditioncol-md col-lg的使用 view的方法,前三个常用ren ...
- hdu 5890 Eighty seven 暴力+bitset优化背包
Eighty seven Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Others) P ...
- struts2常见配置解决错误There is no mapped for namespace[/] and action name
我碰到这个错误的原因是我把配置文件名写成了Struts.xml,改成struts.xml就可以了. 在确定struts.xml本身并没有写错的情况下,那么发生错误有可能是路径,配置文件名. 如果实在找 ...
- js 图片加载失败处理方法
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...
- dp2--合并石子（一）
dp2--合并石子(一) 一.心得 二.题目 石子合并(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 有N堆石子排成一排,每堆石子有一定的数量.现要将 ...