layui的入坑之路

标签: layui  jq  layui图片

用一个简单的例子讲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的包,数据库的包,文件处理的包,这里只写前台。

原文链接:加载失败,请重新获取