mx-dropdown

单选

周一 周三 周四 周五 周六 周一 周三 周四 周五 周六 周一 周三 周四 周五 周六
HTML Code:
<mx-view
    path="app/gallery/mx-dropdown/index"
    searchbox="true"
    empty-text="请选择日期"
    mx-change="showWeek()"
    class="fl" style="width:150px;">
    <item value="mon">周一</item>
    <item value="wed">周三</item>
    <item value="thu">周四</item>
    <item value="fri">周五</item>
    <item value="sat">周六</item>
</mx-view>
Javascript Code:
let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showWeek<change>' (e) {
        this.gtipRB('text:' + e.text + ',value:' + e.value);
    }
});

单选带分组

本周日期 周一 周三 周四 周五 周六 下周日期 下周一 下周三 下周四 下周五 下周六
HTML Code:
<mx-view
    path="app/gallery/mx-dropdown/index"
    searchbox="true"
    empty-text="请选择日期"
    mx-change="showWeek()"
    class="fl" style="width:150px;">
    <item group="true">本周日期</item>
    <item value="mon">周一</item>
    <item value="wed">周三</item>
    <item value="thu">周四</item>
    <item value="fri">周五</item>
    <item value="sat">周六</item>
    <item group="true">下周日期</item>
    <item value="next-mon">下周一</item>
    <item value="next-wed">下周三</item>
    <item value="next-thu">下周四</item>
    <item value="next-fri">下周五</item>
    <item value="next-sat">下周六</item>
</mx-view>
Javascript Code:
let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showWeek<change>' (e) {
        this.gtipRB('text:' + e.text + ',value:' + e.value);
    }
});

动态数据并设置选中

HTML Code:
<mx-view
    path="app/gallery/mx-dropdown/index"
    searchbox="true"
    empty-text="请选择用户"
    text-key="name"
    value-key="id"
    selected="<%@ userSelected %>"
    list="<%@ userList %>"
    mx-change="showUser()"
    class="fl" style="width:200px;">
</mx-view>
Javascript Code:
let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest({
            userList: [{
                name: 'xinglie',
                id: 58782
            }, {
                name: 'xinglie1',
                id: 587821
            }, {
                name: 'xinglie2',
                id: 587822
            }, {
                name: 'xinglie3',
                id: 587823
            }, {
                name: 'xinglie4',
                id: 587824
            }, {
                name: 'xinglie5',
                id: 587825
            }, {
                name: 'xinglie6',
                id: 587826
            }, {
                name: 'xinglie7',
                id: 587827
            }, {
                name: 'xinglie8',
                id: 587828
            }, {
                name: 'xinglie9',
                id: 587829
            }],
            userSelected: 587828
        });
    },
    'showUser<change>' (e) {
        this.gtipRB('name:' + e.text + ',id:' + e.value);
    }
});

多选

周一 周三 周四 周五 周六
HTML Code:
<mx-view
    path="app/gallery/mx-dropdown/multiple"
    searchbox="true"
    empty-text="请选择日期"
    mx-change="showWeeks()"
    class="fl" style="width:150px;">
    <item value="mon">周一</item>
    <item value="wed">周三</item>
    <item value="thu">周四</item>
    <item value="fri">周五</item>
    <item value="sat">周六</item>
</mx-view>
Javascript Code:
let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showWeeks<change>' (e) {
        this.gtipRB('values:' + e.values);
    }
});

多选带分组

本周日期 周一 周三 周四 周五 周六 下周日期 下周一 下周三 下周四 下周五 下周六
HTML Code:
<mx-view
    path="app/gallery/mx-dropdown/multiple"
    searchbox="true"
    empty-text="请选择日期"
    mx-change="showWeeks()"
    class="fl" style="width:150px;">
    <item group="true">本周日期</item>
    <item value="mon">周一</item>
    <item value="wed">周三</item>
    <item value="thu">周四</item>
    <item value="fri">周五</item>
    <item value="sat">周六</item>
    <item group="true">下周日期</item>
    <item value="next-mon">下周一</item>
    <item value="next-wed">下周三</item>
    <item value="next-thu">下周四</item>
    <item value="next-fri">下周五</item>
    <item value="next-sat">下周六</item>
</mx-view>
Javascript Code:
let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showWeeks<change>' (e) {
        this.gtipRB('values:' + e.values);
    }
});

动态数据并设置选中

HTML Code:
<mx-view
    path="app/gallery/mx-dropdown/multiple"
    searchbox="true"
    empty-text="请选择用户"
    text-key="name"
    value-key="id"
    selected="<%@ usersSelected %>"
    list="<%@ userList %>"
    mx-change="showUsers()"
    class="fl" style="width:200px;">
</mx-view>
Javascript Code:
let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest({
            userList: [{
                name: 'xinglie',
                id: 58782
            }, {
                name: 'xinglie1',
                id: 587821
            }, {
                name: 'xinglie2',
                id: 587822
            }, {
                name: 'xinglie3',
                id: 587823
            }, {
                name: 'xinglie4',
                id: 587824
            }, {
                name: 'xinglie5',
                id: 587825
            }, {
                name: 'xinglie6',
                id: 587826
            }, {
                name: 'xinglie7',
                id: 587827
            }, {
                name: 'xinglie8',
                id: 587828
            }, {
                name: 'xinglie9',
                id: 587829
            }],
            usersSelected: [58782,587829]
        });
    },
    'showUsers<change>' (e) {
        this.gtipRB('user ids:' + e.values);
    }
});