EasyUI中iframe嵌入页面，包含datagrid数据动态绑定，页面内容的高度自适应问题

最新推荐文章于 2023-05-09 15:24:46 发布

南十字座以南

最新推荐文章于 2023-05-09 15:24:46 发布

阅读量5.5k

点赞数

分类专栏：学习笔记之easyUI 学习笔记之.Net 文章标签：界面布局 datagrid

本文链接：https://blog.csdn.net/zq_lyndon/article/details/49516991

版权

学习笔记之easyUI 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

学习笔记之.Net

1 篇文章 0 订阅

订阅专栏

在我起初定义的tabs中，我想点击链接后跳出我的datagrid页面，涉及到datagrid的定义，数据的绑定，还有页面的适应高度问题.

这是我定义的datagrid界面

@{
    Layout = null;
}

<!DOCTYPE html>

<html style="width:100%;height:100%;">
<head>
    <meta charset=" utf-8">
<title>快递管理</title>
<link href="~/Content/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
<link href="~/Content/jquery-easyui-1.4.3/demo/demo.css" rel="stylesheet" />
<script src="~/Content/jquery-easyui-1.4.3/jquery.min.js"></script>
<script src="~/Content/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script src="~/Content/jquery-easyui-1.4.3/src/jquery.parser.js"></script>

</head>
<body class="easyui-layout">
    <div>
        <div title="未处理订单" data-options="iconCls:'icon-help',closable:true" style="overflow:hidden;padding:5px;height:500px;">
            <table id="dg" class="easyui-datagrid" title="订单列表" style="width:auto;height:auto;"
                   data-options=" url:'/ExpressManage/SelectAllNoHandleKuaidi',
                            rownumbers:true,
                            singleSelect:false,
                            fit:true,
                            autoRowHeight:false,
                            pagination:true,
                            toolbar:toolbar,
                            pageSize:10">
                <thead>
                    <tr>
                        <th data-options="field:'ck',checkbox:true"></th>
                        <th data-options="field:'UserID',sortable:true,width:100">用户名</th>
                        <th data-options="field:'KuaidiType',sortable:true,width:100">快递类型</th>
                        <th data-options="field:'PhoneNum',sortable:true,width:100">联系电话</th>
                        <th data-options="field:'RequestTiime',sortable:true,width:100">发布时间</th>
                        <th data-options="field:'Address',sortable:true,width:100">送货地址</th>
                        <th data-options="field:'Remark',sortable:true,width:100">备注</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</body>
</html>

上述代码中出现一行代码：data-options=” url:’/ExpressManage/SelectAllNoHandleKuaidi’，其中ExpressManage为我台控制器名字，SelectAllNoHandleKuaidi为Action名。
主要代码段如下：

public ActionResult SelectAllNoHandleKuaidi()
        {   
            KuaidiManageService kuaidiManageService=new KuaidiManageService();
            List<KuaidiInfo> list=new List<KuaidiInfo>();
            list = kuaidiManageService.FindAllNoHandleKuaidi();
            return Json(list, JsonRequestBehavior.AllowGet);
        }

在另外一个界面中，通过链接点击的方式，将上页面打开在tsbs中，代码段如下：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>快递管理</title>
    <link href="~/Content/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.4.3/demo/demo.css" rel="stylesheet" />
    <script src="~/Content/jquery-easyui-1.4.3/jquery.min.js"></script>
    <script src="~/Content/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="~/Content/jquery-easyui-1.4.3/src/jquery.parser.js"></script>  
    <script type="text/javascript">
        $(function () {
            bindEvent();
        });
        //绑定事件
        function bindEvent() {
            $(".detailLink123").click(function () {
                var title = $(this).text();
                var url = $(this).attr("url");
                var isExt = $('#tt').tabs('exists', title);//判断页签是否已经存在
                if (isExt) {
                    $('#tt').tabs('select', title);//如果存在选中
                    return;
                }
                $('#tt').tabs('add', {//添加页签
                    title: title,
                    width: $("#tt").parent().width(),
                    height: "auto",
                    content: createContent(url),
                    closable: true
                });

            });
        }
        function createContent(url) {
            var strHtml = '<iframe src="' + url + '" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>';
            return strHtml;
        }

    </script>  
</head>
<body class="easyui-layout">
    <div data-options="region:'west',split:true" title="菜单" style="width:280px;padding:1px;overflow:hidden;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="快递管理" data-options="iconCls:'icon-ok'" style="padding:10px;overflow:auto;">
                <a href="javascript:void(0)" class="detailLink123" url="/ExpressManage/ExpressManage">快递管理</a>
            </div>
        </div>
    </div>
    <div data-options="region:'center'" style="overflow:hidden;">
        @*/*-----tabs---*/*@
        <div class="easyui-tabs" id="tt" data-options="fit:true,border:false">
        </div>
    </div>
</body>
</html>