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形式的，