@@include("../_include/head.html")
<div class="wqFrame">
    @@include("../_include/nav.html")
    <div class="wqFrame-main">
        @@include("../_include/leftmenu.html")
        <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="table" wq-data="{url:'../../json/table/demo1.json', id:'test3'}" wq-filter="test3">
                    <thead>
                        <tr>
                            <th wq-data="{type:'checkbox'}">ID</th>
                            <th wq-data="{field:'id', width:80, sort: true}">ID</th>
                            <th wq-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
                            <th wq-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th>
                            <th wq-data="{field:'sex', width:80, edit: 'text'}">性别</th>
                            <th wq-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>
                            <th wq-data="{field:'experience', sort: true, edit: 'text'}">积分</th>
                        </tr>
                    </thead>
                </table>
                <script>
                    var table = window.table;
                    //监听单元格编辑
                    table.on('edit(test3)', function (obj) {
                        var value = obj.value, //得到修改后的值

                            data = obj.data, //得到所在行所有键值

                            field = obj.field; //得到字段
                        wqDialog.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
                    });

                    table.init();
                </script>
            </div>
            @@include("../_include/foot.html")
        </div>
    </div>
</div>