分类:前端学习

Layui超链接分页的实现

后端数据回显查看之前的博文:Spring Boot之分页Layui的分页是JS动态生成的,这样搜索引擎抓取不到分页的数据,模拟抓取时,是一片空白,没有数据,传统的超链接分页则是可以抓取的,有利于SEO。下面我们就来实现一下超链接分页的laypage。

<div class="layui-box layui-laypage" th:with="maxButtons=10,floatButtons=5">
    <!-- 上一页 -->
    <th:block th:if="${articlePage.currentPage == 1}"><a class="layui-disabled">上一页</a></th:block>
    <th:block th:if="${articlePage.currentPage > 1}"><a th:href="@{'/blog/pages?page='+${articlePage.currentPage-1}}">上一页</a></th:block>

    <!-- 首页 -->
    <span th:if="${articlePage.currentPage == 1}" class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em>1</em></span>
    <th:block th:if="${articlePage.currentPage > 1}"><a th:href="@{'/blog/pages?page=1'}">1</a></th:block>

    <!-- 总页数小于maxButtons时,全部显示 -->
    <th:block th:if="${articlePage.totalPage>=1 && articlePage.totalPage<=maxButtons}" th:each="i : ${#numbers.sequence(1,articlePage.totalPage-1)}">
        <span th:if="${articlePage.currentPage == i}"  class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${i}">页码</em></span>
        <th:block th:if="${articlePage.currentPage != i}"> <a th:href="@{'/blog/pages?page='+${i}}" th:text="${i}">页码</a></th:block>
    </th:block>

    <th:block th:if="${articlePage.totalPage > maxButtons}">
        <th:block th:if="${(articlePage.currentPage-(floatButtons/2)) <= 2}" th:each="i : ${#numbers.sequence(2,2+floatButtons-1)}">
            <span th:if="${articlePage.currentPage == i}"  class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${i}">页码</em></span>
            <th:block th:if="${articlePage.currentPage != i}"><a  th:href="@{'/blog/pages?page='+${i}}" th:text="${i}">页码</a></th:block>
        </th:block>
        <!-- ... -->
        <th:block th:if="${(articlePage.currentPage-(floatButtons/2))>2}"><a>...</a></th:block>

        <th:block th:if="${((articlePage.currentPage-(floatButtons/2))>2) && ((articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0)) < (articlePage.totalPage-1))}"
                  th:each="i : ${#numbers.sequence(articlePage.currentPage-(floatButtons/2),articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0))}">
            <span th:if="${articlePage.currentPage == i}"  class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${i}">页码</em></span>
            <th:block th:if="${articlePage.currentPage != i}"><a th:href="@{'/blog/pages?page='+${i}}" th:text="${i}">页码</a></th:block>
        </th:block>

        <!-- ... -->
        <th:block th:if="${(articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0)) < (articlePage.totalPage-1)}"><a>...</a></th:block>
        <th:block th:if="${(articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0)) >= (articlePage.totalPage-1)}" th:each="i : ${#numbers.sequence(articlePage.totalPage-floatButtons,articlePage.totalPage-1)}">
            <span th:if="${articlePage.currentPage == i}"  class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${i}">页码</em></span>
            <th:block th:if="${articlePage.currentPage != i}"><a th:href="@{'/blog/pages?page='+${i}}" th:text="${i}">页码</a></th:block>
        </th:block>
    </th:block>

    <!-- 最后一页 -->
    <span th:if="${articlePage.totalPage>1 && articlePage.currentPage == articlePage.totalPage}" class="layui-laypage-curr"><em class="layui-laypage-em" style="background-color:#009688;"></em><em th:text="${articlePage.totalPage}">页码</em></span>
    <th:block th:if="${articlePage.totalPage>1 && articlePage.currentPage != articlePage.totalPage}"><a th:href="@{'/blog/pages?page='+${articlePage.totalPage}}" th:text="${articlePage.totalPage}">页码</a></th:block>


    <!-- 下一页 -->
    <th:block th:if="${articlePage.currentPage >= articlePage.totalPage}"><a class="layui-disabled">下一页</a></th:block>
    <th:block th:if="${articlePage.currentPage < articlePage.totalPage}"><a th:href="@{'/blog/pages?page='+${articlePage.currentPage+1}}">下一页</a></th:block>

</div>

articlePage.currentPage : 当前页码,后台返回的参数

