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

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

翻译最新推荐文章于 2024-03-15 16:57:10 发布 · 752 阅读

本文介绍如何在EasyUI中配置树形组件以支持拖拽功能，并通过示例代码展示了如何设置'dnd'属性及处理'onDrop'事件来实现节点位置的改变和同步更新到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

创建树

 
        $(
        '#tt'
        ).tree({
       
        dnd: 
        true
        ,
       
        url: 
        'tree_data.json'
       
        });

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

 
        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
       
        }
       
        });
       
        }