j2ee 简单网站搭建：（十）jquery ztree 插件使用入门

为什么80%的码农都做不了架构师？>>>

《j2ee 简单网站搭建：（一） windows 操作系统下使用 eclipse 建立 maven web 项目》
《j2ee 简单网站搭建：（二）添加和配置 spring + spring-mvc 的 mvc 开发环境》
《j2ee 简单网站搭建：（三）在搭建好的 spring maven web 项目中加入 mybatis 访问数据库》
《j2ee 简单网站搭建：（四）将 freemaker 模板引擎作为 spring-mvc 展现层》
《j2ee 简单网站搭建：（五）使用 jcaptcha 生成验证码图片》
《j2ee 简单网站搭建：（六）使用 hibernate validation 实现 domain 层实体类验证》
《j2ee 简单网站搭建：（七）使用 shiro 结合 jcaptcha 实现用户验证登录》
《j2ee 简单网站搭建：（八）使用 jquery-validate 实现页面验证入门》
《j2ee 简单网站搭建：（九）jquery datatables + jquery ui dialog 插件使用入门》
《j2ee 简单网站搭建：（十）jquery ztree 插件使用入门》
《j2ee 简单网站搭建：（十一）ckeditor 控件使用入门》

ztree 版本 v3.5.28

一从官方网站下载 ztree 的 css 和 js 文件，引入项目的 web 目录中
网站地址 http://www.treejs.cn/v3/main.php#_zTreeInfo

二在 html 页面 <head> 标签中加入 css 文件

<!-- zTree CSS -->
<link rel="stylesheet" href="你的文件路径/metroStyle.css" type="text/css">

三在 html 页面 <body> 标签内添加绑定 ztree 插件的 ul 标签，本例中 ul 标签的 id 设置为 categorytree

<ul id="categorytree" class="ztree" style="width: 100%"></ul>

四在 html 页面 </body> 标签内添加绑定 ztree 插件 js 文件以及 javascript 代码

<script type="text/javascript" src="你的文件路径/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="你的文件路径/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src=你的文件路径/jquery.ztree.exedit.js"></script><!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>var zTree = $.fn.zTree.getZTreeObj("categorytree"); // 获得树对象// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）var setting = {view : {selectedMulti: false, // 取消多选addHoverDom: addHoverDom, // 鼠标选中后显示增、改按钮removeHoverDom: removeHoverDom // 鼠标移除后显示增、改按钮},data :{ // 设置节点的属性值以及从服务端传送过来的数据向节点绑定的参数值simpleData : {enable : true,idKey : 'id', // 绑定服务端传过来的 id 参数pIdKey : 'pid', // 绑定服务端传过来的 pid 参数rootPid : 0, // 根节点的父节点 id 值status : 'status' // 绑定服务端传过来的 status 参数}},edit : { // 对节点编辑时进行的设置enable : true, // 允许编辑showRemoveBtn : false, // 是否显示 删除节点 按钮showRenameBtn : true, // 是否显示 修改节点内容 按钮renameTitle : "修改", // 如果显示 修改节点内容 按钮后，按钮上的文字显示啥editNameSelectAll : true, // 编辑节点名称的时候是否对名称文字全选// drag : { // 是否允许节点拖拽放置、复制、移动//     autoExpandTrigger : false,//     isCopy : false,//     isMove : false// }},callback: { // 设置所有的回调函数onRename: onRename, // 修改时调用onDrop: onDrop // 拖拽}};// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）$(document).ready(function() {var zNodes;$.ajax({ // 需要调用同步方法，因此不能使用post方法，此处加载整棵树type:"POST",async:false,url:"get_category_tree", // 服务端获得数据的方法dataType : "json",data:null,success:function(result){ // 调用成功对节点进行设置if (result != null && result.status == true)zNodes = result.data;}});zTree = $.fn.zTree.init($("#categorytree"), setting, zNodes); // 初始化树对象});function addHoverDom(treeId, treeNode) { // 在鼠标移动到节点上方时显示对节点的操作按钮并对按钮绑定处理方法var sObj = $("#" + treeNode.tId + "_span"); // 获得鼠标所在的节点对象if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0 || $("#startBtn_"+treeNode.tId).length>0) return; // 如果鼠标所在的节点正在编辑或者添加按钮已存在则以下不执行var addStr = "<span class='button add' id='addBtn_" + treeNode.tId+ "' title='添加' onfocus='this.blur();'></span>"; // 动态生成新增按钮var startStr = "<span class='button start' id='startBtn_" + treeNode.tId+ "' title='启用' onfocus='this.blur();'></span>"; // 动态生成启用按钮var stopStr = "<span class='button stop' id='stopBtn_" + treeNode.tId+ "' title='停用' onfocus='this.blur();'></span>"; // 动态生成停用按钮var statusStr = "<span id='statusSpan_" + treeNode.tId + "' title='状态'>[" + (treeNode.status ? "启用" : "停用") + "]</span>"; // 动态生成停用按钮sObj.after(stopStr).after(startStr).after(addStr).after(statusStr); // 在鼠标所在节点后显示添加按钮、启动按钮和其它操作按钮// - - - 新增按钮及处理方法 - - - //var addBtn = $("#addBtn_"+treeNode.tId); // 获得添加按钮对象并绑定点击事件if (addBtn) addBtn.bind("click", function(){ // 添加按钮点击后的操作var newNodeName = Math.round(Math.random()* 99999999).toString(); // 新增的节点名称$.ajax({ // 需要调用同步方法，因此不能使用post方法，这里需要添加节点type : "POST",async : false,url : "add_tree_node",dataType : "json",data : {name: newNodeName, parentId: treeNode.id, parentName: treeNode.name},success:function(result){if (result != null && result.status == true) {$('#div_alert').text("节点添加成功！").prop('class', 'alert alert-success'); // 设置提示信息并改变提示框样式为成功// 返回值为数据库中的自增IDzTree.addNodes(treeNode, {id: result.data, pId: treeNode.id, name: newNodeName, status: 1}); // 在ztree中添加节点，因为在设置中将treeNode 的name设置为nameWithStatus,因此这里要传这个名称}else $('#div_alert').text("节点添加失败！").prop('class', 'alert alert-warning'); // 设置提示信息并改变提示框样式为警告}});return false;});function removeHoverDom(treeId, treeNode) { // 鼠标移除后清除临时生成的对象$("#addBtn_"+treeNode.tId).unbind().remove(); // 鼠标移动后删除添加按钮所有内容$("#startBtn_"+treeNode.tId).unbind().remove(); // 鼠标移动后删除启用按钮所有内容$("#stopBtn_"+treeNode.tId).unbind().remove(); // 鼠标移动后删除停用按钮所有内容$("#statusSpan_"+treeNode.tId).unbind().remove(); // 鼠标移动后删除状态框内容}function onRename(e, treeId, treeNode, isCancel) { // 修改名称var parentNode = treeNode.getParentNode();$.ajax({ // 需要调用同步方法，因此不能使用post方法，这里需要添加节点type : "POST",async : false,url : "modify",dataType : "json",data : {id: treeNode.id, name: treeNode.name, parentId: (parentNode != null ? parentNode.id : 0), parentName: (parentNode != null ? parentNode.name : "[- 无 -]")},success:function(result){if (result != null && result.status == true) {$('#div_alert').text("修改成功！").prop('class', 'alert alert-success'); // 设置提示信息并改变提示框样式为成功isCancel = false;}else {  // 设置提示信息并改变提示框样式为警告$('#div_alert').text("修改失败！").prop('class', 'alert alert-warning');isCancel = true;}}});return isCancel;}function onDrop(event, treeId, treeNodes, targetNode, moveType) { // 调整树形节点的位置$.ajax({ // 需要调用同步方法，因此不能使用post方法，这里需要添加节点type : "POST",async : false,url : "modify",dataType : "json",data : {id: treeNodes[0].id, name: treeNodes[0].name, parentId: (targetNode != null ? targetNode.id : 0), parentName: (targetNode != null ? targetNode.name : "[- 无 -]")},success:function(result){if (result != null && result.status == true) {$('#div_alert').text("位置调整修改成功！").prop('class', 'alert alert-success'); // 设置提示信息并改变提示框样式为成}else {  // 设置提示信息并改变提示框样式为警告$('#div_alert').text("位置调整修改失败！").prop('class', 'alert alert-warning');}}});};
</script>

