00002-layui 右側呼出頁面，PopupLayer

我這裏的功能是彈出 右側搜索 的頁面：

top.layui.admin.popupRight({
              id: 'LAY_business_PopupLayer'
              ,area: '350px'
              ,success: function(layero,index){
                  var sexArr = top.layui.dict.options("sex");
                  var statusArr = top.layui.dict.options("status");
                  top.layui.view(this.id).render('business/businessUserSearch',$.extend(search_field,{
                      sexArr:sexArr,
                      statusArr:statusArr
})).done(
                      function () {
                          top.layui.form.render();
                      }
                  );
              }
          });

重點是： top.layui.admin.popupRight
而不是：admin.popupRight
同時：PopupLayer 的內容是模板頁面，打開代碼是：

top.layui.view(this.id).render('business/businessUserSearch');

如有第二個參數，則爲傳到 businessUserSearch.html模板頁的參數。

這裏，business/businessUserSearch, 相對目錄默認是： /layuiadmin/tpl/ , 且頁面默認爲html

businessUserSearch.html 代碼爲：

<script type="text/html" template id="TPL_businessUser">
  <div class="layui-form" style="padding-top:20px;padding-right:10px;height: 90%;" id="businessUserSearch">

    <div class="layui-form-item">
      <label class="layui-form-label">用戶賬號</label>
      <div class="layui-input-block">
        <input class="layui-input" name="userName" value="{{d.params.userName}}" autocomplete="off">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block">
        <input class="layui-input" name="name" value="{{d.params.name}}" autocomplete="off">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">部門</label>
      <div class="layui-input-block">
        <input class="layui-input" name="department" value="{{d.params.department}}" autocomplete="off">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">角色</label>
      <div class="layui-input-block">
        <input class="layui-input" name="role" value="{{d.params.role}}" autocomplete="off">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">職位信息</label>
      <div class="layui-input-block">
        <input class="layui-input" name="position" value="{{d.params.position}}" autocomplete="off">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">手機</label>
      <div class="layui-input-block">
        <input class="layui-input" name="tel" value="{{d.params.tel}}" autocomplete="off">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">性別</label>
      <div class="layui-input-block">
        <select name="sex"  id="sex" >
          <option value="">請選擇</option>
          {{#
          layui.each(d.params.sexArr, function(index, item){
          }}
          <option value="{{item[0]}}" {{d.params.sex==item[0]?'selected':''}}>{{item[1]}}</option>
          {{# }) }}
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">狀態</label>
      <div class="layui-input-block">
        <select name="status"  id="status" >
          <option value="">請選擇</option>
          {{#
          layui.each(d.params.statusArr, function(index, item){
          }}
          <option value="{{item[0]}}" {{d.params.status==item[0]?'selected':''}}>{{item[1]}}</option>
          {{# }) }}
        </select>
      </div>
    </div>

    <div class="layui-form-item" >
      <span class="layui-form-label"></span>
      <div class="layui-input-block" style="margin-right:0">
        <button class="layui-btn" lay-submit lay-filter="businessUser-list-search" id="businessUser-list-search">
          <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
        </button>
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="businessUser-list-refresh">
          <i class="layui-icon layui-icon-refresh-3 layuiadmin-button-btn"></i>
        </button>
      </div>
    </div>

  </div>
</script>

{{d.params.name}} 是父頁面傳過來的參數。

父頁面監聽按鈕事件：

top.layui.form.on('submit(businessUser-list-search)', function(data){
    var field = data.field;
    table.reload('businessUserListTable', {
        where: field
    });
    search_field = field;
    top.layui.layer.close(top.layui.admin.popup.index);
});
top.layui.form.on('submit(businessUser-list-refresh)', function(data){
    top.layui.$(':input').not(':button, :submit, :reset').val('').removeAttr('selected').removeAttr('checked')
    search_field = {};
    top.layui.form.render();
    table.reload('businessUserListTable', {
        where: null
    });
});

頁面從新渲染、關閉頁面、監聽事件， 都要 加 ：top.layui.