第七章 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>

<listitem  id=”a”  value=”A”>
  <listcell  label=”king”/>
  <listcell  label=”130002548”/>
  <listcell  label=”0751-224562”/>
  <listcell  label=”总经理”/>
</listitem>
<listitem  id=”b”  value=”B”>
  <listcell  label=”华盛顿”/>
  <listcell  label=”130002548”/>
  <listcell  label=”0751-224562”/>
  <listcell  label=”经理”/>
</listitem>
  </listbox>

 

包含其他组件的列表：
 <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&lt; data.length; ++j){
   data[j] = “option” + j;
  }
  ListModel  strset = new SimpleListModel(data);
 </zscript>

 <listbox  width=””  rows=”10”  model=”${strset}”>
  <listhead>
   <listheader  label=”循环加载实况数据” />
  </listhead>
 </listbox>
</window>

 

 

 

 

网格：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&lt; data.length; ++j){
   data[j] = “option” + j;
  }
  ListModel  strset = new SimpleListModel(data);
 </zscript>

 <grid  width=”100px”  height=”100px”  model=”${strset}”>
  <columns>
   <column  label=”循环加载实况数据” />
  </columns >
 </grid>
</window>