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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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 If Else(elsefi) 语句
2013/04/07 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
浅谈php扩展imagick
2014/06/02 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
php绘制一个扇形的方法
2015/01/24 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
javascript 写类方式之五
2009/07/05 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
js获取class的所有元素
2013/03/28 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Python爬取APP下载链接的实现方法
2016/09/30 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Python csv模块使用方法代码实例
2019/08/29 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
基于python实现操作git过程代码解析
2020/07/27 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
个人职业生涯规划书1500字
2013/12/31 职场文书
会计学生自我鉴定
2014/02/06 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
求职简历自我评价2015
2015/03/10 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
关于MySQL中的 like操作符详情
2021/11/17 MySQL