Drag and Drop from Grid to Grid Example，增加上下、左右移动的功能。

最新推荐文章于 2021-01-28 19:20:02 发布

LzwGlory

最新推荐文章于 2021-01-28 19:20:02 发布

阅读量1.5k

点赞数

分类专栏： ext 文章标签： ext js tabletotalbe gridtogrid

ext 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

版本：extjs 2.3.0

需求：自定义可排序列选择。

例子：http://localhost/ext230/examples/dd/dnd_grid_to_grid.html

封装：暂无，给大家参考下。

效果如图1所示。

图1

c.html：

[html]view plaincopy 
   
 <html>  
 <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
     <title>test</title>  
   
     <link rel="stylesheet" type="text/css" href="./js/extjs/resources/css/ext-all.css" />  
   
   
     <script type="text/javascript" src="./js/extjs/ext-base.js"></script>  
   
     <script type="text/javascript" src="./js/extjs/ext-all.js"></script>  
   
     <script type="text/javascript" src="c.js"></script>  
   
 </head>  
 <body>  
   
   
 <h1>Drag and Drop from Grid to Grid Example</h1>  
 <p>This example shows how to setup two way drag and drop from one GridPanel to another.</p>      
 <p>Note that the js is not minified so it is readable. See <a href="dnd_grid_to_grid.js">dnd_grid_to_grid.js</a>.</p>  
 <div id="panel"></div>  
   
   
 </body>  
 </html>  

c.js

