@@include("../_include/head.html")
<div class="wqFrame">
    @@include("../_include/nav.html")
    <div class="wqFrame-main">
        @@include("../_include/leftmenu.html")
        <style>
            body {
                overflow-y: scroll;
            }
        </style>
        <div class="wqFrame-panelRight">
            <div class="wqFrameui-panelRight-topNav">
                <a class="pull-left wqFrameui-backUp" href="index.html">
                    <span class="wqIcon-backUp"></span>返回上一页
                </a>加入表单元素
            </div>
            <div class="wqFrameui-panelRight-mainWrap mCustomScrollbar" data-mcs-theme="dark-thin">
                <table class="hide" id="demo"></table>
                <script type="text/html" id="switchTpl">
                    <!-- 这里的 checked 的状态只是演示 -->
                    <label class="checkbox"><input type="checkbox" name="sex" value="{{d.id}}" wq-skin="switch" wq-text="女|男" wq-filter="sexDemo" {{d.id == 10003 ? 'checked' : ''}}><span class="wqFrameui-checkStatus wqIcon-checkBox"></label>
                </script>
                <script type="text/html" id="checkboxTpl">
                    <!-- 这里的 checked 的状态只是演示 -->
                    <label class="checkbox"><input type="checkbox" name="lock" value="{{d.id}}" title="锁定" wq-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}><span class="wqFrameui-checkStatus wqIcon-checkBox"></label>
                </script>
                <script>
                    table.render({
                        elem: '#demo',
                        url: '../../json/table/demo1.json',
                        cellMinWidth: 80,
                        cols: [
                            [{
                                type: 'numbers'
                            }, {
                                type: 'checkbox'
                            }, {
                                field: 'id',
                                title: 'ID',
                                width: 100,
                                unresize: true,
                                sort: true
                            }, {
                                field: 'username',
                                title: '用户名',
                                templet: '#usernameTpl'
                            }, {
                                field: 'city',
                                title: '城市'
                            }, {
                                field: 'wealth',
                                title: '财富',
                                minWidth: 120,
                                sort: true
                            }, {
                                field: 'sex',
                                title: '性别',
                                width: 85,
                                templet: '#switchTpl',
                                unresize: true
                            }, {
                                field: 'lock',
                                title: '是否锁定',
                                width: 110,
                                templet: '#checkboxTpl',
                                unresize: true
                            }]
                        ],
                        page: true
                    });
                    //监听性别操作
                    form.on('switch(sexDemo)', function (obj) {
                        wqDialog.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
                    });

                    //监听锁定操作
                    form.on('checkbox(lockDemo)', function (obj) {
                        wqDialog.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
                    });
                </script>
            </div>
            @@include("../_include/foot.html")
        </div>
    </div>
</div>