layer和easyUI结合显示弹窗

最新推荐文章于 2023-11-21 13:22:01 发布

原创最新推荐文章于 2023-11-21 13:22:01 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

easyUI 专栏收录该内容

4 篇文章

订阅专栏

本文展示了如何在父页面中通过layer打开一个包含easyUI组件的子页面进行公司信息搜索。当用户在子页面点击搜索按钮时，利用easyUI的数据网格加载数据，并在选择一行数据后，将选中的公司ID和名称回填到父页面的隐藏输入框和只读文本框中，实现了父子页面间的数据传递。

父页面：
<!-- 为接收子页面的参数做准备 -->
<input type="hidden" id="hidden_company_id" value=""/>
<input type="text" id="company_name" name="company_name" value="" readonly="readonly">
<i class="fa fa-search fa-lg" style="margin-left:-30px;" onclick="searchCompany();"></i>
function searchCompany(){
layer.open({
type: 2,
title: '公司信息',
skin:"layui-layer-lan",
shadeClose: false,
shade: 0.5,
area: ['400px','277px'],
content: ['/sbd/jsp/userManager/searchCompany.jsp'],
//关闭弹框后事件 
end: function () {
 
}
        });
}
子页面：easyUI
<script type="text/javascript">
//按钮点击事件
        $("#button_search").click(function(){
        //获取keyword
        var keyword = $("#keyword").val();
        
        $('#dg').datagrid({
        iconCls:'icon-save',
       url:'/sbd/findCompanyByKeyword.action',
       pagination: true,
       pageSize: 5,
       pageList: [5, 10],
       queryParams:{
        "keyword":keyword
       },
       fitColumns: true,
       singleSelect: true,
       loadMsg:'正在查询，请稍等...',
       columns:[[
    {field:'id',title:'ID',width:50,align:'center'},
    {field:'companyName',title:'公司名称',width:50,align:'center'}
       ]],
       //父子页面传参数
           onClickRow:function (rowIndex, obj, value) {
               parent.$("#hidden_company_id").val(obj.id);
               parent.$("#company_name").val(obj.companyName);
           }    
    })
       
        });
</script>