<table class="table table-striped">
    <thead>
        <tr>
            <th><input type="checkbox" class="checkbox" linkage="example1" /></th>
            <%for(var i=0;i<5;i++){%>
            <th>示例字段<%=i%></th>
            <%}%>
        </tr>
    </thead>
    <tbody>
        <%for(var i=0;i<list1.length;i++){%>
        <tr>
            <td><input type="checkbox" class="checkbox" linkage-parent="example1" value="<%=list1[i].id%>" /></td>
            <%for(var j=0;j<5;j++){%>
            <td><%=list1[i]['f'+j]%></td>
            <%}%>
        </tr>
        <%}%>
    </tbody>
    <tfoot>
        <tr>
            <mx-view
                tag="td"
                colspan="6"
                path="app/gallery/mx-pagination/index"
                total="<%@100%>"
                step="3"
                page="<%@list1Page%>"
                size="<%@list1Size%>"
                mx-change="chageList1()"/>
        </tr>
    </tfoot>
</table>

<div class="clearfix">
    <button class="fr mt5 btn btn-brand" mx-click="showEx1()">显示选中的checkbox</button>
</div>

let Magix = require('magix');
let Linkage = require('app/gallery/mx-chekcbox/linkage');
let GTip = require('app/gallery/mx-gtip/index');
let StoreState = require('app/gallery/mx-chekcbox/storestate');
module.exports = Magix.View.extend({
    tmpl: '@storestate.html',
    mixins: [Linkage, GTip, StoreState],
    init() {
        let list1 = [];
        for (let j = 0; j < 100; j++) {
            let temp = {
                id: j
            };
            for (let i = 0; i < 5; i++) {
                temp['f' + i] = '字段内容' + j + '_' + i;
            }
            list1.push(temp);
        }
        let me = this;
        me.$list1 = list1;
        me.$list1Page = 1;
        me.$list1Size = 10;
    },
    getList(type) {
        let me = this;
        let list = me['$' + type];
        let page = me['$' + type + 'Page'];
        let size = me['$' + type + 'Size'];
        return list.slice((page - 1) * size, page * size);
    },
    render() {
        let me = this;
        me.updater.digest({
            list1: me.getList('list1'),
            list1Page: me.$list1Page,
            list1Size: me.$list1Size
        });
    },
    'chageList1<change>' (e) {
        let me = this;
        me.$list1Page = e.page;
        me.$list1Size = e.size;
        me.render();
    },
    'showEx1<click>' () {
        let list = this.getStoreState('example1');
        if (list.length) {
            this.gtipRT('选中的值：' + list.join(','));
        } else {
            this.gtipRT('请选择checkbox');
        }
    }
});