关于同一页面内加载多个easyui的datagrid问题:
1.多个datagrid在页面加载时就显示出来，这时直接加载两个表格时是没问题的，都显示出来
.多个datagrid在页面加载时就显示各自的table,可以是不一样的table， 代码如下：
<div id="tb">
<div class="searchBox" style="margin-left:10px;">
<span>账单月份选择： </span>
<input readonly class="easyui-combobox" name="searchYear" id="searchYear" style="width:80px;">
<input readonly class="easyui-combobox" name="searchMonth" id="searchMonth" style="width:50px;">
<input readonly class="easyui-combobox" name="searchToYear" id="searchToYear" style="width:80px;">
<input readonly class="easyui-combobox" name="searchToMonth" id="searchToMonth" style="width:50px;">
<a href="javascript:void(0);" onclick="reload();" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
<fieldset>
<legend>列表</legend>
<div class="button">
<?php if (Helper::isPass('shop/profit/export')):?>
<a href="#" class="easyui-linkbutton" iconCls="icon-educe" plain="true" onclick="exportProfit()">导出</a>
<?php endif;?>
</div>
<div id="cost-tabs" class="easyui-tabs" style="width:1685px;height:50px;">
<div title="西南" style="padding:20px;display:none;">
</div>
<div title="西北" data-options="closable:false" style="overflow:auto;padding:20px;display:none;">
</div>
<div title="广东" data-options="closable:false" style="overflow:auto;padding:20px;display:none;">
</div>
<div title="汇总" data-options="closable:false" style="overflow:auto;padding:20px;display:none;">
</div>
</div>
</fieldset>
</div>
</div>
<div id="div-dg"><table id="dg"></table></div>
<div id="div-hzdg"><table id="hzdg"></table></div>
<script type='text/javascript'>
var TOTAL = 0;
$(function(){
setTimeout('reload()',500);
});
function loadDg() {
$('#dg').edatagrid({
width:'100%',
height: '800px',
pagination: true,
pageSize: <?php echo Yii::app()->params['defaultPagesize'];?>,
pageList: [<?php echo Yii::app()->params['defaultPagelist'];?>],
rownumbers: true,
idField: 'id',
toolbar: '#tb',
singleSelect: true,
fitColumns: true,
loadMsg: '数据载入中......',
columns:[[
{field:'manage_id',title:'',width:'280px',align:'center',
formatter : function (value,row,index){
return formatter.enums('<?php echo json_encode($manage);?>', value, row, index);
}
},
{field:'buss_type',title:'类型',width:'100px',align:'center',
formatter:function(value, row, index){
if(row.type == 1){ //西南
return '西南';
} else if(row.type == 2){ //西北
return '西北';
} else if(row.type == 3){ //广东
return '广东';
}
}
},
{field:'partner_id',title:'合作伙伴',width:'280px',align:'center',
formatter : function (value,row,index){
return formatter.enums('<?php echo json_encode($partner);?>', value, row, index);
}
},
{field:'1_month',title:'1月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 1)
}
},
{field:'2_month',title:'2月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 2)
}
},
{field:'3_month',title:'3月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 3)
}
},
{field:'4_month',title:'4月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 4)
}
},
{field:'5_month',title:'5月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 5)
}
},
{field:'6_month',title:'6月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 6)
}
},
{field:'7_month',title:'7月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 7)
}
},
{field:'8_month',title:'8月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 8)
}
},
{field:'9_month',title:'9月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 9)
}
},
{field:'10_month',title:'10月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 10)
}
},
{field:'11_month',title:'11月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 11)
}
},
{field:'12_month',title:'12月(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 12)
}
},
{field:'year_total',title:'合计(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatVal(row, 13)
}
},
]],
// 主表数据加载成功
onLoadSuccess:function(data){
TOTAL = data.total;
}
});
}
function loadHzDg() {
$('#hzdg').edatagrid({
width:'100%',
height: '790px',
pagination: true,
pageSize: <?php echo Yii::app()->params['defaultPagesize'];?>,
pageList: [<?php echo Yii::app()->params['defaultPagelist'];?>],
rownumbers: true,
idField: 'id',
toolbar: '#tb',
singleSelect: true,
fitColumns: true,
loadMsg: '数据载入中......',
columns:[[
{field:'manage_id',title:'经营单位',width:'280px',align:'center',
formatter : function (value,row,index){
return formatter.enums('<?php echo json_encode($manage);?>', value, row, index);
}
},
{field:'month',title:'所属月份',width:'100px',align:'center',
formatter : function (value,row,index){
return row.year + '年' + row.month + '月';
}
},
{field:'partner_id',title:'合作伙伴',width:'280px',align:'center',
formatter : function (value,row,index){
return formatter.enums('<?php echo json_encode($partner);?>', value, row, index);
}
},
{field:'out_ys_total',title:'运输(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatHzVal(row, 'ys')
}
},
{field:'out_cd_total',title:'海关(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatHzVal(row, 'cd')
}
},
{field:'out_cc_total',title:'仓储(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatHzVal(row, 'cc')
}
},
{field:'out_hz_total',title:'合计(收入/成本/毛利/毛利率)',width:'200px',align:'center',
formatter:function(value, row, index){
return formatHzVal(row, 'hz')
}
},
]],
// 主表数据加载成功
onLoadSuccess:function(data){
TOTAL = data.total;
}
});
}
function reload(){
$("#div-dg").css("display","block");
$("#div-hzdg").css("display","none");
loadDg();
var queryParams = getQueryParams();
$('#dg').datagrid('options').queryParams=queryParams;
$("#dg").datagrid('options').url='<?php echo Yii::app()->createUrl('shop/profit/list', array('flag'=>1));?>';
$("#dg").datagrid('load');
}
function getQueryParams(){
var queryParams = $('#dg').datagrid('options').queryParams;
queryParams.year = $("#searchYear").combobox('getValue') || '0';
queryParams.month = $("#searchMonth").combobox('getValue') || '0';
queryParams.toyear = $("#searchToYear").combobox('getValue') || '0';
queryParams.tomonth = $("#searchToMonth").combobox('getValue') || '0';
return queryParams;
}
function formatVal(row, num){
if(row == '' || row == 'undefined'){
return '0/0/0/'+'0%';
}
var out_column = "out_total_"+num;
var share_column = "share_total_"+num;
var ou = row[out_column];
var sh = row[sh_column];
ou = parseFloat(ou);
sh = parseFloat(sh);
if (isNaN(ou) == true && isNaN(sh) == true) {
return '0/0/0/'+'0%';
} else if(isNaN(ou) == true && isNaN(sh) == false){
return '0/'+sh+'/-'+sh+'/'+'-100%';
} else if(isNaN(ou) == false && isNaN(sh) == true){
return ou+'/0/+'+ou+'/'+'100%';
} else if(isNaN(ou) == false && isNaN(sh) == false){
var maoli = ou - sh; //毛利
if(ou == 0){
return '0/'+sh+'/-'+sh+'/'+'-100%';
}
if(maoli == 0){
return ou+'/'+sh+'/0/0%';
}
var maoliRate = (Math.round(maoli / ou * 10000) / 100.00)+"%"; //毛利率
return ou+'/'+sh+'/'+maoli+'/'+maoliRate;
}
return '0/0/0/'+'0%';
}
$('#cost-tabs').tabs({
border:false,
onSelect:function(title){
var url = '<?php echo Yii::app()->createUrl('admin/profit/list', array('flag'=>1));?>';
if(title == "西南"){
loadDg();
var queryParams = $('#dg').datagrid('options').queryParams;
queryParams.type = 1;
} else if(title == "西北") {
loadDg();
var queryParams = $('#dg').datagrid('options').queryParams;
queryParams.type = 2;
} else if(title == "广东") {
loadDg();
var queryParams = $('#dg').datagrid('options').queryParams;
queryParams.type = 3;
} else if(title == "汇总") {
setTimeout(loadHzDg(),500);
var queryParams = $('#hzdg').datagrid('options').queryParams;
queryParams.type = 4;
}
$('#type').val(queryParams.type);
if(title == "汇总"){
$("#div-hzdg").css("display","block");
$("#div-dg").css("display","none");
$('#hzdg').datagrid('options').queryParams=queryParams;
$("#hzdg").datagrid('options').url= url;
$("#hzdg").datagrid('reload');
$('#hzdg').datagrid('clearSelections');//清除已选择行
$('#hzdg').datagrid('clearChecked');//清除已选复选框
} else {
$("#div-dg").css("display","block");
$("#div-hzdg").css("display","none");
$('#dg').datagrid('options').queryParams=queryParams;
$("#dg").datagrid('options').url= url;
$("#dg").datagrid('reload');
$('#dg').datagrid('clearSelections');//清除已选择行
$('#dg').datagrid('clearChecked');//清除已选复选框
}
}
});
</script>解决使用easyui tab页中切换 不同datagrid 加载各自的数据