`
a137268431
  • 浏览: 147785 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

版本：extjs 2.3.0

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

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

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

效果如图1所示。

图1


c.html：

[html]view plaincopy
  1. <html>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
  4. <title>test</title>
  6. <linkrel="stylesheet"type="text/css"href="./js/extjs/resources/css/ext-all.css"/>
  9. <scripttype="text/javascript"src="./js/extjs/ext-base.js"></script>
  11. <scripttype="text/javascript"src="./js/extjs/ext-all.js"></script>
  13. <scripttype="text/javascript"src="c.js"></script>
  15. </head>
  16. <body>
  19. <h1>DragandDropfromGridtoGridExample</h1>
  20. <p>ThisexampleshowshowtosetuptwowaydraganddropfromoneGridPaneltoanother.</p>
  21. <p>Notethatthejsisnotminifiedsoitisreadable.See<ahref="dnd_grid_to_grid.js">dnd_grid_to_grid.js</a>.</p>
  22. <divid="panel"></div>
  25. </body>
  26. </html>

c.js

[javascript]view plaincopy
  1. /*
  2. *ExtJSLibrary2.3.0
  3. *Copyright(c)2006-2009,ExtJS,LLC.
  4. *licensing@extjs.com
  5. *
  6. *http://extjs.com/license
  7. */
  9. Ext.onReady(function(){
  10. Ext.QuickTips.init();
  13. varmyData={
  14. records:[
  15. {name:"名称0",column1:"0",column2:"0"},
  16. {name:"名称1",column1:"1",column2:"1"},
  17. {name:"名称2",column1:"2",column2:"2"},
  18. {name:"名称3",column1:"3",column2:"3"},
  19. {name:"名称4",column1:"4",column2:"4"},
  20. {name:"名称5",column1:"5",column2:"5"},
  21. {name:"名称6",column1:"6",column2:"6"},
  22. {name:"名称7",column1:"7",column2:"7"},
  23. {name:"名称8",column1:"8",column2:"8"},
  24. {name:"名称9",column1:"9",column2:"9"},
  25. {name:"名称10",column1:"9",column2:"9"},
  26. {name:"名称11",column1:"9",column2:"9"},
  27. {name:"名称12",column1:"9",column2:"9"},
  28. {name:"名称13",column1:"9",column2:"9"},
  29. {name:"名称14",column1:"9",column2:"9"},
  30. {name:"名称15",column1:"9",column2:"9"},
  31. {name:"名称16",column1:"9",column2:"9"},
  32. {name:"名称17",column1:"9",column2:"9"},
  33. {name:"名称18",column1:"9",column2:"9"},
  34. {name:"名称19",column1:"9",column2:"9"}
  35. ]
  36. };
  39. //Genericfieldsarraytouseinbothstoredefs.
  40. varfields=[
  41. {name:'name',mapping:'name'},
  42. {name:'column1',mapping:'column1'},
  43. {name:'column2',mapping:'column2'}
  44. ];
  46. //createthedatastore
  47. varfirstGridStore=newExt.data.JsonStore({
  48. fields:fields,
  49. data:myData,
  50. root:'records'
  51. });
  54. //ColumnModelshortcutarray
  55. varcols=[
  56. {id:'name',header:"列名称",
  57. //width:160,
  58. sortable:true,
  59. dataIndex:'name'
  60. }//,
  61. //{header:"column1",width:50,sortable:true,dataIndex:'column1'},
  62. //{header:"column2",width:50,sortable:true,dataIndex:'column2'}
  63. ];
  65. //declarethesourceGrid
  66. varfirstGrid=newExt.grid.GridPanel({
  67. ddGroup:'secondGridDDGroup',
  68. store:firstGridStore,
  69. columns:cols,
  70. enableDragDrop:true,
  71. stripeRows:true,
  72. autoExpandColumn:'name',
  73. //width:325,
  74. height:272,
  75. columnWidth:0.4,
  76. //region:'west',
  77. title:'待选择列'
  78. });
  80. varsecondGridStore=newExt.data.JsonStore({
  81. fields:fields,
  82. root:'records'
  83. });
  85. //createthedestinationGrid
  86. varsecondGrid=newExt.grid.GridPanel({
  87. ddGroup:'firstGridDDGroup',
  88. store:secondGridStore,
  89. columns:cols,
  90. enableDragDrop:true,
  91. stripeRows:true,
  92. autoExpandColumn:'name',
  93. height:272,
  94. columnWidth:0.4,
  95. title:'已选择列'
  96. });
  98. varlrPanel={
  99. columnWidth:0.1,
  100. height:300,
  102. items:[
  103. newExt.Button({
  104. text:">",
  105. style:'margin:70px0px0px15px',
  106. handler:function(){
  107. if(firstGrid.getSelectionModel().hasSelection())
  108. {
  109. //数据行数
  110. vartotal=secondGridStore.getCount();
  111. varrecords=firstGrid.getSelectionModel().getSelections();
  112. for(vari=0;i<records.length;i++){
  113. varrecord=records[i];
  114. firstGridStore.remove(record);
  115. secondGridStore.insert(total+i,record);
  116. }
  117. }
  118. }
  119. }),
  120. newExt.Button({
  121. text:">>",
  122. style:'margin:15px0px0px15px',
  123. handler:function(){
  124. //数据行数
  125. vartotal=secondGridStore.getCount();
  126. vari=0;
  127. while(firstGridStore.getCount()>0)
  128. {
  129. varrecord=firstGridStore.getAt(0);
  130. firstGridStore.remove(record);
  131. secondGridStore.insert(total+i,record);
  132. i++;
  133. }
  134. }
  135. }),
  136. newExt.Button({
  137. text:"<",
  138. style:'margin:15px0px0px15px',
  139. handler:function(){
  140. if(secondGrid.getSelectionModel().hasSelection())
  141. {
  142. //数据行数
  143. vartotal=firstGridStore.getCount();
  144. varrecords=secondGrid.getSelectionModel().getSelections();
  145. for(vari=0;i<records.length;i++){
  146. varrecord=records[i];
  147. secondGridStore.remove(record);
  148. firstGridStore.insert(total+i,record);
  149. }
  150. }
  151. }
  152. }),
  153. newExt.Button({
  154. text:"<<",
  155. style:'margin:15px0px0px15px',
  156. handler:function(){
  157. //数据行数
  158. vartotal=firstGridStore.getCount();
  159. vari=0;
  160. while(secondGridStore.getCount()>0)
  161. {
  162. varrecord=secondGridStore.getAt(0);
  163. secondGridStore.remove(record);
  164. firstGridStore.insert(total+i,record);
  165. i++;
  166. }
  167. }
  168. })
  169. ]
  170. };
  172. varudPanel={
  173. columnWidth:0.1,
  174. height:300,
  175. items:[
  176. newExt.Button({
  177. text:"向上",
  178. style:'margin:90px0px0px10px',
  179. handler:function(){
  180. if(secondGrid.getSelectionModel().hasSelection())
  181. {
  182. varrecord=secondGrid.getSelectionModel().getSelected();
  183. //数据行数
  184. vartotal=secondGridStore.getCount();
  185. for(vari=0;i<total-1;i++){
  186. vartemp=secondGridStore.getAt(i);
  187. if(temp.get('name')==record.get('name'))
  188. {
  189. break;
  190. }
  191. varnext=secondGridStore.getAt(i+1);
  192. if(next.get('name')==record.get('name'))
  193. {
  194. secondGridStore.remove(next);
  195. secondGridStore.insert(i,next);
  196. }
  197. }
  198. }
  199. }
  200. }),
  201. newExt.Button({
  202. text:"向下",
  203. style:'margin:15px0px0px10px',
  204. handler:function(){
  205. if(secondGrid.getSelectionModel().hasSelection())
  206. {
  207. varrecord=secondGrid.getSelectionModel().getSelected();
  208. //数据行数
  209. vartotal=secondGridStore.getCount();
  210. for(vari=0;i<total-1;i++){
  211. varnext=secondGridStore.getAt(i);
  212. if(next.get('name')==record.get('name'))
  213. {
  214. secondGridStore.remove(next);
  215. secondGridStore.insert(i+1,next);
  216. }
  217. }
  218. }
  219. }
  220. })
  221. ]
  222. };
  225. //Simple'borderlayout'paneltohousebothgrids
  226. vardisplayPanel=newExt.Panel({
  227. width:650,
  228. height:300,
  229. //layout:'border',
  230. layout:'column',
  231. renderTo:'panel',
  232. items:[
  233. firstGrid,
  234. lrPanel,
  235. secondGrid,
  236. udPanel
  237. ],
  238. bbar:[
  239. '->',//Fill
  240. {
  241. text:'确定',
  242. handler:function(){
  243. //数据行数
  244. vartotal=secondGridStore.getCount();
  245. varresults="";
  246. if(total>0)
  247. {
  248. for(vari=0;i<total;i++)
  249. {
  250. varrecord=secondGridStore.getAt(i);
  251. results+=record.get("name")+",";
  252. }
  253. results=results.substring(0,results.length-1);
  254. }
  255. alert("选择的列名称："+results);
  256. }
  257. },
  258. {
  259. text:'重置',
  260. handler:function(){
  261. //refreshsourcegrid
  262. firstGridStore.loadData(myData);
  264. //purgedestinationgrid
  265. secondGridStore.removeAll();
  266. }
  267. }
  268. ]
  269. });
  271. //usedtoaddrecordstothedestinationstores
  272. varblankRecord=Ext.data.Record.create(fields);
  274. /****
  275. *SetupDropTargets
  276. ***/
  277. //Thiswillmakesureweonlydroptotheviewcontainer
  278. varfirstGridDropTargetEl=firstGrid.getView().el.dom.childNodes[0].childNodes[1];
  279. varfirstGridDropTarget=newExt.dd.DropTarget(firstGridDropTargetEl,{
  280. ddGroup:'firstGridDDGroup',
  281. copy:true,
  282. notifyDrop:function(ddSource,e,data){
  284. //Genericfunctiontoaddrecords.
  285. functionaddRow(record,index,allItems){
  287. //Searchforduplicates
  288. varfoundItem=firstGridStore.find('name',record.data.name);
  289. //ifnotfound
  290. if(foundItem==-1){
  291. firstGridStore.add(record);
  293. //Callasortdynamically
  294. //firstGridStore.sort('name','ASC');
  296. //RemoveRecordfromthesource
  297. ddSource.grid.store.remove(record);
  298. }
  299. }
  301. //Loopthroughtheselections
  302. Ext.each(ddSource.dragData.selections,addRow);
  303. return(true);
  304. }
  305. });
  308. //Thiswillmakesureweonlydroptotheviewcontainer
  309. varsecondGridDropTargetEl=secondGrid.getView().el.dom.childNodes[0].childNodes[1]
  311. vardestGridDropTarget=newExt.dd.DropTarget(secondGridDropTargetEl,{
  312. ddGroup:'secondGridDDGroup',
  313. copy:false,
  314. notifyDrop:function(ddSource,e,data){
  316. //Genericfunctiontoaddrecords.
  317. functionaddRow(record,index,allItems){
  319. //Searchforduplicates
  320. varfoundItem=secondGridStore.find('name',record.data.name);
  321. //ifnotfound
  322. if(foundItem==-1){
  323. secondGridStore.add(record);
  324. //Callasortdynamically
  325. //secondGridStore.sort('name','ASC');
  327. //RemoveRecordfromthesource
  328. ddSource.grid.store.remove(record);
  329. }
  330. }
  331. //Loopthroughtheselections
  332. Ext.each(ddSource.dragData.selections,addRow);
  333. return(true);
  334. }
  335. });
  336. });
分享到：
| @ModelAttribute跟@SessionAttributes
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DBGridPro new

    For example, you can specify the color, style, and font for every element of the grid, define the type and style of lines. Enforcing application look and feel standards is much easier using the ...

    AJAX and PHP.pdf

    into websites, such as real-time data validation, drag-and-drop, and other tasks that weren't traditionally associated with web applications. Although the AJAX ingredients are mature (the ...

    BCGControlBarPro.v12.00

    BCGPGridExample: added new visual managers and new 2 tabs: "Drag and Drop" and "Easy Input" BCGPIE7Demo: the tab control was fully redesigned and derived from the library MDI Tab control. ...

    plsqldev12.0.6.1832x32主程序+ v12中文包+keygen

    Double-click on an item to paste the text in the cursor location of the current editor or drag & drop it to a specific location in an editor. You can use the editor preferences to configure when and...

    plsqldev12.0.6.1832x64主程序+ v12中文包+keygen

    Double-click on an item to paste the text in the cursor location of the current editor or drag & drop it to a specific location in an editor. You can use the editor preferences to configure when and...

    PLSQL.Developer(X32) v12.0.1.1814主程序+ v11中文包+keygen

    Double-click on an item to paste the text in the cursor location of the current editor or drag & drop it to a specific location in an editor. You can use the editor preferences to configure when and ...

    plsqldev12.0.4.1826x32主程序+ v12中文包+keygen

    Double-click on an item to paste the text in the cursor location of the current editor or drag & drop it to a specific location in an editor. You can use the editor preferences to configure when and...

    PLSQL.Developer(X64) v12.0.1.1814 主程序+ v11中文包+keygen

    Double-click on an item to paste the text in the cursor location of the current editor or drag & drop it to a specific location in an editor. You can use the editor preferences to configure when and ...

    plsqldev12.0.4.1826x64主程序+ v12中文包+keygen

    Double-click on an item to paste the text in the cursor location of the current editor or drag & drop it to a specific location in an editor. You can use the editor preferences to configure when and...

    Android代码-可拖动网格

    An Android ViewGroup that implements a paged grid with drag'n'drop movable items Supports Android 2.2 (API 8) and up Tested on a Nexus One, Galaxy Nexus and a Nexus 7 Example video: v0.1 : ...

    VB编程资源大全（英文源码 其它）

    convertbase.zip VB has built in functions for converting from decimal to Hex and Octal, but nothing for converting from Octal and Hex to decimal (correct us if we are wrong), or from binary to ...

    DevExpress VCL 12.2.6(v2012vol2.6) 源码-例子-帮助-part1

    Q495393 - Card View - Moving a row within a card using drag and drop scrolls the card content up to the first visible row and hides this row under the card bottom edge in certain cases Q487880 - ...

    DevExpress VCL 12.2.6(v2012vol2.6) 源码-例子-帮助-part2

    Q495393 - Card View - Moving a row within a card using drag and drop scrolls the card content up to the first visible row and hides this row under the card bottom edge in certain cases Q487880 - ...

    Visual C++ 编程资源大全（英文源码 控件）

    filedroplistctrl.zip This article explains how to support file drag and drop in your CWnd-derived object(40KB)&lt;END&gt;&lt;br&gt;83,DrivePickerList.zip A control that shows drive names and icons like ...

    WPTools.v6.29.1.Pro

    We recommend to use TMS components to create modern user interfaces, toolbars and ribbons. 19.2.2013 - WPTools 6.29.1 - fix in rtf writing code to solve problem with merged cells - fix possible range...

    Visual C++ 编程资源大全（英文源码 表单）

    (71KB)&lt;END&gt;&lt;br&gt;86,step0.zip A series of articles that resulted from experimenting with adding Drag and Drop features to my existing application. (16KB)&lt;END&gt;&lt;br&gt;87,undo.zip Easily add Undo/Redo ...

    Developing Flex Applications 910p dda_doc88_cracker.zip

    Separating ActionScript from MXML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 About the Flex development environment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...

Magicbox
Global site tag (gtag.js) - Google Analytics