<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jslib/jquery-easyui-1.5.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jslib/jquery-easyui-1.5.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jslib/jquery-easyui-1.5.1/themes/inspur/user-ui-style.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
<div style="margin-bottom:10px">
<a class="btm2" href="javascript:addEchars('addEchars')">addEchars</a>
<a class="btm1" href="javascript:ajaxResult()">查询</a>
</div>
<div id="tab" class="easyui-tabs" style="width:650px;height:300px;" tabHeight="40px">
<div id="char" title="TAB1" style="padding:10px;">
<p>这是第一个TAB</p>
</div>
<div id="main" title="echars" style="width: 600px;height:400px;" closable="true"></div>
</div>
<script type="text/javascript">
var contextPath = '${pageContext.request.contextPath}';
var _productController = contextPath + '/plugins/modelmanage/modelproduct';
var _modularController = contextPath + '/plugins/modelmanage/appmodelmodular';
var _productGetPage = _productController + '/findPage2EasyUI.ilf';
var _modularGetPage = _modularController + '/findPage2EasyUI.ilf';
function ajaxResult() {
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/plugins/modelmanage/modelproduct/findAll.ilf",
success: function(msg){
//$.each(msg,function(index){
addtab(msg[1]);
//});
}
});
}
function addtab(product){
var productName = product.name;
var producttitle = "产品管理";
var tableId = "tab"+product.id;
//var contents = "<table><tr><td>产品名称</td><td>产品描述</td><td>产品版本</td><td>SVN地址</td></tr><tr><td>"+product.name+"</td><td>"+product.description+"</td><td>"+product.version+"</td><td>"+product.svn+"</td></tr></table>";
var productcontents = "<table id='"+tableId+"'></table>";
if ($('#tab').tabs('exists', producttitle)) {
$('#tab').tabs('select', producttitle);
} else {
$('#tab').tabs('add',{
title:producttitle,
closable:true,
content:productcontents
});
}
addproducttables(tableId,productName);
//第二个tab
var modulartitle = "模块管理";
var modularcontent = "<table id='tabmodular'></table>";
if ($('#tab').tabs('exists', modulartitle)) {
$('#tab').tabs('select', modulartitle);
} else {
$('#tab').tabs('add',{
title:modulartitle,
closable:true,
content:modularcontent
});
}
addmodulartables(product.id);
}
function addmodulartables(productId){
$('#tabmodular').datagrid({
url : _modularGetPage,
rownumbers : true,
pagination : true,
fitColumns : true,
fit : true,
queryParams : {
conditions : '[{"name":"productId","value":"'+productId+'"}]'
},
singleSelect : false,
pageSize : 25,
pageList : [ 25, 50, 75, 100 ],
remoteSort : true,
multiSort : true,
columns : [ [ {
field : 'id',
title : "id",
checkbox : true,
hidden : false,
width : 100,
sortable : false,
align : 'center'
},
{
field : 'productName',
title : "产品名称",
hidden : false,
width : 100,
sortable : true,
align : 'center'
},
{
field : 'name',
title : "模块名称",
hidden : false,
width : 100,
sortable : true,
align : 'center'
},
{
field : 'description',
title : "模块描述",
hidden : false,
width : 100,
sortable : true,
align : 'center'
},
{
field : 'plugins',
title : "插件名称",
hidden : false,
width : 100,
sortable : true,
align : 'center'
},
{
field : 'svn',
title : "SVN地址",
hidden : false,
width : 200,
sortable : true,
align : 'center'
},
{
field : 'version',
title : "模块版本",
hidden : false,
width : 100,
sortable : true,
align : 'center'
},
{
field : 'productId',
title : "productId",
hidden : true,
width : 100,
sortable : false,
align : 'center'
} ,
{
field : 'tempfield',
title : "功能表",
hidden : false,
width : 100,
sortable : false,
align : 'center',
formatter : function(value, row, index) {
return '<a href="javascript:showFunctions(' + row.id + ')">查看</a>';
}
}] ]
});
}
function addproducttables(tableId,name){
$("#"+tableId).datagrid({
url : _productGetPage,
rownumbers : true,
pagination : true,
fitColumns : true,
fit : true,
queryParams : {
conditions : '[{"name":"name","value":"'+name+'"}]'
},
singleSelect : false,
pageSize : 25,
pageList : [ 25, 50, 75, 100 ],
remoteSort : true,
multiSort : true,
columns : [ [ {
field : 'id',
title : "产品ID",
checkbox : true,
hidden : false,
width : 100,
sortable : false,
align : 'center'
},
{
field : 'name',
title : "产品名称",
hidden : false,
width : 100,
sortable : false,
align : 'center'
},
{
field : 'description',
title : "产品描述",
hidden : false,
width : 100,
sortable : false,
align : 'center'
},
{
field : 'version',
title : "产品版本",
hidden : false,
width : 100,
sortable : false,
align : 'center'
},
{
field : 'svn',
title : "SVN地址",
hidden : false,
width : 100,
sortable : false,
align : 'center'
} ] ]
});
}
//删除选择
$('#tab').tabs({
onBeforeClose: function(title,index){
var target = this;
$.messager.confirm('提示','是否要删除 '+title,function(r){
if (r){
var opts = $(target).tabs('options');
var bc = opts.onBeforeClose;
opts.onBeforeClose = function(){};
$(target).tabs('close',index);
opts.onBeforeClose = bc;
}
});
return false;
}
});
function addEchars(title){
var content = '<iframe scrolling="auto" frameborder="0" src="https://www.baidu.com/" style="width:100%;height:100%;"></iframe>';
if ($('#tab').tabs('exists', title)) {
$('#tab').tabs('select', title);
} else {
$('#tab').tabs('add',{
title:title,
closable:true,
content:content
});
}
}
</script>
</body>
</html>
easyUI 中增加tab,在tab中导入datagrid的表格
猜你喜欢
转载自blog.csdn.net/Long_day/article/details/80569079
今日推荐
周排行