layui 表格点击后发送ajax，成功后改变页面的值。

先发送ajax，成功后通过jq来修改页面的值，并没有进去数据库中。

html代码

<table class="layui-hide" id="demo" lay-filter="demo"  ></table> 

View Code

js代码

<script type="text/javascript"> 
    layui.use('table', function () {
        var table = layui.table;

        //表格展示数据
        table.render({
            elem: '#demo'
            , cols: [[ //标题栏
                { field: 'ID', title: 'ID', width: 80, sort: true, hide:true }
                , { field: 'status', title: '状态', minwidth: 80, style:'color: #FF3030;' }
                , { field: 'Title', title: '标题', minwidth: 80 } 
                , { field: 'Creator', title: '发布人', minWidth: 60 }
                , {
                    field: 'CreateDate', title: '发布时间', minwidth: 180, templet: function (d) {
                        return d.CreateDate.toString().replace('T', ' ');
                }}
            ]]
            , data: tabledata
            , page: true //是否显示分页
            , limits: [5, 10, 20]
            , limit: 5 //每页默认显示的数量
        });
        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(demo)', function (obj) { 
            layer.open({//单击打开窗口
                type: 1
                , title: obj.data['Title'] 
                , area: ['500px', '300px']
                , scrollbar: false
                , anim: 0
                , content: obj.data['Message']
                , btn: ['我知道了', '关闭']
                , yes: function (index, layero) {//点击我知道了，发送请求修改数据库
                    var param = {}; 
                    param.id = obj.data['ID'].toString();
                    $.ajax({
                        type: "post",
                        url:  url,
                        cache: false,  //禁用缓存
                        data: param,  //传入组装的参数
                        dataType: "json",
                        success: function () {
                            layer.msg('公告已阅读', {
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                layer.close(index);  
                                $(obj.tr.selector + ' td[data-key="1-0-1"] div').text('已读')//修改值
                                $(obj.tr.selector + ' td[data-key="1-0-1"] div').css("color", "blue")//修改颜色
                                
                            });
                        },
                        error: function () {

                        }
                    });

                }
                , btn2: function (index, layero) { 
                }
            });  
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
    }); 

View Code