layui的入坑之路

用一个简单的例子讲layui的内容,后期如果有机会会慢慢补充,如果有什么不足的话希望阅者能多多包涵和建议。
注意:后台处理的不是用框架,用的是麻烦的servlet,后面补充的话尽量用ssm框架补充,不过servlet都可以实现,框架应该就更简单了,这个问题应该不用担心。
实现效果:


layui的入坑之路_第1张图片


layui的入坑之路_第2张图片


功能

  • 搜索:模糊搜索(常规操作)
  • 删除:上面的删除可以实现多行删除,下面则为单行
  • 导出:导出我这里的需求是导出Excel文件,但是只能导入到默认路径
  • 导入:更具路径导入(此处要设置,下文会说明)
  • 分页:分页是可以的
  • 借书,还书:用弹出层实现
  • 表数据:有做直接更改,没用弹出层(太麻烦)

接下来对代码的讲解.
html

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
<head>
<meta charset="utf-8">
<title>layuititle>
<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>

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就拿一部分
操作框



table

在table中的图片是可以放大查看的,效果如下,有一点需要注意,图片的名字不能有中文(尚未解决)
layui的入坑之路_第3张图片

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 '
' + ''" width="80px" height="100px">
'
; } }, {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 对应  中的 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: '' +
                    '
  • + 'style="font-size: 30px; color: #009688;" data-anim="layui-anim-scaleSpring">
  • 编辑 '
    , 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传进去的,学生姓名是输入学号之后异步获取的,这样基本可以满足弹出层的需求了。
    layui的入坑之路_第4张图片

    
    <html>
    <head>
    <title>Dialog.htmltitle>
    <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 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 msg;
        // 对象, 存放字段格式错误信息
        private List errors;
    
        private Integer code;
    
        private Integer count;
    
        private T data;
    
    
        public Response(){
            msg = new ArrayList(1);
            errors = new ArrayList(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 getmsg() {
            return msg;
        }
        /**
         * 设置业务错误信息
         * @param message
         */
        public void setMessage(String message) {
            this.msg.clear();
            this.msg.add(message);
        }
        public List 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> r = ResponseFactory.getDefaultSuccessResponse();
            r.setData(bookList);
            r.setCount(bookDao.getAllBooksCount());
            response.getWriter().print(JSONSerializer.toJSON(r).toString());

    后台像上面那样写前台就匹配得到了。

    到最后面,不要忘了导包。json的包,数据库的包,文件处理的包,这里只写前台。

    你可能感兴趣的:(java网页开发)