文章目錄

三、開發功能頁面

四、一些注意事項

一、前言

工作中有一個老項目需要加一個簡單的CRUD功能，原本項目中使用的前端UI是easyui-1.4，但是這個項目前端整體樣式用的很亂，所以用Layui的樣式來做這個新功能。在使用Layui過程中，遇到了各種問題這裏做個記錄。
開發環境：Spring3.1+JSP+Easyui1.4+Layui

二、準備工作

1.下載最新版本Layui

去官網下載最新版本的Layui,地址https://www.layui.com/
本文下載的是：Layui V2.5.6

2.在主頁面中引用layui

在項目主頁面中引入layui文件

<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="msthemecompatible" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=10;IE=9;IE=8" />

<title>XXX</title>
  <!-- 引用外部的JQuery-->
  <script type="text/javascript" src="js/jquery/jquery-1.11.1.min.js"></script>
  <!-- 引用easyui -->
  <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
 <!-- 這裏引入layui文件 -->
 <script type="text/javascript" src="js/layui/layui.all.js"></script>
 <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">
 <!-- 其他樣式 -->

<script type="text/javascript">
  $(function(){
	 
  });
</script>
</head>

<body class="easyui-layout">   
    <!-- 引入頭部界面 -->
    <div data-options="region:'north'" style="height:66px;border:0px;">
      XXXX
    </div>   
    <!-- 引入左邊菜單界面 -->
    <div data-options="region:'west'" title="導航菜單" class="westScroll"  style="width:244px;background:#ebeff8;border:0px; overflow:hidden; ">
      XXXX
    </div>   
    <!-- 引入中央面板 -->
    <div data-options="region:'center'" >
      XXX
    </div>   
</body>
</html>

這裏採用全模塊用法，之前採用模塊化的用法會報加載不了modules文件錯誤，所以引入layui.all.js文件

三、開發功能頁面

整個項目頁面佈局採用的是Easyui佈局，點擊左側菜單欄的功能菜單，調用的是easyui的tabs()方法：、

$('#centerTab').tabs('add', {
				title:menuTitle,    
				href:url,  
	    		closable:true
			});

1.列表頁面開發

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<style>
/* 修改工具欄樣式 */
.layui-table-tool {
  margin-bottom:10px;
  background-color:#f2f2f2;
  border-radius: 0 2px 2px 0;
}
</style>
<div style="padding: 20px;">

<!-- =========================查詢面板開始========================= -->
<div class="layui-row">
 <form class="layui-form">
 
    <div class="layui-inline">
        <input type="text" name="ENAME"
            placeholder="請輸入員工姓名" autocomplete="off"
            class="layui-input">
    </div>
    
    <div class="layui-inline">
        <input type="text" name="JOB"
            placeholder="請輸入工作崗位" autocomplete="off"
            class="layui-input">
    </div>
    
    <div class="layui-input-inline">
        <select name="deptNo">
            <option>請選擇部門</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
     </div>

    <div class="layui-inline" style="width:80px">
        <button class="layui-btn layui-btn-normal" lay-submit
            lay-filter="search">
            <i class="layui-icon">&#xe615;</i>查詢
        </button>
    </div>

    <div class="layui-inline" style="width:80px;margin-left:10px">
        <button type="reset"
            class="layui-btn layui-btn-primary">重置</button>
    </div>

   </form>
</div>
<!-- =========================查詢面結束========================= -->

 <table id="empTaleList" lay-filter="empFilter"></table>
 
</div>
<script type="text/html" id="toolbars">
  <div class="layui-btn-container">
    <button class="layui-btn  layui-btn-normal"  lay-event="addEmp">
      <i class="layui-icon">&#xe608;</i>   
                           新增
     </button>

    <button class="layui-btn " lay-event="editEmp">
      <i class="layui-icon">&#xe642;</i>   
                               修改
     </button>
   
   <button class="layui-btn  layui-btn-danger" lay-event="delEmp">
       <i class="layui-icon">&#xe640;</i>  
                           刪除
    </button>

  </div>
</script>


