原创

jEasyUI中 Editable Tree 可编辑树讲解

在很多项目中都需要树结构展示数据,但是写的树形结构不支持可编辑,下面给大家说一种比较常用的可编辑树供大家参考,以便以后开发时更加快速方便,提高效率。

创建树结构Js代码,具体如下:

<ul id="tt"></ul>    
<script type="text/javascript">
$('#tt').etree({    
    url: 'tree_data.json',    
    createUrl: ...,    
    updateUrl: ...,    
    destroyUrl: ...,    
    dndUrl: ...    
});  
</script>

参数说明:

设置url,createUrl,updateUrl,destroyUrl和dndUrl属性将自动从客户端同步数据到服务器端。

url:返回树控件的数据。

createUrl:在创建一个新节点的时候,树控件将父节点ID赋值给一个名为'parentId'的参数并发送到服务器。服务器将会返回对应节点数据。下面的代码显示了添加节点数据的例子:

{"id":1,"text":"new node"}

updateUrl:在更新一个节点的时候,树控件将会发送'id'和'text'参数到服务器。服务器会执行更新并返回更新的节点数据。

destroyUrl:在销毁一个节点的时候,树控件将会发送'id'参数到服务器。服务器会返回{"success":true}这样的JSON字符串数据。

dndUrl:在拖拽一个节点的时候,数控将将会发送如下参数到服务器:

id - 拖拽的节点ID。

targetId - 拖拽到的节点ID。

point - 指明释放操作,可用值有:'append','top' 或 'bottom'。

服务器会做一些动作并返回{"success":true}这样的JSON字符串数据。

方法可编辑树扩展自树控件,可扩展树的新增方法如下: 

方法名  方法参数  描述 
options  none  返回属性对象。 
create  none  创建一个新节点。 
edit  none  编辑当前选中的节点。 
destroy  none  销毁当前选中的节点。
~阅读全文~人机检测~

关注下方微信公众号“Java精选”(w_z90110),回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。

Java精选专注程序员推送一些Java开发知识,包括基础知识、各大流行框架(Mybatis、Spring、Spring Boot等)、大数据技术(Storm、Hadoop、MapReduce、Spark等)、数据库(Mysql、Oracle、NoSQL等)、算法与数据结构、面试专题、面试技巧经验、职业规划以及优质开源项目等。其中一部分由小编总结整理,另一部分来源于网络上优质资源,希望对大家的学习和工作有所帮助。

评论

分享:

支付宝

微信