在layui layer 弹出层中加载 layui table

该博客介绍如何在layui的layer弹出层中加载并显示layui的表格组件。当点击‘属性管理’按钮时,会打开一个弹窗,其中包含一个表格,列出了用户名和文本型数据,并提供了删除操作。此外,弹窗还支持点击‘新增属性’按钮来打开另一个弹层进行新增操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<button data-method="setTop" data-type="auto" class="layui-btn layui-btn-normal proMent">属性管理</button>
//    属性管理开始
    layui.use(['layer','table'], function(){
        var layer = layui.layer;
        var table = layui.table; //表格

    $(".proMent").click(function(){

        layer.open({
            type: 1, //此处以iframe举例
            title: '管理属性',
            area: ['400px', '600px'],
            shade: 0,
            offset: [ //为了演示,随机坐标
                $(window).height()-$(window).height()/2-400,
                $(window).width()-$(window).width()/2-200
            ] ,
            content: $("#firstLayer"),
            btn: ['新增属性', '确定'], //只是为了演示
            success:function(layero){
                //属性管理 第一个table弹窗开始
                table.render({
                    elem: '#demo'
                    ,height: '600px'
                    ,url: '/demo/table/user' //数据接口
                    ,title: '用户表'
                    ,cols: [[ //表头
           
<think>我们在使用Layui弹出时,经常需要重置表单状态,特别是复选框。根据用户需求,每次打开弹出时,需要重置复选框的选中状态。我们可以通过以下步骤实现: 1. 在弹出页面(子)中,编写一个重置复选框的函数。 2. 在父打开弹出时,可以传递重置函数给子,或者在子加载完成后自动重置。 3. 利用Layui的form模块重新渲染复选框。 具体实现如下: ### 方法1:在弹出页面加载时重置 在弹出页面(即子)中,我们可以利用Layui的`form`模块来重置复选框。在子页面的JavaScript中,可以在页面加载完成后立即执行重置操作。 假设子页面(/selectProduct)中的复选框结构如下: ```html <form class="layui-form"> <div class="layui-form-item"> <input type="checkbox" name="hobby" value="1" title="阅读"> <input type="checkbox" name="hobby" value="2" title="写作" checked> <input type="checkbox" name="hobby" value="3" title="运动"> </div> </form> ``` 在子页面的JavaScript中: ```javascript layui.use(['form'], function(){ var form = layui.form; // 重置所有复选框为未选中状态 $('input[type="checkbox"]').each(function(){ $(this).removeAttr('checked'); }); // 重新渲染复选框 form.render('checkbox'); }); ``` ### 方法2:父在打开弹出时传递重置指令 如果希望由父控制子的重置,可以在打开弹出时传递一个参数,告诉子需要重置。在子中监听父传递的参数。 父打开弹出时传递参数: ```javascript layer.open({ title: '选择产品', type: 2, area: ['70%', '60%'], content: '/selectProduct?reset=true', // 传递reset参数 // 其他参数... }); ``` 在子页面中,解析URL参数,如果存在reset参数且为true,则执行重置: ```javascript layui.use(['form', 'jquery'], function(){ var form = layui.form, $ = layui.jquery; // 获取URL参数 function getQueryParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } if (getQueryParam('reset') === 'true') { // 重置复选框 $('input[type="checkbox"]').each(function(){ $(this).removeAttr('checked'); }); form.render('checkbox'); } }); ``` ### 方法3:通过弹出的回调函数重置(推荐) 另一种更直接的方式是在父打开弹出后,通过操作子的DOM来重置。这需要利用`layer.open`的`success`回调函数,在弹出加载完成后执行重置操作。 父代码: ```javascript layer.open({ title: '选择产品', type: 2, content: '/selectProduct', area: ['70%', '60%'], success: function(layero, index){ // 获取子的body var body = layer.getChildFrame('body', index); // 在子中重置复选框 body.find('input[type="checkbox"]').each(function(){ $(this).removeAttr('checked'); }); // 重新渲染复选框,需要用到子的form var childForm = body.find('.layui-form'); if (childForm.length > 0) { layui.form.render('checkbox', childForm.selector); // 注意:这里需要指定渲染的表单容器 } } }); ``` 注意:由于Layui的form模块需要知道渲染的范围,所以我们在重新渲染复选框时需要指定表单的容器。但是,这种方式需要确保子Layui form已经初始化,并且父能够访问到子的DOM。由于跨iframe的操作,可能受到同源策略的影响,如果子与父同源则没有问题。 ### 方法4:使用子暴露的全局函数 在子中定义一个全局函数供父调用,例如: 子页面: ```javascript function resetCheckboxes() { $('input[type="checkbox"]').each(function(){ $(this).removeAttr('checked'); }); layui.form.render('checkbox'); } ``` 父在打开弹出后,可以通过`success`回调来调用子的全局函数: ```javascript layer.open({ // ...其他参数 success: function(layero, index){ var childWindow = layer.getChildFrame(window, index); childWindow.resetCheckboxes(); } }); ``` ### 总结 以上提供了多种方法来实现每次打开弹出时重置复选框的选中状态。根据实际项目结构和需求选择合适的方法。其中,方法3和方法4需要确保父能够访问到子的DOM或全局函数,适用于同源页面。方法1和方法2则更依赖于子自身的逻辑。 §§相关问题§§ 1. Layui中如何动态重置表单的其他元素(如单选、下拉框)? 2. Layui弹出如何实现数据回填? 3. 在Layui中,如何避免弹出多次打开导致的事件重复绑定? 4. Layui的复选框有哪些常用事件?如何监听复选框的选中状态变化?</think>### Layui 弹出每次打开时重置复选框选中状态的实现方法 在 Layui 弹出中重置复选框状态,可通过以下步骤实现: #### 核心方案 1. **在弹出打开时执行重置** ```javascript layer.open({ title: '选择产品', type: 2, content: '/selectProduct', success: function(layero, index) { // 获取子DOM const childBody = layer.getChildFrame('body', index); // 重置所有复选框 childBody.find('input[type="checkbox"]').prop('checked', false); // 重新渲染表单 layui.form.render('checkbox'); } }); ``` 2. **子独立重置方案(推荐)** 在弹出页面添加初始化函数: ```javascript // 子页面中 function resetCheckboxes() { $('input[type="checkbox"]').each(function() { $(this).prop('checked', false); }); layui.form.render('checkbox'); // 关键:重新渲染 } // 页面加载时自动执行 $(function() { resetCheckboxes(); }); ``` #### 完整实现示例 ```html <!--页面 --> <script> layui.use(['layer', 'form'], function(){ const layer = layui.layer; const form = layui.form; // 打开弹出按钮事件 $('#openLayer').click(function(){ layer.open({ title: '选择产品', type: 2, area: ['800px', '500px'], content: 'select.html', success: function(layero, index){ // 重置子复选框(方法1) const iframeWin = window[layero.find('iframe')[0]['name']]; iframeWin.resetCheckboxes && iframeWin.resetCheckboxes(); } }); }); }); </script> <!--页面 (select.html) --> <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">选项</label> <div class="layui-input-block"> <input type="checkbox" name="option" title="选项1"> <input type="checkbox" name="option" title="选项2"> <input type="checkbox" name="option" title="选项3"> </div> </div> </div> <script> // 子重置函数 function resetCheckboxes() { $('input[type="checkbox"]').each(function() { $(this).prop('checked', false); }); layui.form.render('checkbox'); // 必须重新渲染 } // 页面加载时重置 layui.use('form', function(){ resetCheckboxes(); }); </script> ``` #### 关键点说明 1. **跨iframe操作**:使用`layer.getChildFrame()`获取子DOM 2. **状态重置**:`prop('checked', false)`直接修改复选框状态 3. **重新渲染**:`layui.form.render('checkbox')`更新UI显示 4. **多页签处理**:结合`table.setLayuiPageCheckedIds()`处理表格复选框[^2] #### 常见问题解决 - **动态内容加载**:对于异步加载的复选框,在数据加载完成后调用`resetCheckboxes()` - **表格复选框**:使用`table.initPageCheckedIds('tableId', '')`清空选中[^2] - **事件冲突**:避免使用`shadeClose:true`时误触发重置,可改用`end`回调
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值