jQuery树形插件jquery.simpleTree.js用法分析
更新时间：2016年09月05日 11:49:31 作者：magic_zj00
这篇文章主要介绍了jQuery树形插件jquery.simpleTree.js用法,结合实例形式分析了jQuery树形菜单插件jquery.simpleTree.js的功能与基本用法,需要的朋友可以参考下
本文实例讲述了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.simpleTree中生成这些html元素的是loadTree.php文件，我们完全可以从数据库中取出数据以这些html元素的形式打印出来么。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
本文给大家分享的是一款jQuery整屏（全屏）滚动插件网页特效，滚动鼠标滚轮整屏一屏滚动切换代码，可设置文字/图片绝对上下左右居中显示JS代码，时下最流行的jQuery全屏滚动插件！（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）2015-04-04
:nth-child(index)子元素过滤选择器的描述是：选取每个父元素下的弟index个子元素，index从1开始。2011-07-07
这篇文章主要介绍了jQuery必不可少的小技巧，这些小技巧就像是创建的快捷方式，可以帮助大家快速开发，感兴趣的小伙伴们可以参考一下2015-11-11
本文主要介绍了Jquery Easyui验证扩展，Easyui验证，Easyui校验，js正则表达式。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了jquery ui 实现 tab标签功能,结合完整实例形式分析了jquery ui 实现 tab标签切换功能的相关操作技巧,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了基于jquery实现简单的分页控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了jQuery实现在新增加的元素上添加事件方法,结合具体实例形式分析了jQuery针对新增加的元素添加事件的实现技巧与注意事项,需要的朋友可以参考下2017-02-02
本篇文章小编为大家介绍，使用jQuery获取浏览器中的分辨率的方法。需要的朋友参考下2013-04-04
这篇文章主要介绍了jQuery基于ajax操作json数据的方法,结合简单实例形式分析了jQuery的ajax基本使用方法及json数据传输操作相关技巧,需要的朋友可以参考下2017-01-01
本文给大家简单总结了下jQuery中键盘事件的使用方法以及相关示例，非常的实用，有需要的小伙伴可以参考下。2016-02-02
最新评论