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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM