layui使用经验总结（三）——数据表格的使用及其要注意的细节

港控/mmm° 2022-02-03 17:09 434阅读 0赞

# 数据表格的样子 #

![官网截图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lNYW5peQ_size_16_color_FFFFFF_t_70]

## 基础代码示例 ##

<html>
    <head>
      <meta charset="utf-8">
      <title>table模块快速使用</title>
      <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    </head>
    <body>
     
    <table id="demo" lay-filter="test"></table>
     
    <script src="/layui/layui.js"></script>
    <script>
    layui.use('table', function(){
      var table = layui.table;
      
      //第一个实例
      table.render({
        elem: '#demo'
        ,height: 312
        ,url: '/demo/table/user/' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'username', title: '用户名', width:80}
          ,{field: 'sex', title: '性别', width:80, sort: true}
          ,{field: 'city', title: '城市', width:80} 
          ,{field: 'sign', title: '签名', width: 177}
          ,{field: 'experience', title: '积分', width: 80, sort: true}
          ,{field: 'score', title: '评分', width: 80, sort: true}
          ,{field: 'classify', title: '职业', width: 80}
          ,{field: 'wealth', title: '财富', width: 135, sort: true}
        ]]
      });
      
    });
    </script>
    </body>
    </html>

## 接触表格第一步了解其js代码 ##

1.  在页面放置一个元素 `<table id="demo"></table>`，然后通过 `table.render()` 方法指定该容器。
2.  `table.render()`中元素作用。
3.

表id：elem ，需与页面table中id值元素相同。

elem: '#demo',

路径：url ， 表格获取数据的路径，路径返回的格式要求在下面

url: '${base}/userList.json',

自定义返回分页参数：requset \+ pageName\+ limitName  
默认为 page，limit。

request:{
    			pageName:'pageNo',
    			limitName:'lows'
    		},

最小宽度：cellMinWidth

cellMinWidth:120,

附加搜索条件：where 通过函数可以给where中参数赋值，下面有介绍

where:{filters::null}, //附件搜索条件

默认多少条/页：limit

limit:30,

可选条数：limits

limits:[50,100,500,1000,2000],

行高度设置：height

height: 'full-160',

是否分页：page

page:true,

工具栏：toolbar 其中自带简单的筛选、导出、打印功能

toolbar: true,
    defaultToolbar:['filter','exports'],

可以自定义

toolbar: '<div><button class="layui-btn layui-btn-success layui-btn-sm" lay-event="allaudit">批量办理</button></div>',

