jquery.simpleTree.js使用心得
2011-06-02 10:03
363 查看
最近写项目的cms系统,客户要求后台管理可以通过一棵树来展现整个帮助文档的结构,并通过拖拽操作来实现文章和栏目的位置排列变化,我在网上找来半天,决定使用jquery.simpleTree.js来实现。
这个树控件支持拖动节点到新的位置,通过其提供aftermove函数的覆写,我们可以在其拖动完成后在aftermove函数中调用ajax来后台更改数据库来保存拖动的结果
同时这个树的节点还存在单击事件,每个节点如同一个按钮一样,相对比一个超链接可扩展性强多了
生成这个树需要的只是生成一些html元素比如说如下的代码
生成的树如下
![](http://hi.csdn.net/attachment/201106/2/0_13069800558n38.gif)
当然这是静态的代码实现的,在jquery.simpleTree中生成这些html元素的是loadTree.php文件,我们完全可以从数据库中取出数据以这些html元素的形式打印出来么。
这个树控件支持拖动节点到新的位置,通过其提供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>
生成的树如下
![](http://hi.csdn.net/attachment/201106/2/0_13069800558n38.gif)
当然这是静态的代码实现的,在jquery.simpleTree中生成这些html元素的是loadTree.php文件,我们完全可以从数据库中取出数据以这些html元素的形式打印出来么。
相关文章推荐
- jQuery 源码分析和使用心得 - 文档遍历 ( traversing.js )
- jquery.zoom.js的一点使用心得(仿京东放大镜)
- JS,JQuery使用心得
- jquery.form.js使用心得!
- jQuery_validate_js使用心得
- Jquery.dynatree.js控件的使用
- jQuery 源码分析和使用心得 - core.js
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
- Jquery.dynatree.js控件的使用
- jQuery树形插件jquery.simpleTree.js用法分析
- jquery.validate.js使用心得(一)
- jquery.validate.js使用心得
- \t\tasp.net MVC 结合 jquery.autocomplete.js使用json返回数据
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 今天使用jquery.validate.js表单验证
- 使用jquery.form.js的ajaxsubmit方法提交数据的Bug
- js使用心得
- 使用js或jquery操作cookie在谷歌浏览器chrome中不生效
- jQuery验证控件jquery.validate.js使用说明+中文API