00002 layer right call out page, PopupLayer

Keywords: Javascript Mobile

;

My function here is to pop up the search page on the right:

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();
                      }
                  );
              }
          });

The key points are: top.layui.admin.popupRight
Instead of: admin.popupRight
At the same time: the content of PopupLayer is the template page, and the opening code is:

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

If there is a second parameter, it is passed to the businessUserSearch.html template page.

Here, business/businessUserSearch, the relative directory is / layuiadmin/tpl / by default, and the page is html by default

The code of businessUserSearch.html is:

<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">User account</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">full name</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">department</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">role</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">Position information</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">mobile phone</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">Gender</label>
      <div class="layui-input-block">
        <select name="sex"  id="sex" >
          <option value="">Please select</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">state</label>
      <div class="layui-input-block">
        <select name="status"  id="status" >
          <option value="">Please select</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}} is the parameter passed from the parent page.

Parent page listening button event:

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
    });
});

To re render a page, close a page, or listen to events, add: top.layui

Posted by cmaclennan on Sat, 16 May 2020 07:58:48 -0700