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 来设置新建后和更新后的行的模板, 但可以用更简单的方法:

<ItemTemplate>
    <input type="hidden" id="&r:id" value="#:id" />
    <ul class="&s:item">
        <li>#:id</li><li>#:realname</li><li>#:age</li><li>#:skill</li>
        <li>
        <a href="#" onclick="!:beginedit">编辑</a>
        <a href="#" onclick="!:remove">删除</a>
        </li>
    </ul>
</ItemTemplate>

我们在 ul 元素的 class 属性中绑定样式为 &s:item, &s: 将根据当前行的状态, 替换为 unchanged-, inserted-, updated-, 因此我们只需要编写名称为 unchanged-item, inserted-item, updated-item 的样式即可. 对于删除后的行, 由于只能显示在 RemovedItemTemplate 中, 因此样式我们可以随便起个名字, 既然上面都是 -item, 这里我们就起 removed-item, 添加的样式如下:

<style type="text/css">
    .unchanged-item li
    {
        width: 60px;
    }
    .inserted-item li
    {
        width: 60px;
        color: #006600;
        font-weight: bold;
    }
    .updated-item li
    {
        width: 60px;
        font-weight: bold;
    }
    .removed-item li
    {
        width: 60px;
        background-color: Red;
        color: White;
    }
</style>

我们还编写了 RemovedItemTemplate 如下:

<RemovedItemTemplate>
    <ul class="removed-item">
        <li>#:id</li><li>#:realname</li><li>#:age</li><li>#:skill</li>
        <li>已经删除</li>
    </ul>
</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/ , 建议全屏观看.