首页 > Web开发 > 详细

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

时间:2020-05-15 18:41:55      阅读:144      评论:0      收藏:0      [点我收藏+]

先发送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

 

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

原文:https://www.cnblogs.com/helloliu/p/12896248.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!