十三、Layui的使用

一、layui的導(dǎo)入

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

  2. 在頁(yè)面中導(dǎo)入layui.js和layui.css,順便導(dǎo)入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數(shù)據(jù)格式：

{
    "code":0,       //數(shù)據(jù)狀態(tài)的字段名稱，默認(rèn)：code
    "msg":"",       //狀態(tài)信息的字段名稱，默認(rèn)：msg
    "count":1000,   //數(shù)據(jù)總數(shù)的字段名稱，默認(rèn)：count
    "data":[        //數(shù)據(jù)列表的字段名稱，默認(rèn)：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
        }
    ]      
}

根據(jù)格式創(chuàng)建實(shí)體類：

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. 自定義返回的數(shù)據(jù)格式

layui.use('table', function(){
  var table = layui.table;
  table.render({
 　　elem: '#test'
    ,url:'new2.json'
    ,cellMinWidth: 80 //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增
    ,page:true          //顯示分頁(yè)默認(rèn)不顯示
    ,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：局部定義當(dāng)前單元格的最小寬度，layui 2.2.1 新增
      ,{field:'experience', title: '積分', sort: true}
      ,{field:'score', title: '評(píng)分', sort: true}
      ,{field:'classify', title: '職業(yè)'}
      ,{field:'wealth', width:137, title: '財(cái)富', sort: true}
    ]]
    //用于對(duì)分頁(yè)請(qǐng)求的參數(shù)：page、limit重新設(shè)定名稱，如：
    ,request:{
        pageName: 'curr' //頁(yè)碼的參數(shù)名稱，默認(rèn)：page
        ,limitName: 'nums' //每頁(yè)數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit
    }
    //用于對(duì)返回的數(shù)據(jù)格式的自定義，如：
　　,response: {
          statusName: 'status' //數(shù)據(jù)狀態(tài)的字段名稱，默認(rèn)：code
          ,statusCode: 0 //成功的狀態(tài)碼，默認(rèn)：0
          ,msgName: 'hint' //狀態(tài)信息的字段名稱，默認(rèn)：msg
          ,countName: 'total' //數(shù)據(jù)總數(shù)的字段名稱，默認(rèn)：count
          ,dataName: 'rows' //數(shù)據(jù)列表的字段名稱，默認(rèn)：data
    }
 
  });
});

自定義后返回的數(shù)據(jù)格式：

{
    "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. 稍微難點(diǎn)的案例

提醒：記住導(dǎo)入layui.js

這是一套簡(jiǎn)單的增刪改查：
layui案例

難點(diǎn)在這：

點(diǎn)擊查詢批次---彈出批次列表---選擇其中一個(gè)批次---回到列表頁(yè)面，只顯示該批次的蘑菇操作況。
批次查詢
過(guò)濾后列表

列表頁(yè)面主要代碼：

<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="請(qǐng)輸入菌房從、菌房到或菌桶">
                    </div>
                    <div class="layui-inline" style="margin-left: 50px">
                    <label class="layui-form-label" style="width: auto">業(yè)務(wù)日期：從</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="">業(yè)務(wù)類型</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();

        /*//監(jiān)聽(tīng)提交
        form.on('submit(sub)', function(data){
            alert(111)

        });*/

        var dataTable = table.render({
            elem: '#dataTable',
            height: calcTablePos('#dataTable'),
            url: '/traceMushrootDibgrow/pageData', //數(shù)據(jù)接口
            page: true, //開(kāi)啟分頁(yè)
            cols: [[ //表頭
                {field: 'bizdate', align: 'center',width : 120,  title: '業(yè)務(wù)日期',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: '變動(dòng)前庫(kù)存'},
                {field: 'nownumto', align: 'center',width : 120, title: '變動(dòng)后庫(kù)存'},
                {field: 'cznr', align: 'center', title: '操作內(nèi)容',templet: function (d) {
                        if(d.bizname==='初始'){
                            return d.bizname+'至'+d.bartonnameto;
                        }else if(d.bizname==='銷售'){
                            return d.bizname+d.num+'個(gè)至'+d.marketsupercode+',金額為'+d.amount+'元';
                        }else if(d.bizname==='采收'){
                            return d.bizname+d.dibblename+d.quantity+'個(gè)';
                        }else if(d.bizname==='回收'){
                            return d.bizname+d.dibblename+d.quantity+'個(gè)';
                        }else{
                            return d.bizname+d.dibblename+d.num+'個(gè)';
                        }

                    }},
                 {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="對(duì)應(yīng)的值"
            var data = obj.data; //獲得當(dāng)前行數(shù)據(jù)
            var layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值（也可以是表頭的 event 參數(shù)對(duì)應(yīng)的值）
            var tr = obj.tr; //獲得當(dāng)前行 tr 的DOM對(duì)象

            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: '查看-菌桶生長(zhǎng)軌跡展示',
                            area:['800px', '600px'],
                            content: data //注意，如果str是object，那么需要字符拼接。

                        });

                    }
                });
                //同步更新緩存對(duì)應(yīng)的值
               // obj.update({username: '123',title: 'xxx'});
            }
        });
        }

        $('#queryPage').click(reloadTable);
        tableOn(); //條件查詢、表格重載數(shù)據(jù)后，需要再次渲染table中的tool控件元素，不然里面的toolbar無(wú)法使用

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

                    });

                }

            });
        });

    });
  
</script>

彈出層頁(yè)面主要代碼：

<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"個(gè)]</a></td>
    #end
    </tr>
  </thead>

</table>

<script>
    function dibb(dibbleid){
        //改變父頁(yè)面dataa元素的值
        parent.$("#dataa").val(dibbleid)
       //父頁(yè)面查詢
        parent.$("#queryPage").click();
        layer.closeAll();
      //清空父頁(yè)面dataa元素的值，不然上面賦予的過(guò)濾條件會(huì)一直存在，無(wú)法正常的全查詢
        parent.$("#dataa").val("");

    }

</script>

這里需要注意的是表格重載后需要重新加載table.on(),否則表格中的toolbar控件無(wú)法使用。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,021評(píng)論 25贊 709
  • 用兩張圖告訴你，為什么你的 App 會(huì)卡頓? - Android - 掘金 Cover 有什么料？ 從這篇文章中你...
    hw1212閱讀 13,984評(píng)論 2贊 59
  • I:用自己的語(yǔ)言重述知識(shí) 跟人溝通交流過(guò)程中，運(yùn)用講故事的方法可以讓對(duì)方建立情感共鳴，創(chuàng)造間接的體驗(yàn)，這種方法比嘮...
    我覺(jué)得我還能再搶救下閱讀 181評(píng)論 0贊 0
  • 四月已過(guò)中旬，酷熱逐漸來(lái)臨，看著道路旁的工人在不停地忙碌，思緒也不禁跟著他們的身影隨處定格。 人的體溫是三十幾度，...
    侯冬旭閱讀 341評(píng)論 0贊 0
  • 《基督山伯爵》 《平凡的世界》未完 《牧羊少年奇幻之旅》 《活著》 《兄弟》未完 《為何家會(huì)傷人》 《許三觀賣血記》
    小毛的閱讀 153評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容