table.on('toolbar(test)', function(obj){
    	  	var checkStatus = table.checkStatus(obj.config.id);
    	  	switch(obj.event){
    			case 'allaudit':
    				var data= table.checkStatus('handList').data;
    				if(data.length>0){ 
    			$.each(data,function(index,item){
    				categoryType=item.PROCESS_DEFINITION_KEY;
    				if(index==data.length-1){
    					ids+=item.BUSINESS_ID;
    				}else{
    					ids+=item.BUSINESS_ID+",";
    				}
    			});
    			break;

表格返回函数：done 这里res可以得到表格所有数据，可以渲染页面其他位置内容，如总数等。

done: function(res, curr, count){
    			element.render('nav');
    			$("#count").html(res.count);
    		},

表头：cols

,cols: [[ //表头
      		{type:'checkbox',width:40},
    		{type:'numbers',title:'序号',width:60},
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'username', title: '用户名', width:80}
          ,{field: 'sex', title: '性别', width:80, sort: true}
        ]]

#### 表头涉及参数 ####

多选框及序号

{type:'checkbox',width:40},
    {type:'numbers',title:'序号',width:60},

字段名：field 与json数据一致  
表头名称：title  
表字段宽度：width  
是否排序sort  
表头名称位置设置：align  
模板函数：templet

{field:'CREATE_TIME',title:'创建时间',width:120,sort: true,align:'center',templet : "<div>{
       {layui.util.toDateString(d.CREATE_TIME, 'yyyy-MM-dd')}}</div>"},

实例

## 请求路径返回json格式要求 ##

1.  code返回的标识符，0为显示数据，1为不显示数据。
2.  msg提示信息，在没有数据时显示提示信息。  
    ![在这里插入图片描述][2019050920040054.png]
3.  count数据总数，非获取到当前页数据的总数，是数据库中符合条件的总数，数据表格分页的关键，分页介绍在下面。
4.  data获取的当前页数据，字段与 \{field: ‘sign’, title: ‘签名’, width: 177\}中field对应。

{
    	"code": 0,
    	"msg": "",
    	"count": 30,
    	"data": [{
    		"id": 10000,
    		"rank":1,
    		"username": "user-0",
    		"sex": "女",
    		"city": "城市-0",
    		"sign": "签名-0",
    		"experience": 255,
    		"logins": 24,
    		"wealth": 82830700,
    		"classify": "作家",
    		"score": 57
    	}, {
    		"id": 10001,
    		"rank":2,
    		"username": "user-1",
    		"sex": "男",
    		"city": "城市-1",
    		"sign": "签名-1",
    		"experience": 884,
    		"logins": 58,
    		"wealth": 64928690,
    		"classify": "词人",
    		"score": 27
    	}]
    }

## 分页操作的实现 ##

数据表格根据json返回的数据来处理分页。

#### 根据json中的count值自动分配页数 ####

如count值为4668,30条一页，分156页。  
![在这里插入图片描述][20190509201200161.png]  
如count值为4668,90条一页，分52页。  
![在这里插入图片描述][20190509201247845.png]  
点击其中的一页会数据表格会自动在url请求中加上page=n，再次请求获取数据。  
选择多少条/页数据表格会自动在url请求中加上limit=y，再次请求获取数据。  
当然也可以重新定义参数，代码修改位置上面元素说明有介绍。

request:{
    			pageName:'page',
    			limitName:'lows'
    		},

#### 后台代码 ####

最基础版，没有封装，可以自行封装。  
其中ResultJsonVO对象，根据什么json格式要求写就行了。

@RequestMapping("/userList")
    	@ResponseBody
    	public ResultJsonVO projectList(String limit,String page){
    		List<User> userList =userService.findUserList(limit,page);
    		int count =userService.usercount();
    		return new ResultJsonVO(userlist,count);	
    	}

## 搜索功能实现 ##

通过按钮点击事件调用函数还实现搜索，更新渲染表格

//搜索按钮监听提交
    var mytable = table.render(option);
    	 form.on('submit(btn)', function(data){
    		//option.where.title = data.field.title;
    			/*更新渲染表格*/
    			mytable.reload(option);
    	 });

## 格式化数据 ##

#### 格式化时间 ####

{field:'CREATE_TIME',title:'创建时间',width:120,align:'center',templet : "<div>{
       {layui.util.toDateString(d.CREATE_TIME, 'yyyy-MM-dd')}}</div>"},

#### 格式化数据 ####

通过后台传过来的Map集合数据字典格式化数据

{field:'INDUSTRY',title:'所属行业',width:100,align:'center',templet : industryFu},

//格式化所属行业字段
    	function industryFu(res) {
    		var revalue = "-";
    		<c:forEach items="${industryMap}" var="entry">
    		if ("${entry.key}" == res.INDUSTRY) {
    			revalue = "${entry.value}";
    		}
    		</c:forEach>
    		return revalue;
    	}

## 添加操作功能 ##

函数中res可以获取表格中所有字段信息

{field:'ID',title:'操作',width:160,align:'center', templet: function(res){
    				var str = '<a class="layui-btn layui-btn-normal layui-btn-xs" href="${base}/toView.html?id='+res.ID+'">办理</a>';
    				return str;
    			}}

效果  
![在这里插入图片描述][20190509210733932.png]  
点击事件异步请求数据

mytable.reload({
    			where: { //设定异步数据接口的额外参数，任意设
    				activityName:data.value
    			},
    			page: {
    				curr: 1 //重新从第 1 页开始
    			}
    		});

##### 方法型加按钮 #####

{field:'operation', title:'操作', width:100,align:'center', templet:operation1}

function operation1(val,row){
    	var html="";
    	
    		html = '<a class="f-bg-66cc66" lay-event="task">办理</a>';
    
    	return html;
    						}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lNYW5peQ_size_16_color_FFFFFF_t_70]: /images/20220203/66369a344bc54e92aee5e0c9ce2e5b4b.png
[2019050920040054.png]: /images/20220203/9f4c087a74674a759e58dc62e43abb42.png
[20190509201200161.png]: /images/20220203/c204865d68ac437d82d648e68abcaa47.png
[20190509201247845.png]: /images/20220203/37b7d140aeaf4f08b2bc8b13603cda7d.png
[20190509210733932.png]: /images/20220203/bdc3a9e8f34c4d48b663d448bd17339a.png