我这里的功能是弹出 右侧搜索 的页面:

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的更多相关文章

  1. layui(弹出层)

    首先引入文件 layui.css jquery.min.js layui.js 弹出层 data-method 后面的属性控制是什么弹窗,在js中写方法 <div class="sit ...

  2. 假如现在有一堆长度大于3小于9的电话号码,用座机呼叫,如果出现这样的号码【123和12345】那么12345将永远不会被拨出,因为拨到123的时候电话已经呼出了,试写一个函数输出所有不能被呼出的电话号码(java实现)

    解题: 假如现在有一堆长度大于3小于9的电话号码,用座机呼叫,如果出现这样的号码[123和12345]那么12345将永远不会被拨出,因为拨到123的时候电话已经呼出了,试写一个函数输出所有不能被呼出 ...

  3. 技术解析:锁屏绕过,三星Galaxy系列手机也能“被”呼出电话

    近期,由两位安全研究人员,Roberto Paleari及Aristide Fattori,发布了关于三星Galaxy手机设备安全漏洞的技术细节.据称,Galaxy手机可在锁屏状态下被未授权的第三方人 ...

  4. asterisk中使用dahdi通道呼出的注意事项

    asterisk中使用dahdi通道呼出的注意事项 在使用dahdi通道呼出的时候,可以在Dial中对呼出所使用的通道进行指定选择.以下面的例子来说明: 场景说明:数字板卡单E1,使用pri信令,1- ...

  5. iOS中如何呼出另一个应用

    我们经常会遇到在一个应用里面呼出另一个应用的需求,比如在文档里面点击地址,调用safari来打开网页:比如在文件浏览器里面点击某种文件,自动激活一个应用来打开文件. iOS里面对于这样的需求使用URL ...

  6. C#からネイティブDLLを呼び出す場合のVSからのデバッグのジレンマを解決する

    「C#を使う最大のメリットって.やっぱり.Visual Studioですよね!」って自信を持って言いたいですね. という心境ではあるんですが.私の仕事はどっちかというとC++よりなので.どうしても.D ...

  7. gentoo emacs 中文输入法 呼出

    最近在另外一台电脑上面安装 gentoo和 emacs,但是碰到奇怪的问题,在旧电脑上面,可以使用 ctrl + space 呼出输入法,而新电脑只能触发 复制功能. 经过在网上查找和两台电脑之间的对 ...

  8. layui关闭弹出层

    layui关闭弹出层,今天我在vscode中使用p parent.layer.closeAll()发现没效果 换成layer.closeAll()就解决了这个问题. 由此我觉得关闭layui关闭弹出层 ...

  9. 安卓手机H5底部fix定位,呼出键盘底部会上浮解决办法

    <script type="text/javascript">var windowInnerHeight = window.innerHeight; //获取当前浏览器 ...

随机推荐

  1. Inno Setup 升级时不再询问用户安装路径

    UsePreviousAppDir Description: When this directive is yes, the default, at startup Setup will look i ...

  2. JVM原理以及深度调优(二)

    JVM内存分配 内存分配其实真正来讲是有三种的.但对于JVM来说只有两种 栈内存分配: 大家在调优的过程中会发现有个参数是-Xss 默认是1m,这个内存是栈内存分配, 在工作中会发现栈OutOfMem ...

  3. OpenCV学习(1)——初步接触

    一.介绍OpenCV           OpenCV的全称是Open Source Computer Vision Library,是一个跨平台的计算机视觉库.OpenCV是由英特尔公司发起并参与开 ...

  4. Android 项目 Android 学习手册(一)

    前言: 当每次查询android 知识的时候,内心是凌乱的,总觉得要是有一个工具多好, 尤其在手机端如何可以查询的话,会非常完美,能大大减少选择查询的时间, 之前见了很多java 学习手册,把一些重要 ...

  5. 关于Python的JSON

    1.json模块load/loads.dump/dumps区别:(摘自这里) 实际上json就是python字典的字符串表示,但是字典作为一个复杂对象是无法直接转换成定义它的代码的字符串,python ...

  6. DP背包(一)

    01背包 for(int i=0;i<n;i++) //遍历每一件物品 for(int j=v;j>=wei[i];j--)//遍历背包容量,表示在上一层的基础上,容量为J时,第i件物品装 ...

  7. 图论--差分约束--POJ 3169 Layout(超级源汇建图)

    Like everyone else, cows like to stand close to their friends when queuing for feed. FJ has N (2 < ...

  8. 图论--二分图最佳完美匹配(KM模板)

    #include <iostream> #include <cstring> #include <cstdio> using namespace std; cons ...

  9. HDU-1857 畅通工程再续

    畅通工程再续 Problem Description 相信大家都听说一个"百岛湖"的地方吧,百岛湖的居民生活在不同的小岛中,当他们想去其他的小岛时都要通过划小船来实现.现在政府决定 ...

  10. P1516 青蛙的约会和P2421 [NOI2002]荒岛野人

    洛谷 P1516 青蛙的约会 . 算是手推了一次数论题,以前做的都是看题解,虽然这题很水而且还交了5次才过... 求解方程\(x+am\equiv y+an \pmod l\)中,\(a\)的最小整数 ...