00002-layui 오른쪽 호출 페이지, PopupLayer

5540 단어 layui
이 기능은 오른쪽 검색 페이지를 팝업하는 것입니다.
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');

두 번째 인자가 있으면 비즈니스 사용자 검색에 전달됩니다.html 템플릿 페이지의 매개 변수.
여기, 비즈니스/비즈니스UserSearch, 상대 디렉터리 기본값:/layuiadmin/tpl/, 페이지 기본값은 html
businessUserSearch.html 코드:

  <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>


{{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.

좋은 웹페이지 즐겨찾기