标签：business   refresh   toc   arch   帐号   fun   role   目录   script   

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.

00002-layui 右侧呼出页面，PopupLayer

标签：business   refresh   toc   arch   帐号   fun   role   目录   script   

原文地址：https://blog.51cto.com/14816966/2495770