<ItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
<td>
/* 编辑和删除按钮 */
</td>
</tr>
</ItemTemplate>
UpdatedItemTemplate/InsertedItemTemplate
与 ItemTemplate 不同的是, UpdatedItemTemplate 和 InsertedItemTemplate 分别用于显示状态为 updated 和 inserted 的行, 主要用于采用不同样式来显示不同状态的行, 但也可以使用更简便的 je-class 来完成同样的效果, 示例:
复制代码 代码如下:
<UpdatedItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
</tr>
</UpdatedItemTemplate>
<InsertedItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
</tr>
</InsertedItemTemplate>
RemovedItemTemplate
EditItemTemplate
FilterTemplate/NewItemTemplate
HeaderTemplate/FooterTemplate/EmptyTemplate
以上 4 项由于篇幅原因无法全部列出, 如有需要请参考:
特殊绑定
je-id
使用 je-id="<字段名>" 可以绑定特殊的 id, 可以使用在行模板或者 FilterTemplate, NewItemTemplate 中的 input 元素中. 在 EditItemTemplate 中, 被指定 je-id 的 input 将包含此字段的新值. 在 FilterTemplate 中, 指定 je-id 的 input 包含了用于搜索的字段的值, 这些字段应该包含在 FilterField 属性中. 在 NewItemTemplate 中, 指定 je-id 的 input 包含了用于新建的字段的值.
je-<javascript 事件名>
使用 je-<javascript 事件名>="<行为名>" 可以为事件绑定特殊的操作. 可以使用在各个模板中, 常用的行为有: beginedit 开始编辑, endedit 取消编辑, update 保存更新, remove 删除, toggleselect 切换选中状态, insert 新建, filter 搜索, togglesort 切换排序. 其中, 前 5 者只能用在行模板中, insert 可用在 NewItemTemplate 中, filter 可用在 FilterTemplate 中, togglesort 可用在 HeaderTemplate 中, 示例:
复制代码 代码如下:
<ItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
#{realname}
</td>
<td>
#{age}
</td>
<td>
<span je-onclick="beginedit">编辑</span>
<span je-onclick="remove">删除</span>
</td>
</tr>
</ItemTemplate>
<EditItemTemplate>
<tr>
<td>
#{id}
</td>
<td>
<input type="text" je-id="realname" value="#{realname}" />
</td>
<td>
<input type="text" je-id="age" value="#{age}" />
</td>
<td>
<span je-onclick="endedit">取消</span>
<span je-onclick="update">保存</span>
</td>
</tr>
</EditItemTemplate>
需要说明的是, togglesort 还需要指定一个参数, 表示切换排序的字段, 这个字段已经在 SortField 中设置, 比如: je-onclick="togglesort,realname".
je-class
使用 je-class="<样式>" 可以为事件绑定特殊的样式. 可以在各个模板中使用 je-class, 常用的样式有: {header} 表示 ui-widget-header, {active} 表示 ui-state-active, {highlight} 表示 ui-state-highlight, {disabled} 表示 ui-state-disabled, {error} 表示 ui-state-error, {default} 表示 ui-state-default, {state} 表示行状态, {sort} 表示排序状态, 示例:
复制代码 代码如下:
<HeaderTemplate>
<thead je-class="{header}">
<tr>
<td je-onclick="togglesort,id">
<span je-class="{sort,id,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}">
</span>
序号
</td>
/* ... */
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr je-class="{state}-item">
/* ... */
</tr>
</ItemTemplate>
这里需要说明 {state} 和 {sort} 的语法, 分别为 {state[,<未改变行样式>[,<新建行样式>[,<修改行样式>[,<删除行样式>]]]]}, {sort,<排序字段>[,<无排序样式>[,<升序样式>[,<降序样式>]]]}. 对于 {state} 而言, 如果没有指定某种状态的样式, 则将使用行的状态名称来代替样式名称, 比如: {state,,new-item}, 由于没有指定未改变行的样式, 因此如果行的状态为 unchanged, 那么将返回 unchanged. 对于 {sort} 而言, 如果没有指定某种排序的样式, 将采用排序的状态来代替样式名称.
je-checked/selected/readonly
在 ItemTemplate 中使用 je-checked="selected" 配合 je-onclick="toggleselect"来表示行是否处于选中的状态, je-selected 则可用于 EditItemTemplate 中的 select 元素, 示例:
复制代码 代码如下: