先发送ajax,成功后通过jq来修改页面的值,并没有进去数据库中。
html代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<table class="layui-hide" id="demo" lay-filter="demo" ></table>
js代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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'); }); });