zTree 树形控件 ajax动态加载数据
很久没搞过树形控件了 ， 再次接触看官网文档有点没懂，于是在网上找了个代码copy上，但数据是写死的，就想这在用ajax异步取出数据替换，下面是js代码
<SCRIPT type="text/javascript" >
//定义全局ztree数据
var zNodes; /* 初始化ztree数据 */
function initZtree(){
$.ajax({
type: "GET",
url: "<%=request.getContextPath() %>/articleType/getArticleType",
dataType: "json",
async:false,
success: function(data){
var str="";
for(var i =0;i<data.type.length;i++){
str += "{id:'"+ data.type[i].id+"', pId:'"+data.type[i].pid+"', name:'"+data.type[i].name+"'},\n";
}
alert("["+str+"]");
zNodes='['+str+']';
$("#ztree").val(zNodes);
}
});
} $(function(){
//initZtree(); alert($("#ztree").val()+"999");
alert(zNodes); zNodess = zNodes;
alert("8888"+zNodess);
}) var zTreeObj,
setting = {
view: {
selectedMulti: false
},
async: {
enable: true,
url: "<%=request.getContextPath() %>/articleType/getArticleType",
otherParam: { "id":"1", "name":"test"}
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
onClick: function(treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj(treeNode);
var selectedNode = treeObj.getSelectedNodes()[0];
$("#txtId").val(selectedNode.id);
$("#txtAddress").val(selectedNode.name);
}
}
} $(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#tree"), setting,zNodess );
});
</SCRIPT>
代码捏有点乱，大概就是想用ajax取出数据，但遇到个问题，取出来的数据拼接成json 不能被识别。
于是又继续看官网demo 和api
找到个基础的动态取数据
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Async</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
<!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>-->
<SCRIPT type="text/javascript">
<!--
var setting = {
async: {
enable: true,
url:"../asyncData/getNodes.php",
autoParam:["id", "name=n", "level=lv"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter
}
}; function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
} $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
//-->
</SCRIPT>
</HEAD> <BODY>
<h1>异步加载节点数据的树</h1>
<h6>[ 文件路径: core/async.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、setting 配置信息说明</h2>
<ul class="list">
<li class="highlight_red">使用异步加载，必须设置 setting.async 中的各个属性，详细请参见 API 文档中的相关内容</li>
</ul>
</li>
<li class="title"><h2>2、treeNode 节点数据说明</h2>
<ul class="list">
<li>异步加载功能对于 treeNode 节点数据没有特别要求，如果采用简单 JSON 数据，请设置 setting.data.simple 中的属性</li>
<li>如果异步加载每次都只返回单层的节点数据，那么可以不设置简单 JSON 数据模式</li>
</ul>
</li>
<li class="title"><h2>3、其他说明</h2>
<ul class="list">
<li class="highlight_red">观察 autoParam 和 otherParam 请使用 firebug 或 浏览器的开发人员工具</li>
<li class="highlight_red">此 Demo 只能加载到第 4 级节点（level=3）</li>
<li class="highlight_red">此 Demo 利用 dataFilter 对节点的 name 进行了修改</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
官网demo
在阅读官网demo的时候不能看到demo的具体js代码 这时你需要下载ztree插件 在下载好的文件夹里面会有demo的js代码
那个路径就是下载下来的文件夹路径，这也是后面发现才找到的js代码
下面是后面根据demo修改的js代码
<SCRIPT type="text/javascript">
var setting = {
view: {
selectedMulti: false
},
async: {
enable: true,
url:"<%=request.getContextPath() %>/Type/Type",
autoParam:[],
contentType: "application/json",
otherParam:{},
dataFilter: filter //异步获取的数据filter 里面可以进行处理 filter 在下面
},
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pid",
rootPId: ""
}
},//个人理解加上这个就能按级别显示，其中的id pid 对应你的实体类
callback: {
onClick: function(treeId, treeNode) {
var treeObj = $.fn.zTree.getZTreeObj(treeNode);
var selectedNode = treeObj.getSelectedNodes()[0];
$("#txtId").val(selectedNode.id);
$("#txtAddress").val(selectedNode.name);
}
} //这里是节点点击事件
};
function filter(treeId, parentNode, childNodes) {
alert(childNodes.length);
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
</SCRIPT>
其异步获取后台数据要转json
@RequestMapping(value="getArticleType")
//@ResponseBody
public void getArticleType(HttpServletRequest request ,HttpServletResponse response,ArticleTypeQuery query){
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
Map<String, Object> map=new HashMap<String,Object>();
try {
List<ArticleType> list=articleTypeMapper.selectArticleTypeByQuery(query);
map.put("type", list);
response.getWriter().print(JSON.toJSONString(list));
} catch (Exception e) {
// TODO: handle exception
}
//return map;
}
上面注释的修改过的，也就是最开始的写法，用map返回的json数据，不知道不能识别是不是因为这个原因，后面就改了不用map了
结合上面两段代码，能正常显示出树形来了！
对了 还的有页面代码
页头记得加上ztree相关的js和css哟
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
ztree官网：http://www.treejs.cn/
zTree 树形控件 ajax动态加载数据的更多相关文章
- Ajax动态加载数据
前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...
- C#自定义控件、用户控件、动态加载菜单按钮
一.效果图,动态加载5个菜单按钮: 二.实现方法 1.创建用户控件 2.在用户控件拖入toolStrip 3.进入用户控件的Lood事件,这里自动添加5个选 ToolStripMenuItem,后期 ...
- echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}back ...
- easyui Tree树形控件的异步加载
Tree控件 $('#partyOrgTree').tree({ checkbox: false, url: getDataUrl, onClick: function (node) { getDiv ...
- Jquery chosen动态设置值实例介绍 select Ajax动态加载数据 设置chosen和获取他们选中的值
for (var i = 0; i < obj.length; i++) $("#selectnum" + nid).append("<option myid ...
- Winform DevExpress控件库（二） 使用SplashScreenManager控件定制程序加载页面
SplashScreenManager控件:主要作用是显示在进行耗时操作时的等待界面: 位于 工具箱 -> Navigation & Layout(导航栏与布局类控件) 目录下: 在工具 ...
- 使用SplashScreenManager控件定制程序加载页面
需要devexpress版本在12.0及以上才支持 https://www.cnblogs.com/wuhuacong/p/6112461.html 在DevExpress程序中使用SplashScr ...
- 爬虫——爬取Ajax动态加载网页
常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 ...
- Python网络爬虫_爬取Ajax动态加载和翻页时url不变的网页
1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...
随机推荐
- 通过SectionIndexer实现微信通讯录
这里主要参考了使用SectionIndexer实现微信通讯录的效果 在这里做个记录 效果图 页面使用RelativeLayout,主要分为三个部分,match_parent的主listView,右边字 ...
- Oracle 动态sql 实现方式
/******************************************************************* Sample Program 10: Dynamic SQL ...
- 百度语音识别demo：去掉离线识别功能
如果离线识别功能不是必须的,则为了减小包体积,可按下面方法将官方demo中的离线功能去掉: 1,删除loadOfflineEngine调用.2,删除data和license文件夹. 如此可使包体积减少 ...
- The server has either erred or is incapable of performing the requested operation. (HTTP 500)
感谢朋友支持本博客,欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免,欢迎指正. 假设转载.请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...
- atitit.项目设计模式---ioc attilax总结
atitit.项目设计模式---ioc attilax总结 1. .IOC的之前 1 2. ioc后的实现 1 3. 认识引入IOC框架的缺点, 2 4. 自己实现ioc 3 4.1. ioc框架的实 ...
- 王立平-- Swift
Swift是供iOS和OS X应用编程的新编程语言,基于C和Objective-C.而却没有C的一些兼容约束.Swift採用了安全的编程模式和加入现代的功能来是的编程更加简单.灵活和有趣. 界面则基于 ...
- python之版本管理
linux 环境下怎样对不同的python环境进行 方便的切换呢?update-alternatives工具能够非常方便的帮我们完成这个任务.而windows环境下可通过anaconda来完成. 1. ...
- python学习之os.walk()
os.walk(top,topdown = True,onerror = None,followlinks = False) 参数 top -- 根目录下的每一个文件夹(包含它自己), 产生3-元组 ...
- 微信小程度腾讯地图SDK使用方法
在开发过程中,不少人肯定遇到过要用到地图,那么在小程序里,腾讯也给出了相应的SDK供我们来使用.那么接下来,就介绍下如何使用该SDK实现获取经纬度然后显示当前用户所在地址 首先第一步:下载腾讯地图SD ...
- CentOS6.2下Qt5.1.0无法输入中文
因为在程序中需要在界面上输入中文,但是系统是英文系统,没有预装中文输入法,于是从网上搜了一下输入法的安装,但是输入法安装好之后,可以再系统中输入中文,但是却无法再Qt中输入中文,只能继续找解决办法 安 ...