2019年2月 – WJY329' Blog

2019年2月22日 wjy329

Layui 实现火车站点选择功能

先看效果：

为什么要用这种方式？

答：数据量太大，直接采用下拉框会加载缓慢，采用数据表格分页的方式能够很好的适应，个人借鉴，各位有好的方法也可以相互交流或者提出建议。

下面正式开始：

1.表结构和sql

sql文件：点击下载

2.实体类 -Station.java

import java.io.Serializable;

/**
 * 
 * @description ...
 * @author  wujianyu
 * @email wjy329@vip.qq.com
 * @date  2019年2月12日 下午4:48:33
 */
public class Station implements Serializable {
private static final long serialVersionUID = 1L;

/**主键**/
private Integer id;
/**站点名称**/
private String station;

/**
 * 设置：主键
 */
public void setId(Integer id) {
this.id = id;
}
/**
 * 获取：主键
 */
public Integer getId() {
return id;
}
/**
 * 设置：站点名称
 */
public void setStation(String station) {
this.station = station;
}
/**
 * 获取：站点名称
 */
public String getStation() {
return station;
}
}

3.Dao

StationDao.java:

public interface StationDao{
  List<Station>  queryPage(@Param(value="page") PageInfo page);
  
  Integer getAllCnt();

/**
 * @description ...
 * @author  wujianyu
 * @email wjy329@vip.qq.com
 * @date  2019年2月13日 上午11:09:23
 */
Integer getCntByName(String station);

/**
 * @description ...
 * @author  wujianyu
 * @email wjy329@vip.qq.com
 * @date  2019年2月13日 上午11:09:29
 */
List<Station> queryPageByName(@Param(value="page")PageInfo pageInfo,@Param(value="station")String station);
}

StationDao.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="xxx.StationDao">
<resultMap type="xxx.entity.Station" id="stationMap">
<result property="id" column="id" />
<result property="station" column="station" />
</resultMap>

<select id="getAllCnt" resultType="java.lang.Integer">
select count(id) from t_station
</select>

<select id="queryPage" parameterType="xxx.entity.PageInfo" resultMap="stationMap">
select
*
from t_station
order by id asc
<if test="page.limit != null">
<if test="page.offset != null">
limit ${page.offset}, ${page.limit}
</if>
<if test="page.offset == null">
limit ${limit}
</if>
</if>
</select>

<select id="getCntByName" resultType="java.lang.Integer">
    select count(id) from t_station where station LIKE #{station,jdbcType=VARCHAR}
  
</select>
  

  
<select id="queryPageByName"  parameterType="xxx.entity.PageInfo" resultMap="stationMap">
    select
*
from t_station 
where station LIKE #{station,jdbcType=VARCHAR}
    order by id asc
     <if test="page.limit != null">
      <if test="page.offset != null">
        limit ${page.offset}, ${page.limit}
      </if>
      <if test="page.offset == null">
        limit ${limit}
      </if>
    </if>
 
</select>
</mapper>

4.Service

StationService.java:

import com.alibaba.fastjson.JSONArray;

public interface StationService {

public List<Station> queryByPage(String station);

}

StationServiceImpl.java:

@Service("stationService")
@Transactional
public class StationServiceImpl implements StationService {
@Autowired
private StationDao stationDao;

@Override
public List<Station> queryByPage(String station) {
// 判断条数
Integer total = 0;
// 查询分页数据
List<Station> result = null;

if (!StringUtils.isEmpty(station)) {
station = "%" + station + "%";
total = this.stationDao.getCntByName(station);
result = this.stationDao.queryPageByName(SystemPageContext.getPageInfo(), station);
} else {
total = this.stationDao.getAllCnt();
result = this.stationDao.queryPage(SystemPageContext.getPageInfo());
}
// 设定总的数据量
SystemPageContext.setTotal(total);

return result;
}

}

5.Controller

StationController.java

/**
 * @description ...
 * @author wujianyu
 * @email wjy329@vip.qq.com
 * @date 2019年2月12日 下午4:37:56
 */
