backbase How to keep the order for every column after drag

 

How to keep the order for every column after drag it (columns position has changed it should keep the last changed position after refreshed it)!

B:listgrid和b:datagrid内建不支持状态保存，如果要实现跨浏览器刷新的状态保存，与问题9同理，只要手动纪录状态在cookie中，并在construct事件触发的时候根据上次保存的cookie来作相应操作。 <o:p></o:p>

想得知列被拖动的结果，对于b:listgrid,可以响应b: b:listgridheadcell的drag-drop事件；对于b:datagrid,可以响应b:datagridheadcell的drag-drop事件。在列被改变位置之后可以把新的位置记录到cookie里面。在页面刷新的时候，construct事件会被触发，在这时候检测cookie中保存的位置，并把列重新排列。示例代码如下：

xml 代码

1.   
2. <b:datagrid id="datagrid1" style="height:300px;" b:template="datagrid.xsl" b:url="datagrid-datasource.xml" b:page-number="1" b:page-size="20" b:page-cache="3" b:items-in-total="1000">  
3.    <b:datagridhead>  
4.       <b:datagridrow>  
5.          <b:datagridheadcell />  
6.        
7.          <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Titleb:datagridheadcell>  
8.          <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Directorb:datagridheadcell>  
9.          <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Genreb:datagridheadcell>  
10.          <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Languageb:datagridheadcell>  
11.          <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Premiereb:datagridheadcell>  
12.       b:datagridrow>  
13.    b:datagridhead>  
14.    <b:datagridbody />  
15.      
16.    <s:event b:on="construct">  
17.     <s:super/>  
18.       
19.     <s:with b:target="b:datagridhead/b:datagridrow/b:datagridheadcell">  
20.         <s:variable b:name="posOld" b:select="position()" b:scope="local" />  
21.         
22.         <s:variable b:name="posNew" b:select="number(cookie(concat('datagrid1-',text())))" b:scope="local" />  
23.         
24.         <s:task b:action="trigger" b:event="move-column" b:target="id('datagrid1')" b:test="$posNew"/>  
25.     s:with>  
26.    s:event>  
27.       
28.      
29.     <s:task b:action="move" b:source="b:datagridhead/b:datagridrow/b:datagridheadcell[$posOld]"    
30.         b:destination="b:datagridhead/b:datagridrow/b:datagridheadcell[$posNew]" b:mode="after" b:test="$posOld lt $posNew"/>  
31.       
32.     <s:task b:action="move" b:source="b:datagridhead/b:datagridrow/b:datagridheadcell[$posOld]"    
33.         b:destination="b:datagridhead/b:datagridrow/b:datagridheadcell[$posNew]" b:mode="before" b:test="$posOld gt $posNew"/>     
34.        
35.       
36.     <s:script>  
37. <s:behavior b:name="my-b-datagrid-headcell" b:behavior="b-datagridheadcell">  
38.     <s:event b:on="drag-drop">  
39.           
40.         <s:super/>  
41.           
42.         <s:task b:action="setcookie" b:name="{'datagrid1-',text()}" b:value="{position()}" b:days="100" />  
43.     s:event>  
44. s:behavior>  
45.