转载于:https://my.oschina.net/ioooi/blog/1525745

j2ee 简单网站搭建：（十）jquery ztree 插件使用入门相关推荐

oracle 生成目录树,jQuery zTree插件快速实现目录树
ztree是JQuery的一个开源树形目录的插件,用来快速构建网站的树形目录结构,并且提供了功能丰富,利于扩展的API. JQuery ztree官网只要引入jquery和ztree的库js,然后给 ...
树状图JQuery.ztree插件的使用
一. 树状图,顾名思义就是树形状的图,想必大家对它也不陌生,而且天天都在用的.就比如文件资源管理器里面左侧功能,它就是一个树状图,使用树状图可以很方便快捷地找到所需要的文件,而且对于文件的管理也是非常 ...
jquery ztree插件使用
官网:ztree.me,下载插件在页面中引入ztree相关的文件: <link rel="stylesheet" href="../../../css/zTree ...
一款简单的Bootstrap和jQuery倒计时插件
下载地址一款简单漂亮的jQuery计时器插件.该计时器插件可以实现秒.分钟和小时的计时功能,并带有开始.暂停和重新开始计时的按钮功能. 该计时器插件的计时功能依赖于jquery-runner插件. ...
用户用老版IE访问网站时的jquery提示插件
http://nmsdvid.com/iealert/ 转载于:https://blog.51cto.com/ivanzz/1211874
树形图html插件,前端树形图 -- zTree -- jQuery 树插件
zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(MIT 许可证).所 ...
网站开发常用jQuery插件总结(四）验证插件validation
在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验 ...
动态网站的技术路线_简单动态网站搭建
如何在windows服务器上配置wordPress和discuz 网站建设中的概念讲解网站建设的基础操作网站程序的基础使用网站程序的优化简单动态网站搭建软件部署域名和主机的购买域名解析 ...
分享十五个最佳jQuery幻灯插件和教程
<p>在网站前端中使用jQuery库已经变得越来越流行,前端开发人员发布或撰写的相关的插件和教程也与日俱增.</p> <p>幻灯(通常也被称为"内容滑动& ...

j2ee 简单网站搭建：（十）jquery ztree 插件使用入门

j2ee 简单网站搭建：（十）jquery ztree 插件使用入门相关推荐

最新文章

热门文章