zoukankan      html  css  js  c++  java
  • easyui tree 拖拽功能并将数据返回后台保存至数据库

    1.需要实现tree的拖拽功能,首先在定义一个tree时候需要设置 dnd : true

    2.easyui 给我们提供了一个onDrop : function(target, source, point) 函数,这个函数是当你拖拽树节点后触发,接下来我们就需要把数据返回后台处理

    3.这里我们需要理解ondrop 函数传进来的三个变量分别代表什么意思,一旦理解了相信你就知道怎么做后台数据处理了

    这里我们参照API:

    具体翻译大家可以google一下,这里大家可能会疑惑,target是什么? point的三个值分别代表什么意思?我第一次用这个函数的时候也纠结了好久,后来慢慢调试发现:

    target并不是你拖拽节点到新位置时此节点的父节点,而是最靠近你拖拽节点新位置的节点(就是你拖动时红色横线标识出的节点),而point就是表示你拖拽节点(也就是传进来的source) 相对于target的位置(这里说明target不是一个node 需要getNode获得),它有三个值‘append’ source 插入到target中,top source与target同级,但是source在target上方,同里 bottom在下方,具体看例子:

    原先我的菜单结构是:

    (1).当我拖动redmine节点到‘常用服务’与‘Custom Workflows’中间时,红线标示的是‘常用服务’,target就是‘常用服务’,当然point值就是append,source是redmine

    (2).当我拖动Latest Issues节点到‘常用服务’与‘redmine’之间时,红线标示的还是‘常用服务’,但此时point就是top。

    4.当你明白这些参数后就可以把这些值传回后台处理,后台根据point,target,source 就可以更新菜单层级结构,实现拖拽功能并保存到后台。

    具体看代码:

    $.ajax({
         url : 'UpdateMenuItemServlet',
         data : {
          target : next.id,
          source : source.id,
          point : point
         },
         dataType : 'json',
         success : function(r){
         }
        });

    这样全部步骤就完了。

  • 相关阅读:
    【leetcode】Reverse Nodes in k-Group (hard)☆
    JSP简单练习-包装类综合应用实例
    C++ 学习笔记3,struct长度測试,struct存储时的对齐方式
    rsh 无秘钥登陆配置
    【POJ 3122】 Pie (二分+贪心)
    Boss OpenCart 商城自适应主题模板 ABC-0012-01
    理解C语言中指针的声明以及复杂声明的语法
    JQuery编程demo练习
    Growth: 一个关于怎样成为优秀Web Developer 的 App
    改动select默认样式,兼容IE9
  • 原文地址:https://www.cnblogs.com/liveandevil/p/2687117.html
Copyright © 2011-2022 走看看