magix-components/tmpl/mx-checkbox/__test__/storestate.html

magix组件

<h2>mx-checkbox</h2>
<div class="pt20 clearfix">
    <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="mx-pagination/index"
                    total="<%@100%>"
                    step="3"
                    page="<%@list1Page%>"
                    size="<%@list1Size%>"
                    mx-change="chageList1()"
                    style="height:60px;" />
            </tr>
        </tfoot>
    </table>

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

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

&lt;div class="clearfix"&gt;
    &lt;button class="fr mt5 btn btn-brand" mx-click="showEx1()"&gt;显示选中的checkbox&lt;/button&gt;
&lt;/div&gt;</pre>
<div class="pt10">Javascript Code:</div>
    <pre>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 &lt; 100; j++) {
            let temp = {
                id: j
            };
            for (let i = 0; i &lt; 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&lt;change&gt;' (e) {
        let me = this;
        me.$list1Page = e.page;
        me.$list1Size = e.size;
        me.render();
    },
    'showEx1&lt;click&gt;' () {
        let list = this.getStoreState('example1');
        if (list.length) {
            this.gtipRT('选中的值：' + list.join(','));
        } else {
            this.gtipRT('请选择checkbox');
        }
    }
});</pre>
</div>