普通表格

<div id="basicTable"></div>
<script type="text/javascript">
    cola(function(model) {
        var items = [];
        for (var row = 1; row <= 40; row++) {
            var item = {
                selected: Math.random() > 0.5,
                int: Math.round(Math.random() * 1000)
            };
            for (var col = 1; col <= 6; col++) {
                item["col" + col] = "item " + row + "," + col
            }
            items.push(item);
        }
        model.set("items", items);

        model.widgetConfig({
            basicTable: {
                $type: "table",
                bind: "item in items",
                showHeader: true,
                height: 300,
                columns: [{
                    $type: "select"
                }, {
                    caption: "组合列",
                    columns: [{
                        bind: ".col1",
                        caption: "文本1"
                    }, {
                        bind: ".col2",
                        caption: "文本2"
                    }]
                }, {
                    bind: ".col3",
                    caption: "文本3"
                }, {
                    bind: ".col4",
                    caption: "文本4"
                }, {
                    bind: ".int",
                    caption: "整数",
                    align: "right"
                }]
            }
        });
    });
</script>

模板和编辑器

通过模板我们可以自由的定义每一列单元格的渲染方式。 为了实现某个模板被同时使用在多个列上，在列模板内可以使用$default来代表当前列的属性。

Cola-UI内部还提供了几个预定义好的列模板。 比如input-column可以把某一列渲染成可编辑的列，checkbox-column可以把某一列渲染成带有复选框的形式。

<div id="templateTable">
    <template name="int-template">
        <div c-widget="input; bind:$default; class:fluid" c-class="error:$default>500"></div>
    </template>
    <template name="check-mark"><span c-style="display:$default?'':'none'"><i class="large green checkmark icon"></i></span>
    </template>
    <template name="operations">
        <div c-widget="button;caption:Del;class:red;size:mini;click:{{remove(item)}}"></div>
    </template>
</div>
<script type="text/javascript">
    cola(function(model) {
        var items = [];
        for (var row = 1; row <= 40; row++) {
            var item = {
                bool: Math.random() > 0.5,
                int: Math.round(Math.random() * 1000)
            };
            for (var col = 1; col <= 6; col++) {
                item["col" + col] = "item " + row + "," + col
            }
            items.push(item);
        }
        model.set("items", items);

        model.action({
            upper: function(s) {
                return (s) ? s.toUpperCase() : "";
            },
            remove: function(item) {
                item.remove();
            }
        });

        model.widgetConfig({
            templateTable: {
                $type: "table",
                bind: "item in items",
                showHeader: true,
                height: 300,
                renderRow: function(self, arg) {
                    $(arg.dom).click(function() {
                        alert(arg.item.get("int"))
                    })
                },
                columns: [{
                    caption: "图标",
                    bind: ".bool",
                    align: "center",
                    template: "check-mark",
                    width: 40
                }, {
                    caption: "转换大写",
                    bind: "upper(item.col1)"
                }, {
                    caption: "文本编辑",
                    bind: ".col2",
                    template: "input-column"
                }, {
                    caption: "控制Style",
                    bind: ".int",
                    align: "right",
                    template: "int-template"
                }, {
                    caption: "操作",
                    align: "center",
                    template: "operations"
                }]
            }
        });
    });
</script>

分页装载

当数据模型中设定pageSize前提下，结合pager控件可以获得分页装载数据的表格

<div c-widget="Pager; bind:pageItems">
    <a page-code="pages" class="item"></a>
</div>
<div id="pagingTable"></div>
<script type="text/javascript">
    cola(function(model) {
        model.describe("pageItems", {
            provider: {
                url: "/data/items",
                pageSize: 5
            }
        });

        model.widgetConfig({

            pagingTable: {
                $type: "table",
                bind: "item in pageItems",
                showHeader: true,
                currentPageOnly: true,
                height: 300,
                columns: [{
                    bind: ".id",
                    caption: "产品编号"
                }, {
                    bind: ".title",
                    caption: "产品名称"
                }, {
                    bind: ".originalPrice",
                    caption: "价格"
                }]
            }
        });
    });
</script>