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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
微信小程序实现多行文字滚动
Nov 18 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为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php实现递归的三种基本方式
2020/07/04 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
理解Javascript闭包
2013/11/01 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
JS比较两个数值的大小实例
2016/11/25 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python字符串转换成浮点数函数分享
2015/07/24 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
《雷雨》教学反思
2014/02/20 职场文书
跳蚤市场口号
2014/06/13 职场文书
2015年组织部工作总结
2015/04/03 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
SpringBoot Http远程调用的方法
2022/08/14 Java/Android