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 相关文章推荐
Javascript 继承机制的实现
Aug 12 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
php 修改密码实现代码
May 24 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
ES6 Generator基本使用方法示例
Jun 06 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
构建一个JavaScript插件系统
Oct 20 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 静态变量与自定义常量的使用方法
2010/01/26 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python三级目录展示的实现方法
2016/09/28 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
python实现机器人行走效果
2018/01/29 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
元旦红领巾广播稿
2014/02/19 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
公司离职证明标准格式
2014/11/18 职场文书
教代会闭幕词
2015/01/28 职场文书
求职意向书范本
2015/05/11 职场文书
导游词之张家口
2019/12/13 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
如何Python使用re模块实现okenizer
2022/04/30 Python