LayUI数据表格和分页的实现

小咪咪 2021-12-14 04:37 1013阅读 0赞

## 1、简单表格 ##

#### 样式 ####

没有分页，没有crud操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70]

#### html代码 ####

#### js代码 ####

layui.use('table', function(){ 
      var table = layui.table;
      
      table.render({ 
        elem: '#test'	//id选择器
        ,url:'/demo/table/user/'		//数据接口
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
        ,cols: [[
          { field:'id', width:80, title: 'ID', sort: true}		//field 字段
          ,{ field:'username', width:80, title: '用户名'}		//title tr名
          ,{ field:'sex', width:80, title: '性别', sort: true}		//sort 此字段可排序
          ,{ field:'city', width:80, title: '城市'}		//width 宽度
          ,{ field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度
          ,{ field:'experience', title: '积分', sort: true}
          ,{ field:'score', title: '评分', sort: true}
          ,{ field:'classify', title: '职业'}
          ,{ field:'wealth', width:137, title: '财富', sort: true}
        ]]
      });
    });

#### 接口数据 ####

`code`：固定是0  
`msg`：随便写啥好像都没差别  
`count`:此数据的总数  
`data`:表格数据，来多少条显示多少条。

这4个是接口数据必须的4个属性

{ 
    "code":0,
    "msg":"",
    "count":1000,
    "data":[
    { .....数据.....},
    { .....数据.....}]

--------------------

## 2、自动分页表格 ##

#### 样式 ####

有分页，没有crud  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70 1]

#### html代码 ####

#### js代码 ####

自动分页表格，和普通的表格的js代码部分差不多，就多了一句 page： true  
但前后端交互的数据不一样了。

layui.use('table', function(){ 
      var table = layui.table;
      
      table.render({ 
        elem: '#test'
        ,url:'/demo/table/user/'
        ,cols: [[
          { field:'id', width:80, title: 'ID', sort: true}
          ,{ field:'username', width:80, title: '用户名'}
          ,{ field:'sex', width:80, title: '性别', sort: true}
          ,{ field:'city', width:80, title: '城市'}
          ,{ field:'sign', title: '签名', minWidth: 150}
          ,{ field:'experience', width:80, title: '积分', sort: true}
          ,{ field:'score', width:80, title: '评分', sort: true}
          ,{ field:'classify', width:80, title: '职业'}
          ,{ field:'wealth', width:135, title: '财富', sort: true}
        ]]
        ,page: true	//开启自动分页
      });
    });

#### request参数和接口数据 ####

开启自动分页后，request里会**自动**带上分页数据。  
`page`：第几页  
`limit`：每页几条数据

这些参数是可以通过HttpServletRequest取出来的。  
（这里只是展示，实际我这里用到springmvc的自动取参。）

String pageStr=request.getParameter("page");
    		String limitStr=request.getParameter("limit");

拿到这些参数后，我们可以进行sql分页查询

@RequestMapping("/list")
    	@ResponseBody
    	public Map<String,Object>  selectAll(Repair repair,@RequestParam(defaultValue="1")int page,@RequestParam(defaultValue="5")int limit) { 	
    		List<Repair> countData=service.selectAll();		//查询总数
    		List<Repair> data=service.selectByPage(page,limit);		//分页查询数据
    		
    		Map<String,Object> map=new HashMap<>();		//装填回调数据
    		map.put("code", 0);	
    		map.put("msg", "随便写啥");
    		map.put("count", countData.size());		//获得数据的总数
    		map.put("data",data);	//本次分页查询的数据
    		return map;
    	}

**json格式**

{ 
    "code":0,
    "msg":"随便写啥",
    "count":1000,	//数据的总数 
    "data":[	//本次分页查询的数据
    { .....数据.....},
    { .....数据.....}]

--------------------

## 3、定制分页表格 和 手动设置参数 ##

#### 样式 ####

和自动分页表格差不多，手动挡和自动挡的区别。

#### html ####

#### js代码 ####

可以设置下一页、上一些、跳页这些按钮的顺序，  
当回调数据不叫code、msg、data时，可以手动设置对应关系。

layui.use('table', function(){ 
    		var table = layui.table;	 	//加载table模块
    	 	
    		table.render({ 
    			  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
    			  ,title:"售后维修点表格"
    			  ,height: 315 //容器高度
    			  ,url:'${contextPath }/repair/list' //数据接口
    			//设置分页属性
    			  ,page:{ 
    				 layout: [ 'prev', 'page', 'next', 'count','limit', 'refresh', 'skip']//自定义布局顺序 
    				 ,limit:5	//初始 每页几条数据
    		       	 ,limits:[5,10,15]	//可以选择的 每页几条数据 
    				 ,groups:10 	//最多几个跳页按钮
    		         ,first: false //不显示首页
    		         ,last: false //不显示尾页
    			  }
    			  //设置回调数据和数据表格参数对应
    			  ,parseData : function(resp) {   //当名字不一致时，使用
    					return { 
    						"code" : resp.mycode,  //使分页参数和回调数据对应
    						"msg" : resp.mymsg,
    						"count" : resp.mytotal,
    						"data" : resp.data.list,  //json格式
    				}
    			  }
    			  //设置表头
    			  ,cols: [[
    			      { type:'numbers', width:80, title: '序号', sort: true}
    			      ,{ field:'rep_id', width:80, title: 'ID', sort: true}
    			      ,{ field:'rep_name', width:80, title: '公司名'}
    			      ,{ field:'address', width:80, title: '地址', sort: true}
    			      ,{ field:'phonenum', width:80, title: '电话'}
    			  ]]
    			  //,…… //更多参数参考官方文档
    			});

--------------------

## 4、crud表格 ##

#### 样式 ####

分页的同时，每行有crud操作按钮  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70 2]

#### html代码 ####

表格部分基本和上面一样，table需要添加一个`lay-filter`属性，可以看做是一个layui的识别id。

#### js代码 ####

为了精简代码，我这里就用自动分页了。

表头需要添加`,{fixed: 'right', width:178, align:'left', toolbar: '#barDemo'}`  
其中`toolbar:#barDemo`指定一个按钮组的id。

**按钮组**

<script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

--------------------

#### \*上面用到的方法 ####

//删除方法
    	     layer.confirm('真的删除行么', function(index){ 
    	       //index表示第几次弹出层不是索引值，也不是主键等信息
                //刷新页面重置
               obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
               layer.close(index);
               //执行一个异步删除方法
               }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70]: /images/20211213/557e5bff378344d5b29ebd5c3ea7d707.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70 1]: /images/20211213/fbefec52b93b45b4be6909d3f86ec7a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70 2]: /images/20211213/d8f4ca7083e64ee0a877c8617243ae84.png