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>