layui的入坑之路

阿新 • • 發佈：2018-11-19

用一個簡單的例子講layui的內容，後期如果有機會會慢慢補充，如果有什麼不足的話希望閱者能多多包涵和建議。
注意:後臺處理的不是用框架，用的是麻煩的servlet，後面補充的話儘量用ssm框架補充，不過servlet都可以實現，框架應該就更簡單了，這個問題應該不用擔心。
實現效果：

登入介面，你看到的都有實現

這裡寫圖片描述

功能

搜尋:模糊搜尋(常規操作)
刪除:上面的刪除可以實現多行刪除，下面則為單行
匯出:匯出我這裡的需求是匯出Excel檔案，但是隻能匯入到預設路徑
匯入:更具路徑匯入(此處要設定,下文會說明)
分頁:分頁是可以的
借書，還書:用彈出層實現

表資料:有做直接更改，沒用彈出層(太麻煩)

接下來對程式碼的講解.
html

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title 
>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"> 
</script>
<script src="layui/layui.all.js"></script>
<!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 -->
</head>
<style type="text/css">
    .layui-table-cell{
        height:100px;
        line-height: 100px;
    }
</style>
<body>
    <hr>
    <div class="demoTable">
        <label class="layui-form-label">搜尋</label>
        <div class="layui-inline">
            <input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜尋</button>
        <button class="layui-btn layui-btn-danger" data-type="delSelect">刪除</button>
        <button class="layui-btn layui-btn-warm" data-type="download" >匯出</button>
        <button class="layui-btn layui-btn-normal" data-type="upload">匯入</button>
        <input type="file" name="file" id="file">
    </div>
    <hr>
    <table class="layui-hide" id="LAY_table_user" lay-filter="dataTable"></table>
    <div id="pagePicker"></div>
</body>
</html>

style 裡的內容是解決table每行高度顯示問題的，可以更具自己的需求調整。
layui的包路徑需要正確，還有需要注意控制元件的id,name,data-type,lay-filter

js就拿一部分
操作框

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-mini" lay-event="edit">編輯</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">刪除</a>
    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="borrowBook">借書</a>
    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="returnBook">還書</a>
    </script>

table

在table中的圖片是可以放大檢視的，效果如下，有一點需要注意，圖片的名字不能有中文(尚未解決)