@Controller
@RequestMapping("/station")
public class StationController {
@Autowired
private StationService stationService;

/**
 * 
 * @description 跳转到站点选择界面
 * @author  wujianyu
 * @email wjy329@vip.qq.com
 * @date  2019年2月12日 下午4:39:01
 */
@RequestMapping("/list/{domId}")
public String list(Model model, @PathVariable("domId") String domId) {
model.addAttribute("domId", domId);
return "station/list.jsp";
}

@ResponseBody
@RequestMapping(value="/allStation",produces="application/json;charset=UTF-8")
public Map<String, Object> listData(String station){
//从数据库中获取到数据
List<Station> rs = this.stationService.queryByPage(station);
return WebUtils.getInstance().getLayuiPageResult(rs);
}

}

6.页面和js

list.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="${rc.contextPath}/statics/plugins/layui-v2.4.5/layui/css/layui.css"
media="all">
<script
src="${rc.contextPath}/statics/plugins/layui-v2.4.5/layui/layui.js"></script>
<title>Insert title here</title>
</head>
<body>
<input id="domId" type="hidden"
value="<c:out value="${domId}" escapeXml="true" />" />
<table class="layui-hide" id="station_list" lay-filter="station_list"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-inline">
             <div class="layui-btn-container">
                 <button class="layui-btn layui-btn-sm" lay-event="getCheckData">选择站点</button>
             </div>
        </div>
<div class="layui-inline">
    <div class="layui-input-inline">
    
<input type="text" value="" id="keyWords" placeholder="请输车站名查询" class="layui-input search_input" style="height:30px;">
    </div>
    <a class="layui-btn layui-btn-sm" lay-event="searchStation">查询</a>
</div>
<div class="layui-inline">
             <div class="layui-btn-container">
                 <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delSelect">删除已选站点</button>
             </div>
        </div>
    </script>
<script type="text/javascript" src="/page/station/js/list.js"></script>
</body>
</html>

list.js

layui.use(['form','table', 'laydate','jquery'], function () {
    var form = layui.form,
    
table = layui.table,
        layer = layui.layer,
        laydate = layui.laydate,
        $ = layui.jquery;
var domId = $('#domId').val();
    var stationTable = table.render({
     elem: '#station_list'
    ,url:'/station/allStation'
    ,toolbar: '#toolbarDemo'
    ,defaultToolbar: []
    ,id:'id'
    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
      //,curr: 5 //设定初始在第 5 页
      ,groups: 1 //只显示 1 个连续页码
      ,first: false //不显示首页
      ,last: false //不显示尾页
      
    },request: {
    
  pageName: 'page' //页码的参数名称，默认：page
         ,limitName: 'limit' //每页数据量的参数名，默认：limit
},
    response: {
    
  statusCode: 1 //成功的状态码，默认：0
    }      
    ,cols: [[
    
{type:'radio'}
      ,{field:'id', width:'10%', title: 'ID',hidden:true, sort: true}
      ,{field:'station', title: '车站名称'}
    ]]
  });
    
    //头工具栏事件
    table.on('toolbar(station_list)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
      switch(obj.event){
        case 'getCheckData':
          var data = checkStatus.data;  //获取选中行数据
          var station = data[0].station;
          parent.$("#"+domId+"").val(station);
          //关闭当前的frame
  
  var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  
  parent.layer.close(index); //再执行关闭   
        break;
        case 'searchStation':
        
var keywords = $("#keyWords").val();
    
    stationTable.reload(
    
    
{page: {
    
            curr: 1 //重新从第 1 页开始
    
        }
    
        ,url: '/station/allStation',
    
    
where: {station:keywords}}
    
   );
    break;
        case 'delSelect':
        
parent.$("#"+domId+"").val("");
    break;
      };
    });
    
});

上面就是完整的代码，其他页面中使用时，只需获取dom的点击事件，弹出layer（或者其他）指向/station/list 页面即可。

其他需要类似的功能也可以使用上述方法，仅仅是本人的实践记录，如有其它方法，欢迎交流。

月份：2019年2月