@@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="table" wq-data="{height: 313, url:'../../json/table/demo1.json'}" wq-filter="demoEvent">
                    <thead>
                        <tr>
                            <th wq-data="{field:'id', width:80}">ID</th>
                            <th wq-data="{field:'username', width:80}">用户名</th>
                            <th wq-data="{field:'sign', width:'50%', event: 'setSign', style:'cursor: pointer;'}">签名</th>
                            <th wq-data="{field:'experience'}">积分</th>
                            <th wq-data="{field:'score'}">评分</th>
                        </tr>
                    </thead>
                </table>
                <script>
                    //监听单元格事件
                    table.on('tool(demoEvent)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'setSign') {
                            wqDialog.prompt({
                                formType: 2,
                                title: '修改 ID 为 [' + data.id + '] 的用户签名',
                                value: data.sign
                            }, function (value, index) {
                                wqDialog.close(index);

                                //这里一般是发送修改的Ajax请求

                                //同步更新表格和缓存对应的值
                                obj.update({
                                    sign: value
                                });
                            });
                        }
                    });
                    table.init();
                </script>
            </div>
            @@include("../_include/foot.html")
        </div>
    </div>
</div>