总结使用layui遇到的问题

layui select 模糊搜索

1.使用layui前端框架，需要在下拉框中进行模糊查询

解决:只需要在select标签里加 lay-search就可以了

 <div class="layui-input-inline">
             <select name="artistId" lay-verify=""  class="layui-select"  lay-search>
                     <option value="">请选择艺术家</option>
                <#list artistSelect as artist>
                  <option value="${artist.artistId}">${artist.artistName}</option>
                 </#list>
          </select>
  </div>

2.使用layui前端框架，需要动态的添加模板

解决：使用模板引擎 - layui.laytpl

//第一步：编写模版。你可以使用一个script标签存放模板，如：

<script id="artistTpl" type="text/html">
        <div id="artist_{{d.index}}">
            <div class="layui-input-block" style="margin-bottom: 15px;">
                <input type="hidden" name="otherType[{{d.index}}]" value="{{d.otherType}}">
                <div class="layui-input-inline">
                    <input type="text" name="otherDate[{{d.index}}]" id="artCreateTime_{{d.index}}"
                           placeholder="时间" autocomplete="off" class="layui-input" value="[otherDate]">
                </div>
                <div class="layui-input-block" style="margin-left: 200px">
                    <input type="text" id="" name="otherDesc[{{d.index}}]" lay-verify="length255" placeholder="[flag]"
                           autocomplete="off"
                           class="layui-input" value="[otherDesc]">
                    <input type="hidden" name="otherFile[{{d.index}}]" value="">
                </div>
            </div>

        </div>
    </script>

说明： 因为是动态的生成这段div，所以id要唯一，因此使用{{ d.field }}，name的值也类似。
placeholder="[flag]"，[flag]是用于动态替换。
添加方法如下：
//第二步：建立视图。用于呈现渲染结果。

 <div id="add_profession"></div>
 <div id="add_officialGroup"></div>
  <div id="add_noOfficialGroup"></div>

//第三步：渲染模版

var artistIndex= 0;
var otherType = 1;
function add(artistIndex,otherType){
  var laytpl = layui.laytpl;
  var getTpl = artistTpl.innerHTML;
  var $view;
  switch (otherType) {
        case 1:
            $view = $('#add_profession');//要添加的位置
            getTpl = getTpl.replace('[flag]', '职务');// [flag]进行替换
            break;
        case 2:
            $view = $('#add_officialGroup');
            getTpl = getTpl.replace('[flag]', '官方社会团体');
            break;
        case 3:
            $view = $('#add_noOfficialGroup');
            getTpl = getTpl.replace('[flag]', '非官方社会团体');
            break;

  laytpl(getTpl).render({index: artistIndex,otherType:otherType}, function (html) {
        $view.append(html)
    });
artistIndex ++；

 //日期
    laydate.render({
        elem: '#artCreateTime_' + artistIndex
    });
}

这样就可以了，如果是在初始化页面就要添加模板，需要引入layui.all.js

3.一个页面一次提交多个form

解决：$.extend()
案例：div结构如下：

<div>
	<form id="form1">...</form>
	<form id="form2">...</form>
	<form id="form3">...</form>
	<form id="form4">...</form>
	<button type="button" class="layui-btn“”  lay-filter="saveForm" >提交</button>
</div>

现在点击提交，需要提交四个form，

layui.use(['form', 'layer', 'upload'], function () {
   var form = layui.form;
   var params = $.extend({}, $("#form1").serializeJson(), $("#form2").serializeJson(), $("#form3").serializeJson(), $("#form4").serializeJson());
       params.artistId = $('#artistId').val();//单独赋值
      console.log(params);//这里就能拿到一个大对象了，里面包含了四个form的name属性和值
      ...
    });

4.使用layui前端框架，form表单按enter键自动提交的情况

解决：给提交按钮增加 type=“button” 属性

  <button type="button" class="layui-btn" lay-submit  lay-filter="saveForm"  >
                       <i class="layui-icon">保 存</i>
   </button>