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