articlePage.totalPage:总页数,后台返回的参数

maxButtons:最小显示页码数,即总页数小于等于这个数,页码将会全部显示,不会出现省略号,本例中为10

floatButtons:最多展示页码数,即总页数大于maxButtons时,除首尾页码外,还需显示的页码数,本例为5
上一页、首页、最后一页、下一页均是固定页码数,代码易懂;总页数小于maxButtons时,页码全部显示,代码也很容易理解;下面主要说有省略号的情况。

最外层先判断页码总数大于最小显示页码数,即 articlePage.totalPage > maxButtons:

1. articlePage.currentPage-(floatButtons/2)) <= 2 :当前页减去最多展示页码数的一半小于等于2时,这时候,当前页连续的floatButtons个页码为前5(这里的floatButtons=5)项(除页码1外),此时在后面加上省略号即可。

2. articlePage.currentPage-(floatButtons/2))>2 :与1相反,此时会在页码1后有省略号页码,之后显示当前页连续的5个页码

3. ((articlePage.currentPage-(floatButtons/2))>2) && ((articlePage.currentPage+(floatButtons/2)-(floatButtons%2==0?1:0)) < (articlePage.totalPage-1)) :&&前的部分如情况2所讲,后半部分的意思是当前页加上它之后的两个页码(当前页为中间值,加上后2个一共是5个,即floatButtons),是否小于总页数减去1,如果小于还有省略号

4.紧接3后的省略号

5.与3相反,如果大于等于,则不需要末尾的省略号,当前页面连续5页都显示出来即可。上面就是个人的分析,如有不懂或错误请留言交流。

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 页面即可。

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

Layui单选框赋值

这个赋值是从一个页面获取到数据,复制到另一个页面,常用于更新。

更新页面:

<div class="layui-form-item">
   <label class="layui-form-label">类型</label>
   <div class="layui-input-block">
      <input type="radio" name="type" value="0" title="菜单">
      <input type="radio" name="type" value="1" title="按钮">
   </div>
</div>

赋值的js:

var body = layer.getChildFrame('body', index);
body.find("input[name='type'][value='" + data.type +"']").prop('checked',true);
form.render();

zTree的使用-初始化、异步加载数据

zTree的官方网站:    http://www.treejs.cn/v3/main.php#_zTreeInfo

如何引入js和css,这里就不介绍了,直接看官方文档即可—zTree入门指南

在html中找到你要放置zTree的地方,id可变,class为ztree

<ul id="tree" class="ztree"></ul>
<script type="text/javascript">
    //加载资源树
    var t = $("#tree");
    var zNodes ;
     //zTree参数设置
    var setting = {
        treeId:"applicationTree",
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        edit: {
            
        },
        data: {      
            simpleData: {
                enable:true
            }
        },
        callback: {
            
        }
    };
</script>

js中的其他几个为空,自己可以看文档配置

这里开启了简单的数据格式加载数据,数据格式如下

   {"id":1, "pId":0, "name":"test1"},
    {"id":11, "pId":1, "name":"test11"},
    {"id":12, "pId":1, "name":"test12"},
    {"id":111, "pId":11, "name":"test111"}

然后异步加载数据,后台返回数据格式的方法自己完成:

//页面加载
$(document).ready(function(){
    $.ajax({
        type:'post',
        url: "/perm/treeData",  //数据源
        dataType: "json",
        async: false,
        success: function (result) {
            if(result.code == "1"){
                zNodes = result.data;
                //初始化树
                t = $.fn.zTree.init(t, setting, zNodes); 
            }else{
                //layer.msg(result.info, {time: 1000, icon:2});
                console.log("error");
            }

        },
        error: function (msg) {
        }
    });
});

这样就可以加载树了

image.png

JS密码强度判断

 //判断密码规则,长度至少为8位,必须包含大小写字母、数字和特殊符号
 var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/;
 var result = $("#newPassword").val().match(reg);
 if(result == null){
     Msg.error("密码长度至少为8位,必须包含大小写字母、数字和特殊符号");
     return false;
 }

上面代码是验证密码长度至少为8位,而且必须包含大小写字母、数字和特殊符号。

JS常用时间操作

时间戳转格式

