ZK----第七章 ZUML页面组件集之listbox、grid列表

列表：147
Listbox：列表，listItem：列表的行，listcell：列表的列，listhead：列表的标题行，listheader：列表标题行的列
属性：
<listbox multiple=””>：true----多选；false----单选
<listbox checkmark=””>：控制是否在listitem前显示一个checkbox或radio按钮
配合multiple，多选：显示checkbox按钮，单选：显示radio按钮
<listbox rows=””或height=””>：当定义了列表框的显示行或高，不能显示所有项目时，变为滚动，若将rows设置为0，listbox会将自身大小调整为显示所有项目
<listhead sizable=”true”>：列表头设为可变
Vflex：控制是否在垂直方向增长或缩小以适应指定空间（若指定了rows属性则该属性会被忽略）
maxlength：定义浏览器端可见最大字节数，设置该属性可将listbox变窄

循环形式生成(多列)列表：
<listbox id="userLbx"    model="@{userWin.userList}"
                    selectedItem="@{userWin.user}" onSelect="showUserEdit();"
                    fixedLayout="true" paginal="@{pagingUser}" >
           <listhead>
                <listheader label="用户名" align="center"></listheader>
                <listheader label="手机号" align="center"></listheader>
                <listheader label="分机号" align="center"></listheader>
                <listheader label="职位" align="center"></listheader>
            </listhead>
           <listitem self="@{each=user}">
                <listcell label="@{user.username}"></listcell>
                <listcell label="@{user.phone}"></listcell>
                <listcell label="@{user.exten}"></listcell>
                <listcell label="@{user.position}"></listcell>
      </listitem>
</listbox>
<paging id="pagingUser" pageSize="3"></paging> //像grid一样，可指定paging模型分页

定义形式生成(多列)列表：（2行，4列）
<listbox width=”250px” height=”20px”>
<listhead>
                <listheader label="用户名" align="center" sort=”auto”></listheader>
                <listheader label="手机号" align="center"   sort=”auto”></listheader>
                <listheader label="分机号" align="center" sort=”auto”></listheader>
                <listheader label="职位" align="center"    sort=”auto”></listheader>
            </listhead>

包含其他组件的列表：
<listbox width=”250px” height=”20px”>
<listhead>
                <listheader label="用户名" align="center" sort=”auto”></listheader>
                <listheader label="手机号" align="center"   sort=”auto”></listheader>
         </listhead>
<listitem id=”a” value=”A”>
  <listcell > <textbox value=”A.name” /> </listcell>
  <listcell label=”20%”/>
</listitem>
<listitem id=”b” value=”B”>
  <listcell > <checkbox label=”B.name” /> </listcell>
  <listcell > <button label=”23%”/> <listcell />
</listitem>
</listbox>
1、若使用grid更好，他们的外观类似，但listbox仅用于呈现可选项目的列表
2、若listbox包括可编辑的组件，如textbox和checkbox则会引起用户困惑，一个普遍问题是用户在一个未选中的项目内输入文本
3、由于浏览器限制，用户不能从文本框内选择一段文字

定义形式生成(单列)列表：（2行，1列）
<listbox>
<listitem label =”king” />
<listitem label =”华盛顿” />
</listbox>

下拉列表框：(通过指定select模型及单行可创建一个下拉列表，注意：不能指定多列)
<listbox mold=”select” rows=”1”> //rows=”1”：默认传递默认项的值
<listitem label =”king” />
<listitem label =”华盛顿” selected=”true” />
</listbox>

分页：
<paging id="pagingUser" pageSize="3"></paging> //像grid一样，可指定paging模型分页

排序：(支持列表项目对某一列排序)
方式一：将listheader的sort属性设为auto
方式二：自定义排序规则(重写sortAsceding或sortDescending任一比较器，指定其实例)
如：想基于列表项目的值排序，而不是列表元素的标签
<zscript>
  Comparator asc = new ListitemComarator(-1,true,true);
  Comparator dsc = new ListitemComarator(-1,false,true);
</zscript>
<listbox>
  <listhead>
   <listheader sortAscending=”${asc}” sortDescending=”${dsc}”/>

方式三：onSort事件
为listheader至少指派一个比较器，若用户点击它，onSort事件就被送至服务器，listheader实现了一个监听器来处理排序

实况数据（适用于listbox、grid）：
像grid，listbox支持live data，仅需要实现org.zkoss.zul.ListModel接口提供数据，不用直接操作listbox，优点：
易于使用不同试图显示相同的数据
Listbox仅在其可见时才会将数据发送至客户端，数据量大时可减少网络流量
实现实况数据步骤：
1、以ListModel形式准备好数据，ZK有一个org.zkoss.zul.SimpleListModel的实现，用于显示一个数值对象
2、实现org.zkoss.zul.ListitemRenderer接口用于将一个数据项目送至listbox的一个列
这是可选的，若指定，默认的渲染器（renderer）会启动，并将数据送至第一列
可实现不同的渲染器（renderer），这样可在不同的视图中显示相同的数据
3、 model属性中指定的数据，并可以选择在tiemRenderer属性指定渲染器（renderer）

