<!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>Complex Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="../themes/icon.css" target="_blank" rel="external nofollow" >
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
//$("#one").show();
//$("#two").hide();
$('#tt3').datagrid({
iconCls:'icon-save',
width:600,
height:350,
nowrap: false,
striped: true,
fit: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
onClickCell:function(index,field,value){
//alert(234);
if(field == "col4")
{
//$(".datagrid-wrap panel-body").height(100);
//$(".datagrid-view").height(100);
//$(".datagrid-body").height(100);
var t_index=parseInt(index)+1;
$("td[field=col4]").css("color","#000000");
$("td[field=col4]").eq(t_index).css("color","#00ffff");
}
}
});
$('#lmp_tab_2').datagrid({
iconCls:'icon-save',
width:600,
height:350,
nowrap: false,
striped: true,
fit: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
onClickCell:function(index,field,value){
//alert(234);
if(field == "col4")
{
//$(".datagrid-wrap panel-body").height(100);
//$(".datagrid-view").height(100);
//$(".datagrid-body").height(100);
var t_index=parseInt(index)+1;
$("td[field=col4]").css("color","#000000");
$("td[field=col4]").eq(t_index).css("color","#00ffff");
}
}
});
$('#lmp_3').datagrid({
url: 'datagrid_data2.json',
width: 700,
height: 300,
fitColumns: true,
nowrap:false,
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:120},
{field:'listprice',title:'List Price',width:80,align:'right',
styler:function(value,row,index){
if (value < 20){
return 'background-color:#ffee00;color:red;';
}
}
},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:250},
{field:'status',title:'Status',width:60,align:'center'}
]],
onClickCell:function(index,field,value){
//alert(234);
if(field == "status")
{
$("#two").show();
//alert(111);
//$(".panel datagrid").height(100);
//$(".datagrid-wrap.panel-body").height(100);
//$(".datagrid-view").height(100);
//$(".datagrid-view2").height(100);
//$(".datagrid-view1").height(100);
//panel-body panel-body-noheader panel-body-noborder
//panel-body panel-body-noheader panel-body-noborder
//$(".panel-body.panel-body-noheader.panel-body-noborder").height(200);
//Tab_2
$("#Tab_2").height(200);
//$("#Tab_2").height(200).width(100).css('color','red');
//$(".tabs-panels").height(200);
//$(".datagrid-body").height(200);
var t_index=parseInt(index)+1;
$("td[field=status]").css("color","#000000");
$("td[field=status]").eq(t_index).css("color","#00ffff");
}
},
rowStyler:function(index,row,css){
if (row.listprice>80){
return 'background-color:#6293BB;color:#fff;font-weight:bold;';
}
}
});
$(".tabs-title,.tabs-inner").click(function(){
alert(1234);
});
});
</script>
</head>
<body class="easyui-layout">
<div region="west" split="true" title="West Menu" style="width:280px;padding1:1px;overflow:hidden;">
<div class="easyui-accordion" fit="true" >
<div title="Title1" style="padding:10px;overflow:auto;">
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content1</p>
<p>content12</p>
</div>
<div title="Title2" selected="true" style="padding:10px;">
content2
</div>
<div title="Title3" style="padding:10px">
content3
</div>
</div>
</div>
<div region="center" title="Main Title" style="overflow:hidden;">
<div id="tt" class="easyui-tabs" >
<div id="Tab_1" title="Tab_1">
<div id="tab_1" title="tab_1" closable="true" style="padding:20px;width:600px;height:300px;">
<div id="lmp" title="lmp">
<table id="lmp_tab"></table>
</div>
</div>
</div>
<div id="Tab_2" title="Tab_2" closable="true" style="padding:20px;width:600px;height:300px;">
<div title="tab_2" >
<div title="tabs2" class="easyui-tabs">
<div id="lmp_3" title="lmp_3">
<table id="lmp_tab_2"></table>
</div>
</div>
</div>
</div>
</div>
<div id="two" iconCls="icon-reload" closable="true" style="width:600px;height:100px;overflow:hidden;padding:5px;">
<table id="tt3"></table>
</div>
</div>
</body>
</html>
![springMvc如何和前端页面交互，传输json数据springMvc和前端传输数据[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)