//昨天日期
var yesterdayDate=new Date(new Date - 1000 * 60 * 60 * 24);
var yesterday=formatDate(yesterdayDate);
//昨天往前一周的时间
var lastWeekDate=new Date(new Date - 1000 * 60 * 60 * 24 * 7);
var lastWeek=formatDate(lastWeekDate);
//时间转化
function formatDate(date) {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    return y + '-' + m + '-' + d;
}

这样就可以将时间戳输出为 yy-MM-dd 的格式。

时间格式转换

var oldTime = (new Date(value)).getTime();
var curTime = new Date(oldTime).Format("yyyy-MM-dd");
return curTime;


Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

Layui 下拉框省市联动-后台查询方式

33334.gif

实现的效果就是上面这样,省市联动,由于对前端掌握的并不是很好,就用后台交互的方式实现了一下。

实现原理:在页面加载时初始化省份下拉框,然后监听下拉框点击事件,点击后,市下拉框加载数据。

数据库中cid为每个省份中市的顺序,根据省份选择的省份名获取pid与city表中的pid比较,然后获取城市名字。

1.数据库sql

—省:province.sql

    http://p8rwym8v0.bkt.clouddn.com/province.sql

—市:city.sql

    http://p8rwym8v0.bkt.clouddn.com/city.sql

image.pngimage.png

可以看出,市是由省份pid关联的。

2.实体类-entity

—ProvinceEntity.java

import java.io.Serializable;

/**
 * @author 
 */
public class ProvinceEntity implements Serializable {
    /**
     * 省份id
     */
    private Long pid;

    /**
     * 省份
     */
    private String province;

    private static final long serialVersionUID = 1L;

    public Long getPid() {
        return pid;
    }

    public void setPid(Long pid) {
        this.pid = pid;
    }

    public String getProvince() {
        return province;
    }

    public void setProvince(String province) {
        this.province = province;
    }
}

—CityEntity.java

import java.io.Serializable;

/**
 * @author 
 */
public class CityEntity implements Serializable {
    /**
     * 市序号
     */
    private Long cid;

    /**
     * 市
     */
    private String city;

    /**
     * 所属省id
     */
    private Long pid;

    private static final long serialVersionUID = 1L;

    public Long getCid() {
        return cid;
    }

    public void setCid(Long cid) {
        this.cid = cid;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    public Long getPid() {
        return pid;
    }

    public void setPid(Long pid) {
        this.pid = pid;
    }
}

3.mapper.xml

—ProvinceMapper.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.dao.ProvinceDao">
  <resultMap id="BaseResultMap" type="xxx.entity.ProvinceEntity">
    <id column="pid" jdbcType="BIGINT" property="pid" />
    <result column="province" jdbcType="VARCHAR" property="province" />
  </resultMap>

  <sql id="Base_Column_List">
    pid, province
  </sql>
  
  <select id="getAllProv" resultMap="BaseResultMap">
    select
      <include refid="Base_Column_List" />
    from
    datav_province
    order by pid asc
  </select>

  <select id="getPidByProvince" resultType="java.lang.Long">
    select
      pid
    from
      datav_province
    where
      province = #{province,jdbcType=VARCHAR}
  </select>
</mapper>

—CityMapper.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.dao.CityDao">
  <resultMap id="BaseResultMap" type="xxx.entity.CityEntity">
    <result column="cid" jdbcType="BIGINT" property="cid" />
    <result column="city" jdbcType="VARCHAR" property="city" />
    <result column="pid" jdbcType="BIGINT" property="pid" />
  </resultMap>

  <sql id="Base_Column_List">
    cid, city, pid
  </sql>

  <select id="getCityByPid" parameterType="java.lang.Long" resultMap="BaseResultMap">
    select
      <include refid="Base_Column_List"/>
    from
    datav_city
    where pid = #{pid,jdbcType=BIGINT}
    order by cid asc
  </select>

</mapper>

4.dao.java

—ProvinceDao.java

import java.util.List;
 /**
 * 省份dao
 * @author wujianyu
 * @date 2018/7/31
 */
public interface ProvinceDao {
    /**
    * 查询所有省份
    * @return list
    * @author wujianyu
    * @date 2018/7/31
    */
    List<ProvinceEntity>  getAllProv();

