LayUI——數據表格使用

時間 2019-11-11

標籤 layui 數據表格使用简体版

原文原文鏈接

Layui數據表格的實際項目使用

Layui的數據表格可謂是在後臺管理的頁面中常常用到的工具了php

最近作項目就用到了，項目的要求是用數據表格顯示出後臺文章的列表而且每一行的文章都有對應的修改刪除操做按鈕html

看完官網的介紹後就開始比着作了json

這是前臺的html的主要代碼：函數

咱們須要一個用來存放數據表格的div容器工具

1 <body>
2      <div id="page_info">    
3 
4 
5 
6      </div>
7 </body>

這是js代碼：post

咱們在這裏介紹的是方法渲染數據表格ui

 1 $(function(){//頁面加載完成
 2 
 3 
 4   loding_page();//執行加載渲染數據表格的函數
 5 
 6 
 7 });
 8 
 9 
10 
11 
12 
13 
14 function loding_page(){//定義一個加載數據表格的方法
15       layui.use('table', function(){
16             var table = layui.table;
17                  
18             table.render({
　　　　　　　　　id:'task'  //標識本次加載的數據表格
19             ,elem: '#demo'//數據表格的容器
20             ,height: 312//表格的高度單位px
21             ,url: 'php/back.php' //提供數據的接口
               ,method:'post'
22             ,page: true //開啓分頁
23             ,cols: [[ //表頭
24                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
25               ,{field: 'username', title: '用戶名', width:80}
26               ,{field: 'sex', title: '性別', width:80, sort: true}
27               ,{field: 'city', title: '城市', width:80} 
28               ,{field: 'sign', title: '簽名', width: 177}
29               ,{field: 'experience', title: '積分', width: 80, sort: true}//sort:true意思是開啓排序
30               ,{field: 'score', title: '評分', width: 80, sort: true}
31               ,{field: 'classify', title: '職業', width: 80}
32               ,{field: 'wealth', title: '財富', width: 135, sort: true}
33                //這裏咱們能夠加一點本身定義的事件
34                //d表明這一行數據，若是咱們想操做這一行數據就要知道這一行數據的id
35                //就是  d.id 點後面直接跟字段名就能獲取到
36               ,{field: 'do', title: '操做', width: 135, templet:function(d){
37                return'<button onClick="del(this)" > d.id</button>'
38                //這裏的這個按鈕的名稱就是標識這一行數據的id
39                //而且還有個刪除本行的事件先獲取行號（id）再根據id刪除該行內容
40                //還要注意的是，這裏的field的名稱要和後臺返回的json數據對應，不然
41                //數據是不會顯示出來的
42                }}
43             ]]
　　　　　　　　,where:{//接口的其它參數 
　　　　　　　　　　act : 'getList'
　　　　　　　　}
　　　　　　　　,request:{//用於對分頁請求的參數　//若是無需自定義請求參數，可不加該參數

　　　　　　　　　　　　pageName: 'curr' //頁碼的參數名稱，默認：page(第幾頁)this

　　　　　　　　　　　　,limitName: 'nums' //每頁數據量的參數名，默認：limit（每一頁的數據量）url

　　　　　　　　}
　　　　　　　　,response:{//自定義的迴應參數
　　　　　　　　　　countName : 'allcount',//全部的數據條數
　　　　　　　　　　dataName : 'data'//返回的數據
　　　　　　　　}
　　　　　　　　,text:{//若是沒有數據的提示信息
　　　　　　　　　　none :'暫無相關數據'
　　　　　　　　};
　　　　　　　　　　/*添加表頭的監聽排序事件---從服務端從新獲取數據排序，而不是僅僅是當前頁面的數據排序*/
　　　　　　　　table.on('sort(task)',function(obj){//這裏的sort(task)//task名要和前面定義的數據表格標識一致
　　　　　　　　　　　　　//從新加載表格
　　　　　　　　　　　　　table.reload('task',{
　　　　　　　　　　　　　　　　initSort:obj,//記錄初始排序，若是不設的話，將沒法標記表頭的排序狀態。

　　　　　　　　　　　　　　　　　　where: { //請求參數（注意：這裏面的參數可任意定義，並不是下面固定的格式）spa

　　　　　　　　　　　　　　　　　　　　　　field: obj.field //排序字段

　　　　　　　　　　　　　　　　　　　　　　,order: obj.type //排序方式

　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　})　
　　　　　　　　});
44         });
45      });
46 }

//我麼也能夠把過於臃腫的配置參數在外面先定義好（好比上面的數據表格的字段），用的時候直接調用變量名便可

//後臺方面的數據處理就不作詳解了，按照官方的格式來就能夠

總體作下來我認爲最須要注意的就是

1.後臺數據格式的處理

2.行事件的添加

　　這也是最基本的，官方給咱們講的是返回的數據格式必須是特定的json形式的，

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。