[javascript]view plaincopy 
   
 /* 
  * Ext JS Library 2.3.0 
  * Copyright(c) 2006-2009, Ext JS, LLC. 
  * licensing@extjs.com 
  *  
  * http://extjs.com/license 
  */  
   
 Ext.onReady(function(){  
     Ext.QuickTips.init();  
   
   
     var myData = {  
         records : [  
             { name : "名称0", column1 : "0", column2 : "0" },  
             { name : "名称1", column1 : "1", column2 : "1" },  
             { name : "名称2", column1 : "2", column2 : "2" },  
             { name : "名称3", column1 : "3", column2 : "3" },  
             { name : "名称4", column1 : "4", column2 : "4" },  
             { name : "名称5", column1 : "5", column2 : "5" },  
             { name : "名称6", column1 : "6", column2 : "6" },  
             { name : "名称7", column1 : "7", column2 : "7" },  
             { name : "名称8", column1 : "8", column2 : "8" },  
             { name : "名称9", column1 : "9", column2 : "9" },  
             { name : "名称10", column1 : "9", column2 : "9" },  
             { name : "名称11", column1 : "9", column2 : "9" },  
             { name : "名称12", column1 : "9", column2 : "9" },  
             { name : "名称13", column1 : "9", column2 : "9" },  
             { name : "名称14", column1 : "9", column2 : "9" },  
             { name : "名称15", column1 : "9", column2 : "9" },  
             { name : "名称16", column1 : "9", column2 : "9" },  
             { name : "名称17", column1 : "9", column2 : "9" },  
             { name : "名称18", column1 : "9", column2 : "9" },  
             { name : "名称19", column1 : "9", column2 : "9" }  
         ]  
     };  
   
   
     // Generic fields array to use in both store defs.  
     var fields = [  
        {name: 'name', mapping : 'name'},  
        {name: 'column1', mapping : 'column1'},  
        {name: 'column2', mapping : 'column2'}  
     ];  
       
     // create the data store  
     var firstGridStore = new Ext.data.JsonStore({  
         fields : fields,  
         data   : myData,  
         root   : 'records'  
     });  
       
   
     // Column Model shortcut array  
     var cols = [  
         { id : 'name', header: "列名称",  
         //width: 160,  
         sortable: true,  
         dataIndex: 'name'  
     }//,  
         //{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},  
         //{header: "column2", width: 50, sortable: true, dataIndex: 'column2'}  
     ];  
       
     // declare the source Grid  
     var firstGrid = new Ext.grid.GridPanel({  
         ddGroup          : 'secondGridDDGroup',  
         store            : firstGridStore,  
         columns          : cols,  
         enableDragDrop   : true,  
         stripeRows       : true,  
         autoExpandColumn : 'name',  
         //width            : 325,  
         height   : 272,  
         columnWidth:0.4,  
         //region           : 'west',  
         title            : '待选择列'  
     });  
   
     var secondGridStore = new Ext.data.JsonStore({  
         fields : fields,  
         root   : 'records'  
     });  
       
     // create the destination Grid  
     var secondGrid = new Ext.grid.GridPanel({  
         ddGroup          : 'firstGridDDGroup',  
         store            : secondGridStore,  
         columns          : cols,  
         enableDragDrop   : true,  
         stripeRows       : true,  
         autoExpandColumn : 'name',  
         height   : 272,  
         columnWidth:0.4,  
         title            : '已选择列'  
     });  
   
     var lrPanel = {  
         columnWidth:0.1,  
         height   : 300,  
           
         items : [  
             new Ext.Button({  
                 text:">   ",  
                 style: 'margin: 70px 0px 0px 15px',  
                 handler : function() {  
                     if (firstGrid.getSelectionModel().hasSelection())  
                     {  
                         // 数据行数  
                         var total = secondGridStore.getCount();  
                         var records = firstGrid.getSelectionModel().getSelections();  
                         for (var i = 0; i < records.length; i++) {  
                             var record = records[i];  
                             firstGridStore.remove(record);  
                             secondGridStore.insert(total + i, record);  
                         }  
                     }  
                 }  
             }),  
             new Ext.Button({  
                 text:">>",  
                 style: 'margin: 15px 0px 0px 15px',  
                 handler : function() {  
                     // 数据行数  
                     var total = secondGridStore.getCount();  
                     var i = 0;  
                     while (firstGridStore.getCount() > 0)  
                     {  
                         var record = firstGridStore.getAt(0);  
                         firstGridStore.remove(record);  
                         secondGridStore.insert(total + i, record);  
                         i ++;  
                     }  
                 }  
             }),  
             new Ext.Button({  
                 text:"   <",  
                 style: 'margin: 15px 0px 0px 15px',  
                 handler : function() {  
                     if (secondGrid.getSelectionModel().hasSelection())  
                     {  
                         // 数据行数  
                         var total = firstGridStore.getCount();  
                         var records = secondGrid.getSelectionModel().getSelections();  
                         for (var i = 0; i < records.length; i++) {  
                             var record = records[i];  
                             secondGridStore.remove(record);  
                             firstGridStore.insert(total + i, record);  
                         }  
                     }  
                 }  
             }),  
             new Ext.Button({  
                 text:"<<",  
                 style: 'margin: 15px 0px 0px 15px',  
                 handler : function() {  
                     // 数据行数  
                     var total = firstGridStore.getCount();  
                     var i = 0;  
                     while (secondGridStore.getCount() > 0)  
                     {  
                         var record = secondGridStore.getAt(0);  
                         secondGridStore.remove(record);  
                         firstGridStore.insert(total + i, record);  
                         i ++;  
                     }  
                 }  
             })  
         ]  
     };  
   
     var udPanel = {  
         columnWidth:0.1,  
         height   : 300,  
         items : [  
             new Ext.Button({  
                 text:"向上",  
                 style: 'margin: 90px 0px 0px 10px',  
                 handler : function() {  
                     if (secondGrid.getSelectionModel().hasSelection())  
                     {  
                         var record = secondGrid.getSelectionModel().getSelected();  
                         //数据行数  
                         var total = secondGridStore.getCount();  
                         for(var i=0; i < total - 1; i++){  
                             var temp = secondGridStore.getAt(i);  
                             if (temp.get('name') == record.get('name'))  
                             {  
                                 break;  
                             }  
                             var next = secondGridStore.getAt(i + 1);  
                             if (next.get('name') == record.get('name'))  
                             {  
                                 secondGridStore.remove(next);  
                                 secondGridStore.insert(i, next);  
                             }  
                         }  
                     }  
                 }  
             }),  
             new Ext.Button({  
                 text:"向下",  
                 style: 'margin: 15px 0px 0px 10px',  
                 handler : function() {  
                     if (secondGrid.getSelectionModel().hasSelection())  
                     {  
                         var record = secondGrid.getSelectionModel().getSelected();  
                         //数据行数  
                         var total = secondGridStore.getCount();  
                         for(var i=0; i < total - 1; i++){  
                             var next = secondGridStore.getAt(i);  
                             if (next.get('name') == record.get('name'))  
                             {  
                                 secondGridStore.remove(next);  
                                 secondGridStore.insert(i + 1, next);  
                             }  
                         }  
                     }  
                 }  
             })  
         ]  
     };  
   
       
     //Simple 'border layout' panel to house both grids  
     var displayPanel = new Ext.Panel({  
         width    : 650,  
         height   : 300,  
         //layout   : 'border',  
         layout : 'column',  
         renderTo : 'panel',  
         items    : [  
             firstGrid,  
             lrPanel,  
             secondGrid,  
             udPanel  
         ],  
         bbar    : [  
             '->', // Fill  
             {  
                 text    : '确定',  
                 handler : function() {  
                     // 数据行数  
                     var total = secondGridStore.getCount();  
                     var results = "";  
                     if (total > 0)  
                     {  
                         for (var i = 0; i < total; i ++)  
                         {  
                             var record = secondGridStore.getAt(i);  
                             results += record.get("name") + ",";  
                         }  
                         results = results.substring(0, results.length - 1);  
                     }  
                     alert("选择的列名称：" + results);  
                 }  
             },  
             {  
                 text    : '重置',  
                 handler : function() {  
                     //refresh source grid  
                     firstGridStore.loadData(myData);  
                       
                     //purge destination grid  
                     secondGridStore.removeAll();  
                 }  
             }  
         ]  
     });  
   
     // used to add records to the destination stores  
     var blankRecord =  Ext.data.Record.create(fields);  
   
     /**** 
     * Setup Drop Targets 
     ***/  
     // This will make sure we only drop to the view container  
     var firstGridDropTargetEl =  firstGrid.getView().el.dom.childNodes[0].childNodes[1];  
     var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {  
         ddGroup    : 'firstGridDDGroup',  
         copy       : true,  
         notifyDrop : function(ddSource, e, data){  
               
             // Generic function to add records.  
             function addRow(record, index, allItems) {  
                   
                 // Search for duplicates  
                 var foundItem = firstGridStore.find('name', record.data.name);  
                 // if not found  
                 if (foundItem  == -1) {  
                     firstGridStore.add(record);  
                       
                     // Call a sort dynamically  
                     //firstGridStore.sort('name', 'ASC');  
                       
                     //Remove Record from the source  
                     ddSource.grid.store.remove(record);  
                 }  
             }  
   
             // Loop through the selections  
             Ext.each(ddSource.dragData.selections ,addRow);  
             return(true);  
         }  
     });       
   
       
     // This will make sure we only drop to the view container  
     var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]  
       
     var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {  
         ddGroup    : 'secondGridDDGroup',  
         copy       : false,  
         notifyDrop : function(ddSource, e, data){  
               
             // Generic function to add records.  
             function addRow(record, index, allItems) {  
                   
                 // Search for duplicates  
                 var foundItem = secondGridStore.find('name', record.data.name);  
                 // if not found  
                 if (foundItem  == -1) {  
                     secondGridStore.add(record);  
                     // Call a sort dynamically  
                     //secondGridStore.sort('name', 'ASC');  
               
                     //Remove Record from the source  
                     ddSource.grid.store.remove(record);  
                 }  
             }  
             // Loop through the selections  
             Ext.each(ddSource.dragData.selections ,addRow);  
             return(true);  
         }  
     });   
 });  

LzwGlory

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Drag and Drop from Grid to Grid Example，增加上下、左右移动的功能。

版本：extjs 2.3.0需求：自定义可排序列选择。例子：http://localhost/ext230/examples/dd/dnd_grid_to_grid.html封装：暂无，给大家参考下。效果如图1所示。图1c.html：[html] view plaincopy
复制链接

扫一扫