    /**
    * 根据省获取省id
    * @param  province
    * @return  pid
    * @author wujianyu
    * @date 2018/7/31
    */
    Long getPidByProvince(String province);
}

—CityDao.java

import java.util.List;
/**
* 城市dao
* @author wujianyu
* @date 2018/7/31
*/
public interface CityDao {
    /**
    * 根据省份id获取城市列表
    * @param  pid 省份id
    * @return  list
    * @author wujianyu
    * @date 2018/7/31
    */
    List<CityEntity> getCityByPid(Long pid);
}

5.service.java 和serviceImpl.java

—ProvinceCityService.java

import com.alibaba.fastjson.JSONArray;

/**
 * @author wjy329
 * @date 2018/7/31
 * @description ${description}
 */
public interface ProvCityService {
    /**
    * 获取所有的省份
    * @return
    * @author wujianyu
    * @date 2018/7/31
    */
    JSONArray queryAllProv();

    /**
     * 根据省份id获取城市
     * @param pid
     * @return
     * @author wujianyu
     * @date 2018/7/31
     */
    JSONArray queryCityByPid(Long pid);

    /**
    * 根据省份获取省份id
    * @param  province
    * @return
    * @author wujianyu
    * @date 2018/7/31
    */
    Long queryPidByProvince(String province);
}

—ProvinceCityServiceImpl.java

import java.util.List;

/**
 * @author wjy329
 * @date 2018/7/31
 * @description ${description}
 */
@Service
public class ProvCityServiceImpl implements ProvCityService {
    @Autowired
    ProvinceDao provinceDao;
    @Autowired
    CityDao cityDao;
    @Override
    public JSONArray queryAllProv() {
        List<ProvinceEntity> result = provinceDao.getAllProv();
        return (JSONArray) JSONArray.parse(JSON.toJSON(result).toString());
    }

    @Override
    public JSONArray queryCityByPid(Long pid) {
        List<CityEntity> result = cityDao.getCityByPid(pid);
        return (JSONArray) JSONArray.parse(JSON.toJSON(result).toString());
    }

    @Override
    public Long queryPidByProvince(String province) {
        Long pid = provinceDao.getPidByProvince(province);
        return pid;
    }
}

6.ProvinceCityController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * @author wjy329
 * @date 2018/7/31
 * @description ${description}
 */
@Controller
@RequestMapping("/district")
public class ProvCityController {
    @Autowired
    ProvCityService provCityService;

    @ResponseBody
    @RequestMapping(value = "/prov", produces = "application/json;charset=UTF-8")
    public JSONArray provList() {
        //从数据库中获取到数据
        JSONArray rs = this.provCityService.queryAllProv();
        return rs;
    }

    @ResponseBody
    @RequestMapping(value = "/city", produces = "application/json;charset=UTF-8")
    public JSONArray cityList(String province) {
        Long pid = this.provCityService.queryPidByProvince(province);
        //从数据库获取数据
        JSONArray rs = this.provCityService.queryCityByPid(pid);
        return rs;
    }
}

7.index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>update页面展示</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/index/common.css" media="all" />

    <!-- 配置脚本 -->
    <script th:src="@{/plugins/layui/layui.js}"></script>
    <script th:src="@{/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/js/index.js}"></script>
</head>
<body class="childrenBody">
<div class="layui-inline">
<form class="layui-form" id="form" style="margin: 10px" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">选择地区</label>
        <div class="layui-input-inline">
            <select name="prov" id="prov" lay-filter="prov">
                <option value="">请选择省</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="city" id="city" lay-filter="city">
                <option value="">请选择市</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-input-inline" >
        <button class="layui-btn"  lay-submit="" lay-filter="update_btn" id="update_btn">查询</button>
    </div>
    </div>
</form>
</div>
</body>
</html>

8.index.js

layui.use(['form', 'laydate','jquery'], function () {
    var form = layui.form,
         layer = layui.layer,
        laydate = layui.laydate,
        $ = layui.$;

    getProv();
   
    function getProv() {
        $('#prov').html(""); //每次点击清除数据
        $.ajax({
            url: "/district/prov",
            type: "get",
            dataType: "json",
            success: function (result) {
                var optionString = "";
                $.each(result, function (index, item) {
                    optionString +="<option value=" + item.province
                        + ">" + item.province + "</option>"
                });
                $('#prov').append("<option value=''>请选择省</option> "
                    +optionString);
                form.render('select');
            }
        });
    }
    form.on('select(prov)', function(data){
        //得到被选中的省
        var prov = data.value;
        //根据省获取市
        getCity(prov);
    });
    function getCity(prov) {
        $('#city').html(""); //每次点击清除数据
        $.ajax({
            url: "/district/city?province="+prov,
            type: "get",
            dataType: "json",
            success: function (result) {
                var optionString = "";
                $.each(result, function (index, item) {
                    optionString +="<option value=" + item.city
                        + ">" + item.city + "</option>"
                });
                $('#city').append("<option value=''>请选择市</option> "
                    +optionString);
                form.render('select');
            }
        });
    }
});

页面实现点击添加到文本框效果

也不知道这个到底是什么,就简单记录一下,就是实现点击下拉框添加到一个框中,可以判断重复,也可以点击删除,在网上找了些没找到合适的,自己简单的弄了一个。很丑,别介意。。。

0.实现的原理