layui.use(["form","laypage","layer","table","element","upload"], function(){
        var table = layui.table;
        var form=layui.form;
        var laypage=layui.laypage;
        var layer=layui.layer;
        var element = layui.element;
        var upload = layui.upload;
        //方法級渲染
        table.render({
             elem: '#LAY_table_user',
             url: 'servlet/BookController',
             done: function(res, curr, count) { //表格資料載入完後的事件
                   //呼叫示例
                   layer.photos({//點選圖片彈出
                       photos: '.layer-photos-demo',
                       anim: 1 //0-6的選擇，指定彈出圖片動畫型別，預設隨機（請注意，3.0之前的版本用shift引數）
                   });
               },
             cols: [[
                {checkbox: true, fixed: true},
                {field:'bookId', title: 'id', width:150, sort: true, fixed: true},
                {field:'bookName', title: '書名', width:150, sort: true,edit:true},
                {field:'bookCount', title: '剩餘數量', width:150, sort: true,edit:true},
                {field:'bookPath', title: '圖片', width:110,templet:function (d) {
                                                        var bookpath = "<%=basePath %>" +d.bookPath;
                                                        return '<div class="layer-photos-demo" style="cursor:pointer;">' +
                                                            '<img  src="' + bookpath + '" width="80px" height="100px"></div>';
                                                            }
                },
                {field:'right', title: '操作', width:350,toolbar:"#barDemo"}
                   ]],
             id: 'testReload',
             page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定義分頁佈局
              //,curr: 5 //設定初始在第 5 頁
                groups: 1, //只顯示 1 個連續頁碼
                first: false, //不顯示首頁
                last: false, //不顯示尾頁
                limit:2,
                limits:[1,2,3,4,5,6,7,8,9,10]
            }
        });

頁面中的button響應事件

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //這是layui所又除了表格按鈕之外的按鈕監聽實現出，屬性與button的data-type屬性相對應
        var $ = layui.$, active = {
            //搜尋按鈕 key的值是搜尋框的值
            reload: function(){
                var demoReload = $('#demoReload');
                //傳入搜尋值
                table.reload('testReload', {
                    where: {
                        key: demoReload.val()
                    }
                });
            },
            //多行刪除
            delSelect: function(){ 
                 //獲取選中資料
                 var checkStatus = table.checkStatus('testReload')
                 var data = checkStatus.data;
                 if(checkStatus.data.length==0){
                     layer.msg('請選擇要刪除的資料', {icon: 5});
                     return;
                 }
                 //詢問框
                 layer.confirm('是否刪除選中的資料？', {
                     btn: ['刪除','取消'] //按鈕
                 }, function(){
                     var ids = "";
                     //這裡先遍歷，然後到後臺處理
                     for(var i = 0; i < data.length ;i++){
                         ids += data[i].bookId + ";";
                     }
                     $.ajax({
                         url: "servlet/BookController",
                         type: "GET",
                         data:{"ids":ids,"memthodname":"mulDeleteBook" },
                         dataType: "json",
                         success: function(data){
                            if(data.data){
                                layer.msg("刪除成功", {icon: 6});
                                table.reload('testReload', {
                                    where: {
                                        key: ""
                                    }
                                });
                            }else{
                                layer.msg("刪除失敗", {icon: 5});
                            }
                         }
                     });
                 }, function(){
                     layer.closeAll();
                 });
            },
            //把表格轉化成Excel檔案(檔案上傳下載這部分慎用，沒有深入研究)
            download:function(){
                 $.ajax({
                     url: "servlet/BookController",
                     data:{"memthodname":"BookExport"},
                     type: "GET",
                     dataType: "json",
                     success: function(data){
                         if(data.data){
                             layer.msg("匯出成功", {icon: 6});
                         }else{
                             layer.msg("匯出失敗", {icon: 5});
                         }
                     }
                 });
            },
            upload:function(){
                var filePath = $('#file').val();
                if(filePath == ""){
                    layer.msg("請選擇檔案之後在匯入", {icon: 5});
                    return;
                }
                //alert(filePath);
                 $.ajax({
                     url: "servlet/BookController",
                     data:{"memthodname":"BookImport","filePath":filePath},
                     type: "GET",
                     dataType: "json",
                     success: function(data){
                         if(data.data){
                             layer.msg("匯入成功", {icon: 6});
                             table.reload('testReload', {
                                 where: {
                                     key: ""
                                 }
                             });
                         }else{
                             layer.msg("匯入失敗", {icon: 5});
                         }
                     }
                 });
            }

        };

table直接修改資料

        //監聽單元格編輯 dataTable 對應 <table> 中的 lay-filter="dataTable"
        table.on('edit(dataTable)', function(obj){
            var value = obj.value, //得到修改後的值
                    data = obj.data, //得到所在行所有鍵值
                    field = obj.field; //得到欄位
            //layer.msg('[ID: '+ data.userId +'] ' + field + ' 欄位更改為：'+ value);
            $.ajax({
                url: "servlet/BookController",
                type: "POST",
                data:{"bookId":data.bookId,"memthodname":"edituv","field":field,"value":value},
                dataType: "json",
                success: function(data){
                    if(data.data){
                        //同步更新表格和快取對應的值
                        layer.msg("修改成功", {icon: 6});
                    }else{
                        layer.msg("修改失敗", {icon: 5});
                    }
                }

            });

        });

table中的按鈕

借書使用的是彈出層,編輯用的是layer.prompt，編輯只監聽其中的一項並做修改，沒有太大的意義，如果希望編輯能夠修改多個數據的話，需要自己做彈出層或者擴充套件layer.prompt.

        table.on('tool(dataTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'borrowBook'){
                var body;
                layer.open({
                    type: 2,
                    title: '' +
                    '<li id="icon" class="layui-icon layui-icon-release layui-anim layui-anim-scaleSpring" ' +
                    'style="font-size: 30px; color: #009688;" data-anim="layui-anim-scaleSpring"></li> 編輯 ',

                    shadeClose: true,
                    shade: false,
                    btn: ['新增'],
                    btnAlign: 'c',
                    maxmin: true, //開啟最大化最小化按鈕
                    area: ['470px', '500px'],//area: [window.screen.width / 2 + 'px', window.screen.height / 2 + 'px'], //寬高
                    content: "<%=basePath %>"   +"Dialog.html",
                    success: function(layero, index){
                        body = layer.getChildFrame('body',index);
                        body.find("input#bookname").val(data.bookName);
                    },
                    yes: function(layero, index){
                        var userName = body.find("input#username").val();
                        var stuName = body.find("input#stuname").val();
                        var bookName = body.find("input#bookname").val();
                        if(userName == null){
                            layer.msg("使用者名稱不能為空", {icon: 5});
                            return;
                        }
                        $.ajax({
                            url: "servlet/BookController",
                            type: "GET",
                            data:{"userName":userName,
                                  "memthodname":"addBorrow",
                                  "stuName":stuName,
                                  "bookName":bookName},
                            dataType: "json",
                            success: function(data){
                                if(data.data){
                                    layer.alert('借書成功!',function(){
                                        layer.closeAll();
                                        table.reload('testReload', {
                                             where: {
                                                 key: ""
                                             }
                                        });
                                    });
                                }else{
                                    layer.msg("借書失敗", {icon: 5});
                                }
                            }
                        });
                    }
                });
            } else if(obj.event === 'returnBook'){


            }else if(obj.event === 'del'){
                layer.confirm('真的刪除行麼', function(index){
                    console.log(data);
                    $.ajax({
                        url: "servlet/BookController",
                        type: "GET",
                        data:{"bookId":data.bookId,"memthodname":"deleteuv" },
                        dataType: "json",
                        success: function(data){
                            if(data.data){
                                obj.del();
                                layer.close(index);
                                layer.msg("刪除成功", {icon: 6});
                            }else{
                                layer.msg("刪除失敗", {icon: 5});
                            }
                        }

                    });
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,title: '修改 ['+ data.bookName +'] 的數量'
                    ,value: data.bookCount
                }, function(value, index){
                    EidtUv(data,value,index,obj);
                });
            }
        });

