30 分钟掌握无刷新 Repeater(4)


<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 元素, 示例:

复制代码 代码如下:


<ItemTemplate>
<tr>
<td>
<input type="checkbox"
je-checked="selected"
je-onclick="toggleselect"
/>&nbsp;#{id}
</td>
</tr>
</ItemTemplate>


在 FilterTemplate 中可以使用 je-selected="<搜索字段名>[,<匹配值>]" 来初始化处于选中状态的 option, 示例:

复制代码 代码如下:


<FilterTemplate>
<tr>
<td>
<select je-id="type">
<option je-selected="type,'normal'">正常</option>
<option je-selected="type,'high'">高</option>
<option je-selected="type,'low'">低</option>
</select>
</td>
</tr>
</FilterTemplate>


je-value

在 FilterTemplate 中使用 je-value="<搜索字段名>" 来绑定初始化的搜索条件.

je-<jQueryUI 插件名>

可以在任何模板中使用 je-<jQueryUI 插件名>="<属性名n>=<属性值n>;", 来生成一个 jQueryUI 的插件, 但目前仅支持 je-button 和 je-datepicker, 示例:

复制代码 代码如下:


<EditItemTemplate>
<tr je-class="{state}-item">
<td>
<input type="checkbox" je-checked="selected" je-onclick="toggleselect" />&nbsp;#{id}
</td>
<td>
<input type="text" je-id="realname" value="#{realname}" />
</td>
<td>
<input type="text" je-id="age" value="#{age}" />
</td>
<td>
<input type="text" je-id="birthday"
je-datepicker="dateFormat='yy-mm-dd';"
value="#{birthday}" />
</td>
<td>
<span
je-button="label='编辑';icons={ primary: 'ui-icon-pencil' };"
je-onclick="beginedit">
</span>
<span
je-button="label='删除';icons={ primary: 'ui-icon-trash' };"
je-onclick="remove">
</span>
</td>
</tr>
</EditItemTemplate>


属性的设置是和 jQueryUI 插件的属性一致的, 可以参考

je-template

使用 je-template="<模板名>" 可以标记将作为模板的元素, 除了可以通过上面所讲的各种 Template, 也可以使用这种方法来设置模板, 示例:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjjwsp.html