    下拉选择框下面是一个隐藏的input,input的value是提交的数据,随着点击事件动态改变,负责显示的是一个div,div中动态的添加<li>,即可实现所需的效果;

1.html

我这里是基于layui,所以引入layui的js和css,还需引入自己写的labeltags.csslabeltags.js;

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
   <!-- 标签文本的样式 -->
   <link rel="stylesheet" href="/plugins/tags/css/labeltags.css"/>
</head>
<body class="childrenBody">
    <div id="userAdd">
       <form class="layui-form"  action="" id="Form" >
          <div class="dialogForm" style="margin-top:20px;padding-right: 80px;">
         
            <div class="layui-form-item">
               <label class="layui-form-label">选择人</label>
               <div class="layui-input-block">
                  <select id="allUser" name="allUser" lay-filter="allUser" lay-verify="" lay-search>
                  </select>
               </div>
            </div>
            <div class="layui-form-item" style="display: none">
               <div class="layui-input-block">
                  <input type="text" class="layui-input" id="user" name="user">
               </div>
            </div>

            <div class="layui-form-item">
               <div class="layui-input-block">
                  <div class="label-box" id="labelBox"></div>
               </div>
            </div>

           
            <div class="layui-form-item">
               <div class="layui-input-block">
                  <button class="layui-btn" lay-submit="" lay-filter="addGetForm" >立即提交</button>
                  <button type="reset" id="btnReset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
          </div>
       </form>
    </div>
   <script type="text/javascript" src="/plugins/layui/layui.js"></script>
   <script type="text/javascript" src="/js/labeltags.js"></script>
</body>
</html>

2.labeltags.css

li{display:inline-block; width:100px; height:20px; border:1px solid #E6E6E6;margin:2px; text-align: center; -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius:15px;}
.label-box{width:300px;height:100px;border:1px solid #E6E6E6;border-top:2px solid #E6E6E6;border-radius:3px; overflow-x: hidden;overflow-y: scroll;}
.label-box span{display:inline-block;background:#99CCFF;padding:6px 14px;color:#fff;border-radius:3px;margin:0 3px;}

3.labeltags.js (只写出实现效果核心的js)

layui.config({
     base: '/js/modules/' 
}).use(['form','layer','table','jquery','laypage'],function(){
   var form = layui.form,
      layer = parent.layer === undefined ? layui.layer : parent.layer,
      laypage = layui.laypage,
      table = layui.table,
      $ = layui.jquery;
    //初始化下拉框,获取所有用户的名字
    getUsers();

    form.on('select(allUser)', function(data){
        console.log(data.value); //得到被选中的值
        var userInput = $("#user").val();//先拿到input的值
        //判断input的值,如果为空直接添加,不为空的话将逗号和值添加
        if(userInput != "" && userInput != undefined){
            var valObj = userInput.split(",");
            for ( var i = 0; i <valObj.length; i++){
                if(valObj[i] == data.value){
                    layer.msg('名字已存在', {time: 1000, icon:2});
                    return false;
                }
            }
        }
        //上面判断完成后添加到div中的li
      $('#labelBox').append("<li>"+"<i class='layui-icon'>&#x1006;</i>"+"<a>"+data.value+"</a>"+"</li>");
        if($("#user").val()==""||$("#user").val()==null){
            $("#user").val(data.value);
        }else{
            $("#user").val($("#user").val()+","+data.value);
        }
    });
    //li的点击事件,点击后删除
    $('#labelBox').on('click','li',function () {
       var closeText = $(this).find('a').text();
        console.log(closeText);
        $(this).remove();
        var userInput = $("#user").val();//先拿到input的值
        //删除点击的li对应的input的value
        if(userInput != "" && userInput != undefined){
            var valObj = userInput.split(",");
            $("#user").val('');
            for ( var i = 0; i <valObj.length; i++){
                if(valObj[i] != closeText){
                    if($("#user").val()==""||$("#user").val()==null){
                        $("#user").val(valObj[i]);
                    }else{
                        $("#user").val($("#user").val()+","+valObj[i]);
                    }
                }
            }
        }
    });

   
   //获取用户
   function getUsers() {
        $('#allUser').html(""); //每次点击清除数据
        $.ajax({
            url: "/user/getList",
            type: "get",
            dataType: "json",
            success: function (result) {
                $.each(result, function (index, item) {
                    $('#allUser').append("<option value=" + item.username
                        + ">" + item.username + "</option>")
                });
                form.render('select');
            }
        });
    }

});

4.效果展示:

3333.gif

这个展示的动态的li的添加和删除。

33334.gif

Layui 下拉框select异步加载数据

这个经常用到,但是老是记不住,好记性不如烂笔头,今天就将这个记录下来。

function getStudents () {
    $('#student').html(""); //每次点击清除数据,不添加这个会数据重叠
    $.ajax({
        url: "/xxx/getList",
        type: "get",
        dataType: "json",
        success: function (result) {
            var optionString = "";
            $.each(result, function (index, item) {
                optionString +="<option value=" + item.studentName
                    + ">" + item.studentName + "</option>"
            });
            $('#student').append("<option value=''>请选择</option> "+optionString);
            form.render('select');
        }
    });
}

也可以直接each返回的结果,默认将选中第一个遍历的数据,上面这种方式会默认显示请选择,不会直接显示数据。

Layui 时间戳转日期格式 – 两种方法

这里记录两种,第一种比较麻烦,需要写出方法,第二种就是直接引入layui的工具集直接完成即可。

一、第一种(比较麻烦)

1.html

 在html页面的下方写上

<script id="createTime" type="text/html">
    {{createTime(d.creatTime)}}
</script>

createTime(d.createTime) : 前面红色的createTime是函数名字,后面d.createTime的createTime是你返回数据的字段名称。关于d是什么,可以查看layui的文档

image.png

2.js

在js中,现在表格那里加上模板,即:templet

{field:'createTime',  title: '时间',templet: '<div>{{ layui.laytpl.toDateString(d.createTime)}}</div>'}

然后,写函数

    //时间戳的处理
    layui.laytpl.toDateString = function(d, format){
        var date = new Date(d || new Date())
            ,ymd = [
            this.digit(date.getFullYear(), 4)
            ,this.digit(date.getMonth() + 1)
            ,this.digit(date.getDate())
        ]
            ,hms = [
            this.digit(date.getHours())
            ,this.digit(date.getMinutes())
            ,this.digit(date.getSeconds())
        ];

        format = format || 'yyyy-MM-dd HH:mm:ss';

        return format.replace(/yyyy/g, ymd[0])
            .replace(/MM/g, ymd[1])
            .replace(/dd/g, ymd[2])
            .replace(/HH/g, hms[0])
            .replace(/mm/g, hms[1])
            .replace(/ss/g, hms[2]);
    };

//数字前置补零
    layui.laytpl.digit = function(num, length, end){
        var str = '';
        num = String(num);
        length = length || 2;
        for(var i = num.length; i < length; i++){
            str += '0';
        }
        return num < Math.pow(10, length) ? str + (num|0) : num;
    };

这样前台的时间就会显示日期格式。

image.png

二、第2种(简单、方便)

1.html页面不需要操作,爽不爽   

2.js

layui.use(['form','layer','table','jquery','laypage','util'],function(){
   var form = layui.form,
      layer = parent.layer === undefined ? layui.layer : parent.layer,
      laypage = layui.laypage,
      table = layui.table,
      $ = layui.jquery,
      util = layui.util; //注意这行,很重要
      
   var logTable = table.render({
       cols: [[
        ...中间省略其它代码...
         ,{field:'createTime',  title: '时间',templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
       ]]
     });

});

js代码如上,必须引入util工具集

layui.use(['form','layer',…省略其它…,'util']),function(){

    ……

    var util = layui.util;

}

然后在需要转换时间的哪一行后面加上模板即可。

templet:"<div>{{layui.util.toDateString(d.createTime)}}</div>"

createTime是你的列名(也是返回数据的字段名)

是不是感觉老简单了。

image.png