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

川长思鸟来 2022-05-26 06:54 304阅读 0赞

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>
        
        
        <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>
        
        <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>