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 代碼

<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">
   <b:datagridhead>
      <b:datagridrow>
         <b:datagridheadcell />

         <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Titleb:datagridheadcell>
         <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Directorb:datagridheadcell>
         <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Genreb:datagridheadcell>
         <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Languageb:datagridheadcell>
         <b:datagridheadcell b:behavior="my-b-datagrid-headcell">Premiereb:datagridheadcell>
      b:datagridrow>
   b:datagridhead>
   <b:datagridbody />

   <s:event b:on="construct">
    <s:super/>

    <s:with b:target="b:datagridhead/b:datagridrow/b:datagridheadcell">
        <s:variable b:name="posOld" b:select="position()" b:scope="local" />

        <s:variable b:name="posNew" b:select="number(cookie(concat('datagrid1-',text())))" b:scope="local" />

        <s:task b:action="trigger" b:event="move-column" b:target="id('datagrid1')" b:test="$posNew"/>
    s:with>
   s:event>


    <s:task b:action="move" b:source="b:datagridhead/b:datagridrow/b:datagridheadcell[$posOld]"
        b:destination="b:datagridhead/b:datagridrow/b:datagridheadcell[$posNew]" b:mode="after" b:test="$posOld lt $posNew"/>

    <s:task b:action="move" b:source="b:datagridhead/b:datagridrow/b:datagridheadcell[$posOld]"
        b:destination="b:datagridhead/b:datagridrow/b:datagridheadcell[$posNew]" b:mode="before" b:test="$posOld gt $posNew"/>


    <s:script>
<s:behavior b:name="my-b-datagrid-headcell" b:behavior="b-datagridheadcell">
    <s:event b:on="drag-drop">

        <s:super/>

        <s:task b:action="setcookie" b:name="{'datagrid1-',text()}" b:value="{position()}" b:days="100" />
    s:event>
s:behavior>