Repeater 的 3.1.2 版本增加了行状态, 因此可以为不同状态的行设置模板和样式.

在 3.1.2 版本中, 你不仅可以像之前的版本一样设置 EditItemTemplate 来表示编辑行的模板, 还可以设置 InsertedItemTemplate, UpdatedItemTemplate, RemovedItemTemplate 来分区显示新建后, 更新后, 删除后的行. 在没有设置这些模板时, 新建后, 更新后的行将默认使用 ItemTemplate 中的模板显示, 而删除后的行不显示. 删除后的行只有在设置 RemovedItemTemplate 后才会显示.

新建后的行将显示在所有行之前, 而如果删除后的行显示的话, 将显示在所有行之后.

由于这几次的示例都是在同一个页面上不断改进的, 所以不再对同一代吗重复解释, 如果大家有不明白的就参考下原有的文章吧, jQueryUI Repeater 无刷新获取分页数据 - JQueryElement [6], jQueryUI Repeater 无刷新删除 新建 更新数据 - JQueryElement [7].

虽然, 可以通过 InsertedItemTemplate 和 UpdatedItemTemplate 来设置新建后和更新后的行的模板, 但可以用更简单的方法:

 1 <ItemTemplate>
 2     <input type="hidden" id="&r:id" value="#:id" />
 3     <ul class="&s:item">
 4         <li>#:id</li><li>#:realname</li><li>#:age</li><li>#:skill</li>
 5         <li>
 6         <a href="#" onclick="!:beginedit">编辑</a>
 7         <a href="#" onclick="!:remove">删除</a>
 8         </li>
 9     </ul>
10 </ItemTemplate>

 1 <style type="text/css">
 2     .unchanged-item li
 3     {
 4         width: 60px;
 5     }
 6     .inserted-item li
 7     {
 8         width: 60px;
 9         color: #006600;
10         font-weight: bold;
11     }
12     .updated-item li
13     {
14         width: 60px;
15         font-weight: bold;
16     }
17     .removed-item li
18     {
19         width: 60px;
20         background-color: Red;
21         color: White;
22     }
23 </style>

我们还编写了 RemovedItemTemplate 如下:

1 <RemovedItemTemplate>
2     <ul class="removed-item">
3         <li>#:id</li><li>#:realname</li><li>#:age</li><li>#:skill</li>
4         <li>已经删除</li>
5     </ul>
6 </RemovedItemTemplate>

RemovedItemTemplate 只是简单的以样式 removed-item 显示行, 并去掉了编辑和删除两个按钮.

示例中还进行了其它的一些改动, 这里就不说了, 大家如果需要看可以下载示例代码.

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

目前 JQueryElement 最新版本为 3.1.2, 可以在上面的地址看到新版本改动的内容.

示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementTest.rar.

实际过程演示: http://www.tudou.com/programs/view/9oZLq6Vcs6M/ , 建议全屏观看.

作者: 麦丝平方 发表于 2011-08-29 19:41 原文链接