十三、Layui的使用

一、layui的导入

1. 下载layui包
   https://www.layui.com/

2. 在页面中导入layui.js和layui.css,顺便导入jQuery包

<script type="text/javascript" src="js/jquery-2.1.4.js" charset="utf-8"></script>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />

二、layui的使用

1. layui的json数据格式：

{
    "code":0,       //数据状态的字段名称，默认：code
    "msg":"",       //状态信息的字段名称，默认：msg
    "count":1000,   //数据总数的字段名称，默认：count
    "data":[        //数据列表的字段名称，默认：data
            {
            "id":1,
            "username":"user-0",
            "sex":"女",
            "city":"城市-0",
            "sign":"签名-0",
            "experience":255,
            "logins":24,
            "wealth":82830700,
            "classify":"作家",
            "score":57
        },
        {
            "id":2,
            "username":"user-0",
            "sex":"女",
            "city":"城市-0",
            "sign":"签名-0",
            "experience":255,
            "logins":24,
            "wealth":82830700,
            "classify":"作家",
            "score":57
        }
    ]      
}

根据格式创建实体类：

public class DataGirdModel<T> {
    private Integer code=0;

    private Integer count;
    private List<T> data;


    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public Integer getCount() {
        return count;
    }


    public void setCount(Integer count) {
        this.count = count;
    }

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }
}

2. 自定义返回的数据格式

layui.use('table', function(){
  var table = layui.table;
  table.render({
 　　elem: '#test'
    ,url:'new2.json'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,page:true          //显示分页默认不显示
    ,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: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
    //用于对分页请求的参数：page、limit重新设定名称，如：
    ,request:{
        pageName: 'curr' //页码的参数名称，默认：page
        ,limitName: 'nums' //每页数据量的参数名，默认：limit
    }
    //用于对返回的数据格式的自定义，如：
　　,response: {
          statusName: 'status' //数据状态的字段名称，默认：code
          ,statusCode: 0 //成功的状态码，默认：0
          ,msgName: 'hint' //状态信息的字段名称，默认：msg
          ,countName: 'total' //数据总数的字段名称，默认：count
          ,dataName: 'rows' //数据列表的字段名称，默认：data
    }
 
  });
});

自定义后返回的数据格式：

{
    "status":0,
    "hint":"",
    "total":1000,
    "rows":[
        {
            "id":1,
            "username":"user-0",
            "sex":"女",
            "city":"城市-0",
            "sign":"签名-0",
            "experience":255,
            "logins":24,
            "wealth":82830700,
            "classify":"作家",
            "score":57
        },
        {
            "id":2,
            "username":"user-0",
            "sex":"女",
            "city":"城市-0",
            "sign":"签名-0",
            "experience":255,
            "logins":24,
            "wealth":82830700,
            "classify":"作家",
            "score":57
        }
    ]
}

3. 稍微难点的案例

提醒：记住导入layui.js

这是一套简单的增删改查： layui案例

难点在这：

点击查询批次---弹出批次列表---选择其中一个批次---回到列表页面，只显示该批次的蘑菇操作况。 批次查询 过滤后列表

列表页面主要代码：

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" id="queryForm">

            <div class="layui-form-item">
                <div class="layui-col-md11">
                    <label class="layui-form-label" style="width: auto">模糊查询</label>
                    <div class="layui-input-inline">
                        <input style="width: 250px" type="text"  name="key" id="key" class="layui-input" placeholder="请输入菌房从、菌房到或菌桶">
                    </div>
                    <div class="layui-inline" style="margin-left: 50px">
                    <label class="layui-form-label" style="width: auto">业务日期：从</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <input type="text" name="createTime1" id="createTime1"  class="layui-input" autocomplete="off">
                    </div>
                    <div class="layui-form-mid">至</div>
                    <div class="layui-input-inline" style="width: 130px;">
                        <input id="dataa" name="dibbleid" type="text" class="layui-input" lay-filter="dataa" style="display: none"></input>
                        <input type="text" name="createTime2" id="createTime2" class="layui-input" autocomplete="off">
                    </div>
                    <div class="layui-input-inline" style="width:150px" >
                            <select  lay-filter="biztype" name="biztype" id="biztype" lay-verify="type" lay-search="" class="layui-input" >
                            <option value="">业务类型</option> 
                            #foreach($item in $bizlist)                                                      
                            <option value="$!item.operstandtype">$!item.operstandname</option>
                            #end                            
                            </select>
                    </div>
                    </div>

                   <div class="layui-btn-group">
                    <button type="button" lay-submit class="layui-btn" lay-filter="sub" lay-submit="" id="queryPage" >查询</button>
                    <button type="button"  class="layui-btn" id="dibbDetail"><i class="layui-icon">&#xe638;</i>查询批次</button>
                   </div>
                </div>
             
            </div>

        </form>
        <div class="contain-img-table"><table id="dataTable" lay-filter="dataTable"></table></div>
        <script type="text/html" id="barDemo">
            <a id="detai" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        </script>
    </div>
