backbase How to dynamically hide or display some columns

How to dynamically hide or display some columns (which is still keep its setting after refreshed it.)?

显示和隐藏某些列可以通过显示和隐藏相应的b:datagridheadcell来实现，例如：

<b:button>
    Hide the 3rd column
    <s:event b:on="command">
        <s:task b:action="hide" b:target="id('datagrid1')/b:datagridhead/b:datagridrow/b:datagridheadcell[3]"/>
    <!---->s:event>
<!---->b:button>
<b:button>
    Show the 3rd column
    <s:event b:on="command">
        <s:task b:action="show" b:target="id('datagrid1')/b:datagridhead/b:datagridrow/b:datagridheadcell[3]"/>
    <!---->s:event>
<!---->b:button>

 

 

B:listgrid和b:datagrid内置不支持状态保存。如果要在整个页面刷新之后保留住刷新之前的状态，可以手动纪录先前的状态到cookie中，待页面刷新的时候根据先前的状态显示或者隐藏某些列。上面的代码可以作如下更改来实现此功能：

xml 代码

<b:button>
    Hide the 3rd column
    <s:event b:on="command">
        <s:task b:action="hide" b:target="id('datagrid1')/b:datagridhead/b:datagridrow/b:datagridheadcell[3]"/>
        <!---->
        <s:task b:action="setcookie" b:name="{'datagrid1-hidden-column',3}" b:value="true" b:days="100" />
    <!---->s:event>
<!---->b:button>
<b:button>
    Show the 3rd column
    <s:event b:on="command">
        <s:task b:action="show" b:target="id('datagrid1')/b:datagridhead/b:datagridrow/b:datagridheadcell[3]"/>
        <!---->
        <s:task b:action="setcookie" b:name="{'datagrid1-hidden-column',3}" b:value="" b:days="100" />
    <!---->s:event>
<!---->b:button>

 

相应地，在datagrid1的construct事件中，检测每一个列在cookie中相应的隐藏状态来有选择地隐藏列：

xml 代码

<b:datagrid id="datagrid1"  … >
   <b:datagridhead>
      <b:datagridrow>
         <b:datagridheadcell />
         <b:datagridheadcell b:behavior="my-datagrid-headcell" b:datatype="text">Title<!---->b:datagridheadcell>
         <b:datagridheadcell b:behavior="my-datagrid-headcell" b:datatype="radio">Director<!---->b:datagridheadcell>
         <b:datagridheadcell b:behavior="my-datagrid-headcell" b:datatype="genre">Genre<!---->b:datagridheadcell>
         <b:datagridheadcell b:behavior="my-datagrid-headcell" b:datatype="checkbox">Language<!---->b:datagridheadcell>
         <b:datagridheadcell b:behavior="my-datagrid-headcell" b:datatype="datepicker" b:sorttype="string">Premiere<!---->b: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:task b:action="hide" b:test="cookie(concat('datagrid1-hidden-column',position()))='true'"/>
    <!---->s:with>
    <!---->s:event>

<!---->b:datagrid>

 

xml 代码