zoukankan      html  css  js  c++  java
  • 为ExtJS 4 系列树添加可将节点拖动到叶子节点上的功能,可配置

    为ExtJS 4 系列树添加可将节点拖动到叶子节点上的功能,可配置。

    使用方法:将以下代码复制,新建立一js文件后,将其引用在ext核心js后即可。 

    使用时,通过allowLeafInserts属性进行叶子节点是否可拖动的配置,默认值为true。 

    啊啊啊啊…………又通宵了…… 

      1 /*以下改动为是:给树添加允许为叶子节点添加子节点功能 --by lihong 2012/2/24
      2 通过TreeViewDragDrop的allowLeafInserts为true或false进行配置 
      3 例:
      4 //    Ext.define('myTree', {
      5 //        extend: 'Ext.tree.Panel',
      6 //        viewConfig: {
      7 //            plugins: {
      8 //                ptype: 'treeviewdragdrop',
      9 //                allowLeafInserts : true
     10 //            }
     11 //        }
     12 //    }
     13 //*/    
     14 Ext.override(Ext.tree.ViewDropZone, {
     15     getPosition: function (e, node) {
     16         var view = this.view,
     17         record = view.getRecord(node),
     18         y = e.getPageY(),
     19         noAppend = record.isLeaf(),
     20         noBelow = false,
     21         region = Ext.fly(node).getRegion(),
     22         fragment;
     23 
     24         if (record.isRoot()) {
     25             return 'append';
     26         }
     27 
     28         if (this.appendOnly) {
     29             return noAppend ? false : 'append';
     30         }
     31         if (!this.allowParentInsert) {
     32             //leehom modify begin
     33             noBelow = this.allowLeafInserts || (record.hasChildNodes() && record.isExpanded());
     34             //leehom modify end
     35         }
     36 
     37         fragment = (region.bottom - region.top) / (noAppend ? 2 : 3);
     38         if (y >= region.top && y < (region.top + fragment)) {
     39             return 'before';
     40         }
     41         else if (!noBelow && (noAppend || (y >= (region.bottom - fragment) && y <= region.bottom))) {
     42             return 'after';
     43         }
     44         else {
     45             return 'append';
     46         }
     47     },
     48     handleNodeDrop: function (data, targetNode, position) {
     49         var me = this,
     50         view = me.view,
     51         parentNode = targetNode.parentNode,
     52         store = view.getStore(),
     53         recordDomNodes = [],
     54         records, i, len,
     55         insertionMethod, argList,
     56         needTargetExpand,
     57         transferData,
     58         processDrop;
     59         if (data.copy) {
     60             records = data.records;
     61             data.records = [];
     62             for (i = 0, len = records.length; i < len; i++) {
     63                 data.records.push(Ext.apply({}, records[i].data));
     64             }
     65         }
     66         me.cancelExpand();
     67         if (position == 'before') {
     68             insertionMethod = parentNode.insertBefore;
     69             argList = [null, targetNode];
     70             targetNode = parentNode;
     71         }
     72         else if (position == 'after') {
     73             if (targetNode.nextSibling) {
     74                 insertionMethod = parentNode.insertBefore;
     75                 argList = [null, targetNode.nextSibling];
     76             }
     77             else {
     78                 insertionMethod = parentNode.appendChild;
     79                 argList = [null];
     80             }
     81             targetNode = parentNode;
     82         }
     83         else {
     84             //leehom add begin
     85             if (this.allowLeafInserts) {
     86                 if (targetNode.get('leaf')) {
     87                     targetNode.set('leaf', false);
     88                     targetNode.set('expanded', true);
     89                 }
     90             }
     91             //leehom add end
     92             if (!targetNode.isExpanded()) {
     93                 needTargetExpand = true;
     94             }
     95             insertionMethod = targetNode.appendChild;
     96             argList = [null];
     97         }
     98 
     99         transferData = function () {
    100             var node;
    101             for (i = 0, len = data.records.length; i < len; i++) {
    102                 argList[0] = data.records[i];
    103                 node = insertionMethod.apply(targetNode, argList);
    104 
    105                 if (Ext.enableFx && me.dropHighlight) {
    106                     recordDomNodes.push(view.getNode(node));
    107                 }
    108             }
    109             if (Ext.enableFx && me.dropHighlight) {
    110                 Ext.Array.forEach(recordDomNodes, function (n) {
    111                     if (n) {
    112                         Ext.fly(n.firstChild ? n.firstChild : n).highlight(me.dropHighlightColor);
    113                     }
    114                 });
    115             }
    116         };
    117         if (needTargetExpand) {
    118             targetNode.expand(false, transferData);
    119         }
    120         else {
    121             transferData();
    122         }
    123     }
    124 });
    125 
    126 
    127 Ext.override(Ext.tree.plugin.TreeViewDragDrop, {
    128     allowLeafInserts: true,
    129 
    130     onViewRender: function (view) {
    131         var me = this;
    132         if (me.enableDrag) {
    133             me.dragZone = Ext.create('Ext.tree.ViewDragZone', {
    134                 view: view,
    135                 allowLeafInserts: me.allowLeafInserts,
    136                 ddGroup: me.dragGroup || me.ddGroup,
    137                 dragText: me.dragText,
    138                 repairHighlightColor: me.nodeHighlightColor,
    139                 repairHighlight: me.nodeHighlightOnRepair
    140             });
    141         }
    142 
    143         if (me.enableDrop) {
    144             me.dropZone = Ext.create('Ext.tree.ViewDropZone', {
    145                 view: view,
    146                 ddGroup: me.dropGroup || me.ddGroup,
    147                 allowContainerDrops: me.allowContainerDrops,
    148                 appendOnly: me.appendOnly,
    149                 allowLeafInserts: me.allowLeafInserts,
    150                 allowParentInserts: me.allowParentInserts,
    151                 expandDelay: me.expandDelay,
    152                 dropHighlightColor: me.nodeHighlightColor,
    153                 dropHighlight: me.nodeHighlightOnDrop
    154             });
    155         }
    156     }
    157 });
    158 ////////////////树叶子节点改动结束//////////////////////////////////////////////////////////  
  • 相关阅读:
    动态创建html内容时所用的W3C DOM属性和方法
    CSS强制英文、中文换行与不换行 强制英文换行
    aspose.words .net 导出word表
    nodejs -数据分页ejs-分页控件
    mysql模块简单实用操作-----nodejs
    coffeeScript命令
    命令
    用node 开发简易爬虫
    电脑不支持VT-X问题解决
    hibernate 使用sql server的存储过程时没有返回值
  • 原文地址:https://www.cnblogs.com/leehom0123/p/2365982.html
Copyright © 2011-2022 走看看