</div>
<script>
layui.use(['laydate', 'table', 'layer', 'form','jquery'], function () {
  var laydate = layui.laydate, table = layui.table, layer = layui.layer, form =   layui.form,$= layui.jquery;
        form.render();
        //日期
        laydate.render({
            elem: '#createTime1',
            type: 'date'
        });
        laydate.render({
            elem: '#createTime2',
            type: 'date'
        });
        
        laydate.render({
            elem: '#createTimeRange',
            type: 'datetime',
            range: true
        });
        
        /* form.on('select(biztype)', function (data) {
            var biztype=$("#biztype").val();
            alert(biztype);
           
        });*/

        var dataa=$("dataa").val();

        /*//监听提交
        form.on('submit(sub)', function(data){
            alert(111)

        });*/

        var dataTable = table.render({
            elem: '#dataTable',
            height: calcTablePos('#dataTable'),
            url: '/traceMushrootDibgrow/pageData', //数据接口
            page: true, //开启分页
            cols: [[ //表头
                {field: 'bizdate', align: 'center',width : 120,  title: '业务日期',templet: function (d) {
                    //window.alert(d.bizdate);
                    return d.bizdate.toString().substr(0,10);
                    }},
                {field: 'bartonnamefrom', align: 'center',width : 120, title: '菌房从'},
                {field: 'bartonnameto', align: 'center',width : 120, title: '菌房到'},
                {field: 'dibblename', align: 'center', width : 80,title: '菌桶'},
                {field: 'dayage', align: 'center',width : 80, title: '日龄'},
                {field: 'bizname', align: 'center', width : 100,title: '操作类型'},
                {field: 'nownumfrom', align: 'center',width : 120, title: '变动前库存'},
                {field: 'nownumto', align: 'center',width : 120, title: '变动后库存'},
                {field: 'cznr', align: 'center', title: '操作内容',templet: function (d) {
                        if(d.bizname==='初始'){
                            return d.bizname+'至'+d.bartonnameto;
                        }else if(d.bizname==='销售'){
                            return d.bizname+d.num+'个至'+d.marketsupercode+',金额为'+d.amount+'元';
                        }else if(d.bizname==='采收'){
                            return d.bizname+d.dibblename+d.quantity+'个';
                        }else if(d.bizname==='回收'){
                            return d.bizname+d.dibblename+d.quantity+'个';
                        }else{
                            return d.bizname+d.dibblename+d.num+'个';
                        }

                    }},
                 {title: '操作', align: 'center',width : 100, toolbar:'#barDemo'}
            ]]

        });

        window.reloadTable = function() {

            var fields = {};
            $.each($('#queryForm').serializeArray(), function(i, field){
                fields[field.name] = field.value;
            });

            dataTable.reload({
                where: fields
            });
            $("#detai").click(tableOn())

        }
        window.tableOn = function(){

        table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'edit'){ //编辑
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url: '/traceMushrootDibgrow/delete',
                        data: {id: data.id},
                        async: false,
                        success: function (data, status, xhr) {
                            if (data.success) {
                                layer.close(index);
                            }
                            reloadTable();
                        }
                    });
                });
            } else if(layEvent === 'detail'){ //查看

                $.ajax({               
                    url: '/traceMushrootDibgrow/detailPage',
                    data: {id: data.id},
                    async: false,                                                     
                    success: function (data, status, xhr) {                  
                    //window.alert(data);                                     
                        layer.open({
                            type: 1,
                            title: '查看-菌桶生长轨迹展示',
                            area:['800px', '600px'],
                            content: data //注意，如果str是object，那么需要字符拼接。

                        });

                    }
                });
                //同步更新缓存对应的值
               // obj.update({username: '123',title: 'xxx'});
            }
        });
        }

        $('#queryPage').click(reloadTable);
        tableOn(); //条件查询、表格重载数据后，需要再次渲染table中的tool控件元素，不然里面的toolbar无法使用

        //查询批次
        $('#dibbDetail').click(function () {
            $.ajax({
                url: '/traceMushrootDibgrow/dibbDetail',
                async: false,
                success: function (data, status, xhr) {
                    layer.open({
                        type: 1,
                        title: '查询-请选择菌桶批次',
                        area:['800px', '400px'],
                        content: data //注意，如果str是object，那么需要字符拼接。

                    });

                }

            });
        });

    });
  
</script>

弹出层页面主要代码：

<table class="layui-table" >
  <thead>
    <tr >
   #foreach($d in $dibbAllList)  
    #set($foo = $velocityCount%4)
          #if($foo == 1)
       <tr>
          #end 
        <td ><a  href="javascript:void(0)" id="dibb" onclick="return dibb('${d.id}')">${d.bartonname}[ $!date.format('yyyy-MM-dd ',$!d.dibinputdate),"$!d.storagequantity"个]</a></td>
    #end
    </tr>
  </thead>

</table>

<script>
    function dibb(dibbleid){
        //改变父页面dataa元素的值
        parent.$("#dataa").val(dibbleid)
       //父页面查询
        parent.$("#queryPage").click();
        layer.closeAll();
      //清空父页面dataa元素的值，不然上面赋予的过滤条件会一直存在，无法正常的全查询
        parent.$("#dataa").val("");

    }

</script>

这里需要注意的是表格重载后需要重新加载table.on(),否则表格中的toolbar控件无法使用。