easyUI通过JS在Dialog中显示HTML页面

JS为：

var Dialog = {
    // 打开一个模态框
    /**
     * 打开一个dialog窗口
     * @param width 宽度
     * @param height 高度
     * @param title dialog标题
     * @param url 需要打开的页面url
     * @param id 页面div的id 
     */
    openModal:function(width, height, title, url, id) {
        // 获取到div
        var win = $(id);
        win.dialog({
            dataType: 'jsonp',
            width: width,
            height: height,
            top : 10,
            title : title,
            modal: true,
            collapsible: true,
            minimizable : true,
            resizable : true,
            href:url
        });
    }
}

页面调用方式：

<body>
<!-- 表格 -->
<table id="dataGrid" class="easyui-datagrid" title="爬虫配置列表"
    style="width: 100%; height: auto"
    data-options="singleSelect:true,collapsible:false,url:'/MySpider/config/SimpleSpiderConfig/getSpiderList.do?pageNo=1&pageSize=10',
        method:'get',toolbar:toolbar">
        <thead>
            <tr>
                <th data-options="field:'id', width:80">爬虫编号</th>
                <th data-options="field:'preffix, width:80'">URL提取前缀</th>
                <th data-options="field:'url', width:200">入口URL</th>
                <th data-options="field:'nexturl', width:200, align:'right'">URL提取规则</th>
                <th data-options="field:'status', width:60, align:'center'">状态</th>
            </tr>
        </thead>
    </table>
    <!-- 模态窗口 -->
    <div id="win"></div>
    <!-- 对话框顶部工具栏 -->
    <!-- easyui核心JS文件 -->
    <script type="text/javascript"
        src="../../lib/easyui/1.5.4/jquery.min.js"></script>
    <script type="text/javascript"
        src="../../lib/easyui/1.5.4/jquery.easyui.min.js"></script>
    <!-- 自定义JS文件 -->
    <script type="text/javascript" src="../../js/config/gridToFormCommon.js"></script>
    <script type="text/javascript" src="../../js/Dialog.js"></script>
    <script type="text/javascript">
    var toolbar = [{
        text:'新增',
        iconCls:'icon-add',
        handler:function(){
            // 打开一个dialog窗口
            Dialog.openModal(900, 200,"新增","ConfigForm.html","#win");
        }
    },{
        text:'修改',
        iconCls:'icon-cut',
        handler:function(){alert('cut')}
    },'-',{
        text:'删除',
        iconCls:'icon-remove',
        handler:function(){alert('save')}
    }];
    $("#dataGrid").datagrid({
        onClickRow : function(index, row){
            gridDataToForm();
        }
    });
    </script>
</body>

easyUI通过JS在Dialog中显示HTML页面

猜你喜欢