原创

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),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

相关推荐

评论

分享:

支付宝

微信