例如：
<window title=”” border=”normal”>
<zscript>
  String[] data = new String[30];
  for(int j=0; j< data.length; ++j){
   data[j] = “option” + j;
  }
  ListModel strset = new SimpleListModel(data);
</zscript>

网格：128
Grid、columns、column、rows、row
Grid内可以声明columns定义header及column属性；还可以声明rows，使用rows组件可以声明一套row，即为grid元素的子组件。可在row元素内添加想要的内容，每个子元素为指定行的一列
<grid>
<columns>
  <column label=””/>
  <column label=””/>
</columns>
<rows>
  <row>
   <label value=””/>    //第1行第1列
   <textbox width=””/>   //第1行第2列
  </row>
  <row>
   <label value=””/>    //第2行第1列
   <hbox>      //第2行第2列
    <listbox rows=”1” mold=”select”>
     <listitem label=””/>
     <listitem label=””/>
    </listbox>
    <button label=””/>
   </hbox>
  </row>

</rows>
</grid>

多表头（嵌套表头）：
除了columns，可以使用auxhead和auxheader组件指定辅助表头，
辅助表头支持colspan和rowsspan属性，而列表头（column header）并不支持，但是辅助表头必须和column一起使用。
不同于column/columns仅可以为grid所用，auxhead/auxheader可以被用于grid、listbox、和tree
如下：
<grid>
<auxhead>
  <auxheader label=”第一级大表头1列” colspan=”6” />
  <auxheader label=”第一级大表头2列” colspan=”6” />
</auxhead>
<auxhead>
  <auxheader label=”第二级大表头1列” colspan=”3” />
  <auxheader label=”第二级大表头2列” colspan=”3” />
  <auxheader label=”第二级大表头3列” colspan=”3” />
  <auxheader label=”第二级大表头4列” colspan=”3” />
</auxhead>
<columns>
  <column label=”1”/> <column label=”2”/> <column label=”3”/>
  <column label=”4”/> <column label=”5”/> <column label=”6”/>
  <column label=”7”/> <column label=”8”/> <column label=”9”/>
  <column label=”10”/> <column label=”11”/> <column label=”12”/>
</columns>
<rows>
  ….
</rows>
</grid>

滚动网格：
当指定了height属性且没有足够的空间来显示数据时，grid会变为滚动的

可变列宽：
将columns的sizable属性设为true，用户可以通过拖动相邻列的边框来改变列宽

多内容数据的处理：
方式一：滚动（通过指定height属性实现）
方式二：分页（通过将mold属性设为paging实现）
<grid width=”300px” mold=”paging” pageSize=”4”>
<columns>
  <column label=””/>
  <column label=””/>
</columns>
<rows>
  <row>
   <label value=””/>    //第1行第1列
   <textbox width=””/>   //第1行第2列
  </row>
</rows>
</grid>
一旦设置为分页模式，grid将会创建paging组件的一个实例作为其子组件，然后它将会关注分页

属性：
pageSize：
paginal：如果将paging组件置于不同的位置或使用同一个paging组件控制两个或更多的grid，
  可以明确指明paginal属性。注意：如果没有明确指明，即同于paging属性
paging：其为一个用来呈现paging子组件(自动创建来处理分页)只读属性。如果你通过paginal
  属性指派了额外的分页，它的值将为空
Spans：为一个整数列表，以逗号分隔，用于控制是否将一个元素(cell)跨越几列。列表中的第一个数字表示第一个元素跨越的列数，第二个数字表示第二个元素跨越的列数，依次类推，若省略数字，则为1。
例子：（分页）
<vbox>
<paging id=”pg” pageSize=”4”/>
<hbox>
<grid width=”300px” mold=”paging” paginal=”${pg}”>
<columns>
  <column label=””/>
  <column label=””/>
</columns>
<rows>
  <row>
   <label value=””/>    //第1行第1列
   <textbox width=””/>   //第1行第2列
  </row>
</rows>
</grid>
<grid width=”300px” mold=”paging” paginal=”${pg}”>
<columns>
  <column label=””/>
  <column label=””/>
</columns>
<rows>
  <row>
   <label value=””/>    //第1行第1列
   <textbox width=””/>   //第1行第2列
  </row>
</rows>
</grid>
</hbox>
</vbox>

OnPaging事件及方法：
一旦用户点击了paging组件的分页数字，onPaging事件会被送至grid,onPaging方法会处理此事件，默认情况下，次方法或使rows内容无效，也就是刷新
如果想实现create-on-demand特性，可以为grid的onPaging事件添加一个事件监听器
Grid.addEventListener(org.zkoss.zul.event.ZulEvents.ON_PAGING, new MyListener());

排序：

实况数据：（和listbox一样）
<window title=”” border=”normal”>
<zscript>
  String[] data = new String[30];
  for(int j=0; j< data.length; ++j){
   data[j] = “option” + j;
  }
  ListModel strset = new SimpleListModel(data);
</zscript>

ZK----第七章 ZUML页面组件集之listbox、grid列表

猜你喜欢