jQueryUI Repeater 以不同色彩显示各种状态的行 - JQueryElement [8]
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>
我们在 ul 元素的 class 属性中绑定样式为 &s:item, &s: 将根据当前行的状态, 替换为 unchanged-, inserted-, updated-, 因此我们只需要编写名称为 unchanged-item, inserted-item, updated-item 的样式即可. 对于删除后的行, 由于只能显示在 RemovedItemTemplate 中, 因此样式我们可以随便起个名字, 既然上面都是 -item, 这里我们就起 removed-item, 添加的样式如下:
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/ , 建议全屏观看.
