jQuery EasyUI使用教程之树的拖放控制

使用jQuery EasyUI实现树形结构DnD

最新推荐文章于 2024-03-15 16:57:10 发布

转载最新推荐文章于 2024-03-15 16:57:10 发布 · 47 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2317468/blog/702509

本文介绍如何使用jQuery EasyUI插件创建支持拖拽放置(DnD)功能的树形结构。通过设置'dnd'属性为true并定义'onDrop'事件处理程序，可以轻松实现节点的拖拽及放置，并通过AJAX调用更新服务器端的数据。

2019独角兽企业重金招聘Python工程师标准>>>

当在一个应用中使用树插件时，拖拽和放置功能要求允许用户改变节点位置。启用拖拽和放置操作，所有您需要做的就是把树插件的 'dnd' 属性设置为true。

jQuery EasyUI最新试用版下载请猛戳>>

添加节点到树形菜单

创建树

1

2

3

4

$('#tt').tree({

dnd: true,

url: 'tree_data.json'

});

当在一个树节点上发生放置操作，'onDrop' 事件将被触发，您应该做一些或更多的操作，例如保存节点状态到远程服务器端等。

1

2

3

4

5

6

7

8

9

10

11

12

13

onDrop: function(targetNode, source, point){

var targetId = $(target).tree('getNode', targetNode).id;

$.ajax({

url: '...',

type: 'post',

dataType: 'json',

data: {

id: source.id,

targetId: targetId,

point: point

}

});

}

下载EasyUI示例：easyui-tree-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程>>

转载于:https://my.oschina.net/u/2317468/blog/702509

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。