彈出層程式碼

彈出層程式碼就一起貼了，js程式碼和html寫在一起。
下面的圖片書名是table傳進去的，學生姓名是輸入學號之後非同步獲取的，這樣基本可以滿足彈出層的需求了。

<!DOCTYPE html>
<html>
<head>
<title>Dialog.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script src="layui/layui.all.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title ">
        <legend>
            <li id="icon"
                class="layui-icon layui-icon-face-smile layui-anim layui-anim-rotate "
                style="font-size: 30px; color: #1E9FFF;"
                data-anim="layui-anim-rotate"></li> <span style="font-size: 8px">請輸入借書資訊</span>
        </legend>
        <br>
        <div class="layui-field-box" style="width: 97%">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名 :</label>
                    <div class="layui-input-block">
                        <input type="text" name="stuname" id="stuname" disabled="disabled"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">書名 :</label>
                    <div class="layui-input-block">
                        <input type="text" name="bookname" id="bookname" disabled="disabled"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">使用者名稱/學號  :</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" id="username" lay-verify="title"
                            autocomplete="off" placeholder="請輸入學號或使用者名稱" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>
                <br>
                <br>
            </form>
        </div>
    </fieldset>
    <script type="text/javascript">
    layui.use(['layer', 'table','element','form','laydate'], function(){
          var form = layui.form,
          layer = layui.layer,
          layedit = layui.layedit,
          laydate = layui.laydate;
          //日期控制元件
          var dag=window.parent;
          laydate.render({
              elem: '#issueDate'
            });
        form.render(); 
    });
    //監聽身份證資訊
    $(function(){
          $("#username").blur(function(){
          var value=$(this).val();
          $.ajax({
            async:true,  //非同步載入
            data:{"userName":value,"memthodname":"findStuName"}, //引數
            type:"get",
            url:"servlet/BookController",
            dataType:"text",
            success:function(data){
                 var toObj = JSON.parse(data);
                 if(toObj.data.length <= 0){
                    layer.msg("沒有該學號的學生", {icon: 5});
                 }
                 //轉化成JSON字串
                 $("#stuname").val(toObj.data);
            }
          });
        });
    }); 
    </script>
</body>
</html>

