树结构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: ...
随机推荐
- python日志操作logging
步骤: 1.定义一个日志收集器 my_logger = logging.getLogger("kitty") 2.设定级别.默认为warning:debug,,info,error ...
- 2.3UML建模之用例图关系
一．UML简介 UML(统一建模语言,Unified Modeling Language)是一种定义良好.易于表达.功能强大且普遍适用的可视化建模语言.它融入了软件工程领域的新思想.新方法和新技术.它 ...
- Nginx的访问日志配置信息详解
Nginx的访问日志可以让我们知晓用户的地址,网站的那些部分最受欢迎,以及用户浏览时间等.Nginx会把每个用户的访问日志记录到指定的日志文件中. Nginx主要有两个参数来控制 log_format ...
- JavaWeb -- Servlet Filter 过滤器
1. Servlet API中提供了一个Filter接口,开发web应用时,如果编写的Java类实现了这个接口,则把这个java类称之为过滤器Filter.通过Filter技术,开发人员可以实现用户在 ...
- 通过yum安装mysql
在linux中安装数据库首选MySQL,Mysql数据库的第一个版本就是发行在Linux系统上,其他选择还可以有postgreSQL,oracle等 在Linux上安装mysql数据库,我们可以去其官 ...
- JMeter-Window10系统下设置环境变量
首先我们右击此电脑(我的电脑),点击属性 接下来我们就可以进入到控制面板主页,点击[高级系统设置] 在系统属性里面,点击[环境变量]按钮 在环境变量里面,点击[新建]按钮 接下来我们输 ...
- 智课雅思词汇---十七、前綴il-, in-, ir-, im-有什麼關係
智课雅思词汇---十七.前綴il-, in-, ir-, im-有什麼關係 一.总结 一句话总结:这几个长得非常像,并且意思也非常像 1.前綴il-, in-, ir-, im-是什麼意思? 前缀:i ...
- R文件报错：cannot resolve symbol ‘R’
今天仿照别人项目,因为不太熟悉Androidstudio,所以就照着他项目结构走,结果包名跟他的不一样,项目一直报标题这个错误,网上百度了很多也没用,不过先把网上的解决方案copy一下 请注意 ① E ...
- HDU 1052 贪心+dp
http://acm.hdu.edu.cn/showproblem.php?pid=1052 Tian Ji -- The Horse Racing Time Limit: 2000/1000 MS ...
- 转 postfix邮件服务下mailq、postmap、postqueue 、 postsuper等用法
1.Mailq 功能说明:显示待寄邮件的清单. 语 法:mailq [-q] 补充说明:mailq可列出待寄邮件的清单,包括邮件ID,邮件大小,邮件保存时间,寄信人,收信人,以及邮件无法寄出的原因,提 ...