jQuery树形插件jquery.simpleTree.js用法分析


Posted in Javascript onSeptember 05, 2016

本文实例讲述了jQuery树形插件jquery.simpleTree.js用法。分享给大家供大家参考,具体如下:

最近写项目的cms系统,客户要求后台管理可以通过一棵树来展现整个帮助文档的结构,并通过拖拽操作来实现文章和栏目的位置排列变化,我在网上找来半天,决定使用jQuery.simpleTree.js来实现。

这个树控件支持拖动节点到新的位置,通过其提供aftermove函数的覆写,我们可以在其拖动完成后在aftermove函数中调用ajax来后台更改数据库来保存拖动的结果

同时这个树的节点还存在单击事件,每个节点如同一个按钮一样,相对比一个超链接可扩展性强多了

生成这个树需要的只是生成一些html元素比如说如下的代码

<li id='35'><span class="text">Tree Node Ajax 1</span></li>
<li id='36'><span class="text">Tree Node Ajax 2</span></li>
<li id='37'><span class="text">Tree Node Ajax 3</span>
  <ul>
    <li id='38'><span class="text">Tree Node Ajax 3-1</span>
      <ul>
        <li id='39'><span class="text">Tree Node Ajax 3-1-1</span></li>
        <li id='40'><span class="text">Tree Node Ajax 3-1-2</span></li>
        <li id='41'><span class="text">Tree Node Ajax 3-1-3</span></li>
        <li id='42'><span class="text">Tree Node Ajax 3-1-4</span></li>
      </ul>
    </li>
    <li id='43'><span class="text">Tree Node Ajax 3-2</span></li>
    <li id='44'><span class="text">Tree Node Ajax 3-3</span>
      <ul>
        <li id='45'><span class="text">Tree Node Ajax 3-3-1</span></li>
        <li id='46'><span class="text">Tree Node Ajax 3-3-2</span></li>
        <li id='47'><span class="text">Tree Node Ajax 3-3-3</span></li>
      </ul>
    </li>
    <li id='48'><span class="text">Tree Node Ajax 3-4</span></li>
    <li id='49'><span class="text">Tree Node Ajax 3-5</span>
      <ul>
        <li id='50'><span class="text">Tree Node Ajax 3-5-1</span></li>
        <li id='51'><span class="text">Tree Node Ajax 3-5-2</span></li>
        <li id='52'><span class="text">Tree Node Ajax 3-5-3</span></li>
      </ul>
    </li>
    <li id='53'><span class="text">Tree Node Ajax 3-6</span></li>
  </ul>
</li>
<li id='54'><span class="text">Tree Node Ajax 4</span></li>

生成的树如下:

jQuery树形插件jquery.simpleTree.js用法分析

当然这是静态的代码实现的,在jquery.simpleTree中生成这些html元素的是loadTree.php文件,我们完全可以从数据库中取出数据以这些html元素的形式打印出来么。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
js实现简单的验证码
Dec 25 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
js中创建对象的几种方式
Feb 05 Javascript
详解jquery选择器的原理
Aug 01 jQuery
微信小程序 获取javascript 里的数据
Aug 17 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 #Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 #Javascript
BootStrap使用file-input插件上传图片的方法
Sep 05 #Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 #Javascript
Bootstrap使用基础教程详解
Sep 05 #Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 #Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 #Javascript
You might like
PHP Directory 函数的详解
2013/03/07 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
python中web框架的自定义创建
2019/09/08 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
C++的几个面试题附答案
2016/08/03 面试题
解释一下Windows的消息机制
2014/01/30 面试题
linux面试题参考答案(2)
2015/12/06 面试题
副董事长岗位职责
2014/04/02 职场文书
采购内勤岗位职责
2015/04/13 职场文书
学术会议通知
2015/04/15 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
教师节领导致辞
2015/07/29 职场文书
孙振耀退休感言
2015/08/01 职场文书
个人向公司借款协议书
2016/03/19 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技