Layui 主窗口调用 iframe 弹出框模块，获取控件的相应值

前言

最新使用layui，开发一个新的系统，layui界面美观，控件相对齐全，以前一直使用easyui来进行后台管理系统的开发，easyui的控件之强大只有使用过的人才知道。换layui后碰到N多问题，在这里记录一下，也提供给跟我一样碰到问题的小伙伴们，大家一起进步。

table组件

用过easyui的小伙伴门都知道，datagrid的控件功能非常强大。而layui的table控件只能说能满足基本需求。

table.render({
        elem: '#role_list',
        url: '这里为json接口', //模拟接口
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', width: 60, title: 'ID', sort: true},
            {field: 'code', title: '帐号', minWidth: 100},
            {field: 'name', title: '角色名', minWidth: 100},
            {field: 'createtime', title: '创建时间', width: 120},
            {field: 'state', title: '状态', width: 60},
            {title: '操作', width: 200, align: 'center', fixed: 'right', toolbar: '#role_list_handle'}
        ]],
        page: {layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh']},
        autoSort:true,
        limit: 30,
        height: 'full-105',
        text: {none: '暂无相关数据'}
    });

以上，需要注意的是：

1. 在数据源没有数据的时候，提示，“暂无相关数据”，应该这个写text: {none: ‘暂无相关数据’}。官网的demo例子是错的。
2. 排序这里，需要添加一个监听，它没办法根据你的url直接传给后台，重新readload。

使用open弹框时，iframe模式下，主窗与iframe窗口模块相互调用问题

在开发过程使用弹框的地方非常多，有很多时候经常会碰到，主窗的open一个弹出框后，保存时，需要去获取弹框里面的内容，如form,tree等模块数据调用，官网的例子给出来form的调用，这里就不再描述。我们有使用的过程中碰到在主窗要调用iframe的模块时，应当先获取其windows，再进行调用。

var iframeWindow = window['layui-layer-iframe' + index];
iframeWindow.layui.tree............(这里就可以操作tree里面的内容了)。

需要注意的是，在网上有很多使用

var chrild = layero.find('iframe').contents();
chrild.layui.tree (这样是调用不到的)。

同样，使用内置方法

var child = layer.getChildFrame();
child.layui.tree(这样是调用不到的)。

在iframe中调用上层窗口的模块就简单很多。直接

parent.layui.模块.方法;
//如刷新上层的表格
parent.layui.table.reload('id');

附注

目前碰到的问题，还在摸索当中，后续有使用上的问题，会标注更新，如有错误的地方，或更好的方法望留言指正，为感！！

本文转载链接