<script type="text/javascript">
    function addEmpShow(entityId) {
        var title = "新增員工";
        if(entityId){
            title = "編輯員工";
        }else{
        	entityId = "";
        }
    layer.open({
            type: 2,
            area:  ['500px', '480px'],
            fix: false, //不固定
            maxmin: true,
            shadeClose: true,
            shade: 0.4,
            title: title,
            content: 'emp/info.do?entityId='+entityId,
            btn : [ '確定', '取消' ],
            yes : function(index, layero) {
            	//獲取IFrame彈出層頁面對象
                var iframeWindow = window['layui-layer-iframe' + index], 
                //獲取表單提交按鈕
                submitButton = layero.find('iframe').contents().find('#empSubmit');
                
                //監聽彈出層表單submit提交
                iframeWindow.layui.form.on('submit(empSubmit)',
                    function(data) {
                	//獲取全部 表單字段
                	var field = data.field;
                	//獲取地址
                	var action = data.form['action'];
                	
                	//用ajax提交數據保存  成功就刷新列表
                	 $.post(action,field, function(resultJson, status, xhr) {
                          if (resultJson.success) {
                        	  layer.msg(resultJson.msg, {
                                  icon : 1
                              });
                              //數據刷新
                              parent.layui.table.reload('empTaleList', {}); 
                              layer.close(index); //關閉彈層
                          }else{
                              layer.msg(resultJson.msg, {
                                  icon : 0
                              });
                          }
                      },'json');
                        
                    });

                submitButton.trigger('click');
            }
        }); 
    }

    $(function() {
        var form = layui.form, 
            layer = layui.layer,
            table = layui.table;
        
         //數據表格中form表單元素是動態插入,所以需要更新渲染下 特別是select元素顯示不了
        form.render();
      
        table.render({
            elem : '#empTaleList',
            url : 'emp/datagrid.do',
            method : 'post',
            height : 'full-220',
            id : 'empTaleList',
            toolbar : '#toolbars', //開啓頭部工具欄，併爲其綁定左側模板
            defaultToolbar : [
              //自定義頭部工具欄右側圖標。如無需自定義，去除該參數即可
            ],
            page : true, //開啓分頁
            cols : [ [ //表頭
            {
                type : 'checkbox',
                fixed : 'left'
            }, {
                field : 'EMPNO',
                title : 'ID',
                hide:true,
            }, {
                field : 'ENAME',
                title : '員工姓名'
            }, {
                field : 'JOB',
                title : '工作崗位'
            }, {
                field : 'HIREDATE',
                title : '入職時間'
            }, {
                field : 'SAL',
                title : '薪水'
            }
            ] ],
            parseData : function(res) {
                return {
                    "code" : 0, //解析接口狀態
                    "msg" : "成功", //解析提示文本
                    "count" : res.total, //解析數據長度
                    "data" : res.rows//解析數據列表
                };
            },
            request : {
                pageName : 'page', //頁碼的參數名稱，默認：page
                limitName : 'rows' //每頁數據量的參數名，默認：limit
            },
            done: function (res, curr, count) {
               //數據渲染完的回調
              
            }
        });

        var empName, job,ids = [];

        //頭工具欄事件
        table.on('toolbar(empFilter)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);

            switch (obj.event) {
            
            case 'addEmp':
            	addEmpShow();
                break;
            case 'editEmp':
                var data = checkStatus.data;
                if (data.length == 0) {
                    layer.alert("請勾選要編輯的記錄!");
                    return;
                }
                if (data.length > 1) {
                    layer.alert("只能選擇一條要編輯的記錄!");
                    return;
                }
                addEmpShow(data[0].EMPNO);
                break;
            case 'delEmp':
                var data = checkStatus.data;
                if (data.length == 0) {
                    layer.msg("請勾選要刪除的記錄!", {
                        icon : 0
                    });
                    return;
                }

                layui.each(data, function(i, obj) {
                    ids.push(obj.EMPNO);
                });
                
                layer.confirm('確定要刪除選中的數據嗎？', {
                    icon : 3,
                    title : '提示信息'
                }, function(index) {
                	//調用ajax刪除
                    $.post('emp/delEmp.do',{
                           selectColNames:ids.toString()
                        }, function(resultJson, status, xhr) {
                            if (resultJson.success) {
                                layer.msg(resultJson.msg, {
                                    icon : 1
                                });
                                table.reload('empTaleList', {});
                            }else{
                                layer.msg(resultJson.msg, {
                                    icon : 0
                                });
                            }
                        },'json');
                    
                    layer.close(index);
                });
                break;
            //自定義頭工具欄右側圖標 - 提示
            case 'LAYTABLE_TIPS':
                layer.alert('這是工具欄右側自定義的一個圖標按鈕');
                break;
            }
            ;
        });

        form.on('submit(search)', function(data) {
        	empName = data.field.ENAME;
            job = data.field.JOB;
            
            table.reload('empTaleList', {
                where : {
                    'ENAME' : empName,
                    'JOB' : job
                }
            });
            return false;
        });


    });
</script>

