【LayUI】layui中如何對各單元格實時修改?

對單元格實時修改(這裏經常體現的就是排序,動態修改排序)

var tableId='treeTable';
    layui.config({base: '{ADMIN_PATH}'})
        .use(['table','jquery','layer'], function() {
            var $ = layui.jquery,
                table = layui.table,
                layer = layui.layer;//很重要

            var info = table.render({
                elem: '#' + tableId,
                url: "",
                title: '投票選項',
                toolbar: '#toolBar',
                defaultToolbar: ['filter', 'print', 'exports'],
                page: true,
                loading: true,
                limit: 20,
                limits: [20, 50, 100],
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'sort', width: 100, align: 'center', title: '排序',edit:'number'},                  
                    {field: 'number',width:120, title:'編號',align: 'center',sort:true,edit:'text'},                   
                    {field: 'title', minWidth:200, align: 'center', templet: function (d) {
                        return '<p style="line-height: 38px;">'+d.title+'<br>'+d.subtitle+'</p>';
                        }, title:'標題/副標題'}, 
                    {templet: '#vote-state', minWidth: 180, align: 'center', title: '操作',fixed:'right'}
                ]],
                done: function (res, curr, count) {
                    layer.closeAll('loading');
                }
            });
            //
            table.on('edit('+tableId+')',function (obj) {
                var data = obj.data;
                var field = obj.field;
                var item = {};
                item['id'] = data.id;
                item[field] = obj.value;//動態修改
                $.post("", {data:item}, function (res) {
                    if (res.type === 'success') {
                        layer.msg(res.message);
                        table.reload( tableId );
                    } else {
                        layer.msg(res.message);
                    }
                }, 'json');
                //
                console.log(obj.value); //得到修改後的值
                console.log(obj.field); //當前編輯的字段名
                console.log(obj.data); //所在行的所有相關數據
            });
         });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章