到這裡所有的前臺程式碼就貼完了，這只是layui的一點點基礎內容，對於更高大上的東西后面還要研究，如果有機會的話我會繼續寫。
對了，上面的程式碼都是包含在

 layui.use(["form","laypage","layer","table","element","upload"], function(){

所以你如果是全拷貝了在最後還要加上 }); 不然一個簡單的錯誤找半天就冤枉了。

關於所有的前臺傳後臺，因為用的是servlet，所有值都可以用request接收
如果傳的是亂碼，那是中文的原因對於接收到的字串做格式轉化就可以了，如：

stuName = new String(stuName.getBytes("iso-8859-1"),"utf-8");

還有最重要的一點就是response的問題了，對於傳到前臺的資料可能回困擾新開始使用layui的cxy（本人也是），傳到前臺最關鍵的就是layui的url接收的值必須要滿足幾個欄位
你當然可以直接可以直接傳，但是那樣太麻煩了，可以做一個response的類（如果你嫌創類麻煩的話，網上應該有直接設值的方法，我記得有）
我貼上我的

package com.zse.ajax;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
public class Response<T> implements Serializable{
    //成功
    public static final String RESULT_SUCCESS = "success";
    //可以預見但是不能處理的異常, 如SQLException, IOException等等
    public static final String RESULT_ERROR = "error";

    private static final long serialVersionUID = -2049439550666128636L;

    // 標識變數
    private String result = RESULT_SUCCESS;                                                                                                                     
    // 陣列, 存放業務失敗提示
    private List<String> msg;
    // 物件, 存放欄位格式錯誤資訊
    private List<String> errors;

    private Integer code;

    private Integer count;

    private T data;


    public Response(){
        msg = new ArrayList<String>(1);
        errors = new ArrayList<String>(1);
        code=0;
    }
    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 String getResult() {
        return result;
    }

    public void setResult(String result) {
        this.result = result;
    }

    public List<String> getmsg() {
        return msg;
    }
    /**
     * 設定業務錯誤資訊
     * @param message
     */
    public void setMessage(String message) {
        this.msg.clear();
        this.msg.add(message);
    }
    public List<String> getErrors() {
        return errors;
    }
    /**
     * 設定系統錯誤資訊
     * @param error
     */
    public void setError(String error) {
        this.errors.clear();
        this.errors.add(error);
    }

    public T getData() {
        return data;
    }

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

類似這樣的類，像layui的欄位你新增，然後在建構函式賦值就OK了。

 Response<List<Book>> r = ResponseFactory.getDefaultSuccessResponse();
        r.setData(bookList);
        r.setCount(bookDao.getAllBooksCount());
        response.getWriter().print(JSONSerializer.toJSON(r).toString());

後臺像上面那樣寫前臺就匹配得到了。

到最後面，不要忘了導包。json的包，資料庫的包，檔案處理的包，這裡只寫前臺。

layui的入坑之路

table

頁面中的button響應事件

table直接修改資料

table中的按鈕

彈出層程式碼

layui的入坑之路

零基礎的自學前端之路，當年的入坑之旅

從入到放棄——快應用踩坑之路

angular踩坑之路：初探webpack

Angular4.0踩坑之路：探索子路由和懶加載

webpack踩坑之路 (2)——圖片的路徑與打包

記錄一下openvpn，填坑之路

angular4之爬坑之路（2）angular腳手引入第三方類庫

react爬坑之路（一）--報錯output.path不是絕對路徑

yum安裝LNMP+zabbix 坑之路

爬坑之路——用Fuel部署Openstack

tensorboard的可視化小白踩坑填坑之路

Vue 爬坑之路（一）—— 使用 vue-cli 搭建項目（增補）

Vue 爬坑之路（四）—— 與 Vuex 的第一次接觸

Vue 爬坑之路（一）—— 使用 vue-cli 搭建項目

Vue 爬坑之路（二）—— 組件之間的數據傳遞

Vue 爬坑之路（三）—— 使用 vue-router 跳轉頁面

爬蟲開坑之路(一)

Tinker + Bugly + Jenkins 爬坑之路

vue的爬坑之路（八）之----IOS：Safari不兼容Javascript中的Date問題

layui的入坑之路

table

頁面中的button響應事件

table直接修改資料

table中的按鈕

彈出層程式碼

相關推薦