layui 的使用 table 和后端數據交互

1 引用js和css

2在s layui.use(['laydate', 'form', 'table', 'laypage'], //需要使用哪個模塊就聲明哪        function () {

var laydate = layui.laydate; // 時間 var table = layui.table;  //表格 var form = layui.form; //表單 var laypage = layui.laypage; //分頁 //執行一個laydate實例  laydate.render({ elem: '#start' //指定元素  }); //執行一個laydate實例  laydate.render({ elem: '#end' //指定元素  });var url ="xxxxxx.xxxx.xxx"; var tableName = table.render({ elem: '#demo',  //table的id url: url, page: true, //開啟分頁  request: { pageName: 'pageIndex' //頁碼的參數名稱，默認：page，更改之后為pageIndex，在請求時會自動帶過去 , limitName: 'pageSize' //每頁數據量的參數名，默認：limit，更改之后為pageSize  }, parseData: function (res) {  //與后端數據交互，需要傳固定格式，轉換為下面所示 return { "code": 0, //數據狀態 "msg": "", //狀態信息 "count": res.Data.Count, //數據總數 "data": res.Data.Dtos, //后端的詳細數據 } }, cols: [//表頭  [{ field: 'column1', title: '列1', align: 'center', width: 240 }, { field: 'column2', title: '列2', align: 'center' }, { field: 'column3', title: '列3', align: 'center' }, ]], loading: true, //數據加載中。。。 id: 'idTest', }); //搜索 按鈕在form表單中 樣式class="layui-btn" lay-submit lay-filter="search" 
 //form內的按鈕總會自動提交，將其設置為button，不會自動提交
 // button 按鈕的type有三個屬性：button，submit，reset，button默認是submit，所以沒有指定type類型情況下，點擊button會觸發form表單
 //按鈕需要加上lay-submit屬性，layut的form.on的表單提交監聽不到這個按鈕，那么return false對提交的制止也就失效了
 form.on('submit(search)', function (data) { var param1= $("#start").val(); var param2= $("#end").val();var url = "xxxxxxx?param1=" + param + "&param2=" + param2 ; //第一種方法 tableName.reload({ url: url ,request: { pageName: 'pageIndex' //頁碼的參數名稱，默認：page , limitName: 'pageSize' //每頁數據量的參數名，默認：limit  } ,where: { //設定異步數據接口的額外參數，任意設 第二種方法傳參  parameter1: param1, parameter2: param2, } , page: { curr: 1 //重新從第 1 頁開始  } }); return false; //表單按鈕的js回調函數添加retrun false制止 });
  //<button id="reloadbtn" > jquery 寫法 //$('#reloadbtn').click(function () {  //里面寫法和上面一樣 //});  });

 監聽工具條

 table.on('tool(test)', function (obj) { //注：tool 是工具條事件名，test 是 table 原始容器的屬性 lay-filter="對應的值"
                var data = obj.data; //獲得當前行數據
                var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
                var tr = obj.tr; //獲得當前行 tr 的 DOM 對象（如果有的話）
                if (layEvent === 'detail') { //查看
                    var id = data["Id"];
                    xadmin.open('名字', 'url?Id=' + id);
                }
                else if (layEvent === 'del') { //刪除
                    layer.confirm('真的刪除行么', function (index) {
                        obj.del(); //刪除對應行（tr）的DOM結構，並更新緩存
                        layer.close(index);
                        //向服務端發送刪除指令
                    });
                }
                else if (layEvent === 'edit') { //編輯
                    var column1= data["column1"]; //編輯行的column1的值
                    var column2= data["column2"];
                    xadmin.open('編輯', 'url?column1=' + column1+ '&column2=' + column2);
                }

            });
        });

數據動態加載,使用laytpl

layui.use(['laytpl'], function () {
        var laytpl = layui.laytpl;
        var Id = getQueryVariable("Id");
        var host = "https://localhost:5001";
        layui.use(['laytpl'],
            function () {
                var laytpl = layui.laytpl;var url = url?id=" + Id;
                $.ajax({
                    url: url,
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {  //res請求返回的結果for (i = 0; i < res.Data.length;i++) {
                            $("#test").append("<ul class='layui-timeline'><li class='layui-timeline-item'> <i class='layui-icon layui-timeline-axis'>&#xe63f;</i>
                        <div class='layui-timeline-content layui-text'><h3 class='layui-timeline-title'>" + res.Data[i].xxx1+ "</h3><p><br>" + res.Data[i].xxx2+ "</p></li></ul>");
                        }
                    }
                })

            });
    });

<script type="text/html" >
    <div class="layui-card">
        <div class="layui-card-header">訂單概況</div>
        <div class="layui-card-body" id="test">
        </div>
    </div>
</script>

 

//監聽提交
        form.on('submit(commit)', function (data) {
            var column1= data.field.column1;
            var column2= data.field.column2;
            var list= [];  //這里數組要與后台的數組中的對象要對應，不然的話接受不到數據
            $('input[type=checkbox]:checked').each(function () {  //獲取checkbox選擇的屬性 var title = this.title;  //獲取標題
 var value=$(this).val(); var list= { Title:title, Value: value };
                courseList.push(courseDto);   
            }); 
            var courseManagementDtos = { Column1: column1, Column2: column2, List: list };  //注意名字要對應
            var url ="后台接口地址";
            $.ajax({
                url: url,
                type: "post",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(courseManagementDtos),
                success: function (res) {
                    if (res.Code == 1) {
                        layer.alert("提交成功");
                    }
                    else {
                        layer.alert("提交失敗");
                    }
                }
            })

            return false;
        });

 動態加載html

$("#courseList").append(html代碼） //添加不能移除
$("#courseList").html(html代碼);   //移除和添加

 當前端傳過來的數據要進行轉換時，比如true要顯示成是

 {
                        field: 'value', title: '是否完成', align: 'center', templet: function (d) {
                            if (d.value== true) {
                                return '<span style="color: balck;">是</span>'; //可以添加自己想要的樣式
                            }
                            else {
                                return '<span style="color: red;">否</span>';
                            }
                        }
                    },

 

 

其他的比如html已寫好，綁定數據可以去看官方文檔，比較簡單，和vue綁定差不多