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

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 ...

    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 ...

    Ext JS 6 By Example

    - Drag & Drop拖拽操作 - Tooltip提示框设置 - Popup弹窗对话框 7. **样式定制**： - Theme主题切换 - CSS3样式应用 - SASS预处理器集成 8. **性能优化**： - Lazy Loading懒加载技术 - Virtual Scrolling...

    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 ...

    老师整理的extjs学习笔记

    - **Drag and Drop (拖放)**: 支持常见的拖放功能。 - **Utilities (工具)**: 包括一系列辅助函数和工具类，如日期处理、动画效果等。 ##### 如何引用 为了在项目中使用 ExtJS，需要在 HTML 文件中通过 `&lt;script&gt;`...

    Selenium使用教程.pdf

    actions.dragAndDrop(source, target).perform(); ``` - **导航(Navigation and History)**: 导航至新的URL或返回上一页： ```java driver.navigate().to("http://www.example.com"); driver.navigate().back()...

    selenium-python.pdf

    actions.drag_and_drop(source, target).perform() ``` **3.4 在窗口与框架之间移动** 当页面包含多个窗口或框架时，可能需要在它们之间切换。Selenium 提供了相应的 API 来处理这种情况： ```python # 切换到...

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