2.表單頁面開發

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<% 
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<html>
  <head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
     <!-- 引用外部的JQuery-->
    <script type="text/javascript" src="js/jquery/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="<%=basePath%>/plug-in/layui/css/layui.css"> 
    
 <style type="text/css">
    /* 表單自定義樣式 */
     .layui-form-item .layui-input-inline {
        width:300px
      }
      .layui-form-item .layui-form-label {
        width:100px
      }
 </style>
  </head>
  <body>
      <form class="layui-form" action="<%=basePath%>/emp/saveEmp.do" lay-filter="empForm" id="empForm" 
          style="padding: 20px 0 0 0;">
          
        <input type="hidden" name="EMPNO" />
        
        <div class="layui-form-item">
          <label class="layui-form-label"  >員工姓名</label>
          <div class="layui-input-inline">
            <input type="text" name="ENAME" lay-verify="required"  placeholder="請輸入員工姓名" autocomplete="off" class="layui-input" >
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label"  >工作崗位</label>
          <div class="layui-input-inline">
            <input type="text" name="JOB" lay-verify="required" placeholder="請輸入工作崗位" autocomplete="off" class="layui-input" >
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label"  >入職時間</label>
          <div class="layui-input-inline">
            <input type="text" name="HIREDATE" id="HIREDATE" lay-verify="required" placeholder="請選擇入職時間"  class="layui-input" >
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label"  >薪水</label>
          <div class="layui-input-inline">
            <input type="text" name="SAL" lay-verify="required|number" placeholder="請輸入薪水" autocomplete="off" class="layui-input">
          </div>
        </div>
        
        <div class="layui-form-item layui-hide">
          <input type="button" lay-submit lay-filter="empSubmit" id="empSubmit" value="確認">
        </div>
    
     </form>
  </body>
  
  <script type="text/javascript" src="<%=basePath%>/plug-in/layui/layui.js" charset="utf-8"></script>
   
  <script type="text/javascript">
  
   layui.use(['form','laydate'],function(){
	   
       var form = layui.form,
           laydate = layui.laydate;
       
       laydate.render({
    	    elem: '#HIREDATE' //指定元素
    	    ,format: 'yyyy-MM-dd'
    	    ,value: new Date()
            ,show: true //直接顯示
       });
       
       //初始化表單值
       form.val("empForm",{
    	   EMPNO:"${empInfo.EMPNO}",
    	   ENAME:"${empInfo.ENAME}",
    	   JOB:"${empInfo.JOB}",
    	   HIREDATE:"${empInfo.HIREDATE}",
    	   SAL:"${empInfo.SAL}"
       });
       
       form.render();
   });
  </script>
</html>

3.效果截圖

四、一些注意事項

1.列隱藏

數據表格的表頭設置參數有一個hide參數(layui 2.4.0 新增),這個參數用來初始隱藏列。如果要隱藏數據主鍵ID列，則可以用這個參數。

2.表單更新渲染

在查詢面板使用select表單元素頁面展示不出來，需要調用form.render(); 方法更新表單才能展示。

3.表單回填

表單頁面一定要定義form對象，Form表單的數據初始化可以用表單賦值 / 取值方法：form.val(‘filter’, object);，其中「取值」功能爲 layui 2.5.5 開始新增。賦值方法的第二個參數是一個對象，本文采用Jsp的EL表達式取值構造這個對象。

       //初始化表單值
       form.val("empForm",{
    	   EMPNO:"${empInfo.EMPNO}",
    	   ENAME:"${empInfo.ENAME}",
    	   JOB:"${empInfo.JOB}",
    	   HIREDATE:"${empInfo.HIREDATE}",
    	   SAL:"${empInfo.SAL}"
       });

後端頁面跳轉代碼EmpController如下：

@Controller
@RequestMapping("/emp")
public class EmpController{
    /**
     * log4J聲明
     */
    private static Log log = LogFactory.getLog(EmpController.class);
    
    @Resource
    private EmpService empService;
    
    @RequestMapping("/list")
    public ModelAndView empViewList(HttpRequest request){
        return new ModelAndView("emp/empList");
    }
    
     /**
     * @Description: 跳轉表單頁面
     * @return ModelAndView  
     */
    @RequestMapping("/info")
    public ModelAndView empInfo(HttpServletRequest request){
        String entityId = request.getParameter("entityId");
        
        if ((StringUtils.isNotEmpty(entityId)) && (!entityId.equals("undefined"))) {
            Map<String, Object> empInfo = this.empService.getEmpById(entityId );
            request.setAttribute("empInfo", empInfo);
        }
        return new ModelAndView("emp/empInfo");
    }
    
}

4.表單自定義樣式

表單的自定義樣式要用 .layui-form-item 這個類選擇器開頭，比如本文的

.layui-form-item .layui-input-inline {
        width:300px
      }
      .layui-form-item .layui-form-label {
        width:100px
      }

這樣修改纔會有效果

EasyUI中使用Layui