LayUI数据表格通用工具栏分页+搜索+排序

客官°小女子只卖身不卖艺 2021-12-11 11:43 1552阅读 0赞

# 完成效果 #

1、接收和展示后端接口传来的数据；  
2、分页和跳页；设置每页的数量；  
3、 工具栏：查看、修改、删除；  
4、工具栏：筛选列、导出Excel、打印；  
5、搜索功能；  
6、后端排序功能；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70]  
本实例只展示了实现功能的必须代码，后端代码的非必须部分未贴出。  
本实例默认读者是后端程序员，着重展示前端部分。

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

# 后端 #

#### 前置技能 ####

1、SSM  
2、pageHelper插件  
3、前端基础和ajax

如果后端实现很熟悉了，可以直接跳到前端部分。

#### 本实例用到的实体类 ####

public class Repair { 
        private Integer rep_id;
    	//售后维修点 公司名称
        private String rep_name;
    	//售后维修点 公司地址
        private String address;
    	//售后维修点 联系方式
        private String phonenum;

#### 本实例用到的select方法 ####

传参了用条件查询，未传参全表查询。

<select id="select" parameterType="entity.aftersales.Repair" resultType="group3.entity.aftersales.Repair">
      	select rep_id, rep_name, address, phonenum from aftersales_repair 
      	<where>
      		<if test="rep_name!=null">
      			and rep_name like concat('%',#{rep_name},'%')
      		</if>
      		 <if test="address!=null">
      			and address like concat('%',#{address},'%')
      		</if>
      		<if test="phonenum!=null">
      			and phonenum like concat('%',#{phonenum},'%')
      		</if>
      	</where>
    </select>

#### 本实例用到的handler方法 ####

###### list方法的参数说明 ######

repair		//条件查询的参数；
    
    field 		//排序的字段；
    order		//排序的正反序；
    
    page 		//分页的页数；
    limit 		//分页每页几条；

layui组件会自动传分页参数，排序参数需要我们手动添加。

###### 回调数据说明 ######

"code" 		//layui表格固定参数
    "msg"		//layui表格固定参数
    "count"		//layui表格固定参数  总数
    "data"	  //layui表格固定参数  数据

@Controller
    @RequestMapping("/repair")
    public class RepairHandler { 
    	@Autowired
    	private RepairService ser;		//自动注入service
    	
    	@RequestMapping("/list")
    	@ResponseBody
    		public Map<String,Object>  list(Repair repair,String field,String order,@RequestParam(defaultValue="1")int page,@RequestParam(defaultValue="10")int limit) { 
    		//开启分页
    		PageHelper.startPage(page, limit);
    		//如果传了排序的参数 添加排序sql
    		if(field!=null&&order!=null) { 
    			PageHelper.orderBy(field+" "+order);
    		}
    		//查询
    		List<Repair> list=ser.select(repair);
    		PageInfo<Repair> pageInfo = new PageInfo<Repair>(list);
    		PageHelper.clearPage();		//清除分页的参数
    		//装填回调参数
    		Map<String,Object> map=new HashMap<>();
    		map.put("code", 0);		//layui表格固定参数
    		map.put("msg", "随便写啥");		//layui表格固定参数
    		map.put("count",pageInfo.getTotal());	//layui表格固定参数 总数
    		map.put("data", pageInfo.getList());	//数据
    		return map;
    	}

这里你把pageinfo整个传到前端再拆解也可以，我这里就按最简单的方法来。

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

# 思路 #

前端传查询参数、分页参数、排序字段到后端，  
查询实现写在mybatis的mapper.xml里；  
分页和排序的添加靠pagehelper实现。

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

# 前端 #

## 界面部分 ##

这种scrpt标签是layui的组件，后面可以通过代码嵌入到数据表格里。

就三部分：行工具栏、表工具栏、表格

<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a> <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a> </script>
     
    <script type="text/html" id="Sech">
        <div class="demoTable">
            搜索标题：
            <div class="layui-inline">
                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
            <button id="search" class="layui-btn" data-type="reload" >搜索</button>
    </div>
         
    <table id="demo" class="layui-hide" lay-filter="test"></table>

lay-filter是layui的选择器

## JS部分 ##

#### 核心部分 ####

$(function(){ 
    	layui.use(['table', 'layer'], function () { 
    		var table = layui.table;
    		var layer = layui.layer;	
    		//表格数据
    		var $table=table.render({ 
    			elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
    			,id:'#demo'		//指定容器唯一 id，可以和原生id不一样，id 是对表格的数据操作方法上是必要的传递条件
    			,title:"售后维修点表格"
    // ,height: 315 //容器高度
    			,url: 接口rul
    			,size:'lg'
    			,autoSort: false 	//关闭前端排序 使用后端排序
    			,toolbar: '#Sech'	 //添加 表工具栏 这里用的是scrpt标签的id
    			,method: 'post'
    			,page:{ 
    				layout: [ 'prev', 'page', 'next', 'count','limit', 'refresh', 'skip']//自定义分页布局 
    				,limit:10	//初始每页数量
    				,limits:[5,10,15,20]	//可选的每页数量
    				,groups:10	//最多几个跳页按钮 1 2 3 4 5 6 这种跳页按钮
    				,first: false //不显示首页
    				,last: false //不显示尾页
    				}
    			,cols: [[	//设置表头
    				{ type:'numbers', width:'5%', title: '序号', sort: true}	//字段是否支持排序
    				,{ field:'rep_id', width:'8%', title: 'ID', sort: true}
    				,{ field:'rep_name', width:'22%', title: '公司名'}
    				,{ field:'address', width:'25%', title: '地址', sort: true}
    				,{ field:'phonenum', width:'20%', title: '电话'}
    				 //添加 行工具栏
    				,{ fixed: 'right', width:'20%', align:'center', title: '数据操作',toolbar: '#barDemo'} 
    					]]
    			,done: function(){ 	//回调成功后执行
    				//搜索按钮 附加监听
    				addSearchListener(table);
    			}
    		});	
    		//行工具栏 附加监听
    		addToolListenerr(table);
    		//排序 附加监听
    		addSortListener(table);
    	}); 	//layui.use
    })	//function

1、`autoSort`要设置为false，关闭前端的排序，使用后端排序；  
2、行工具栏、排序这些的监听，是layui自带的方法，所以每次重载会自动添加；  
3、搜索按钮的监听我是用jquery添加的，数据表格重载时就没了，所以需要在`done`里添加；  
4、`done`：回调函数接收成功后执行的操作；  
5、`id:'#demo'`这里是新设置一个layui容器id，可以不是原生html标签的id

#### 添加搜索按钮的监听事件 ####

使用table组件的reload方法重载数据表格。  
reload的参数为 `table.reload（ layui容器唯一id，重载方法() ）`；

#### 添加排序的监听事件 ####

function addSortListener(table){ 
    	table.on('sort(test)', function(obj){  //注：sort是工具条事件，test是layui容器lay-filter="对应的值"
    		  //尽管我们的 table 自带排序功能，但并没有请求服务端。
    		  //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序：
    		  table.reload('#demo', { 	//这里的参数是layui容器唯一id ！！不是原生id
    			    initSort: obj //记录初始图标的状态
    			    ,method: 'post'
    			    ,where: {  //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
    			      field: obj.field //排序字段
    			      ,order: obj.type //排序方式
    			    }
    		  });
    	});
    }

1、`obj`是触发监听事件的 那一个排序图标（小三角图标）；  
2、这个监听事件，当点击排序的 小三角 图标是，会触发；  
3、方法会向接口发起一次请求，请求附带了 `field` （排序字段），`order` (正反序) 两个参数；  
4、layui会自动把回调数据填入表格，我们无需关心实现。

#### 添加行工具栏的监听事件 ####

这三个按钮的监听事件  
![在这里插入图片描述][20190709045457928.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhbHRzb3Vs_size_16_color_FFFFFF_t_70]: /images/20211211/52413834dc51453f9af04073e97dfdae.png
[20190709045457928.png]: /images/20211211/16d96f5a96ba487b9bb7dae675c9efc0.png