`

用Ext在一个页面上画三个dataGrid

    博客分类:
  • Ext
 
阅读更多

evaluationresultsquery.jsp源代码:

 

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ include file="/apframe/common.jsp"%>
<script type='text/javascript'></script>
</head>
<body>
<div align="center"><br></div><script type="text/javascript">
var pageSize=18; //每页显示多少条数据
var userid='<foundation:property value="#session.userObject.userid"/>';

//学年学期
var xnxqArr = new Array();//初始化学期数据
pageCall.queryNamedSqlForJsonArr("teaqualityassessmentstu.selectXnxqName",{},function(list){
for(var k = 0; k < list.length; k++){
xnxqArr.push([list[k].XNXQ01ID, list[k].TERMCNAME]);
}
});

//按教师进行汇总信息----------------------START-----------------------------------------------
var record1=[
{name : 'PSI_NAME',type : 'string'},
{name : 'PSI_TIME',type : 'string'},
{name : 'TEACHERCODE',type : 'string'},
{name : 'TEACHERNAME',type : 'string'},
{name : 'SEXCODE',type : 'string'},
{name : 'TITLE',type : 'string'},
{name : 'UNITCNAME',type : 'string'},
{name : 'PTS_SCORE',type : 'string'},
{name : 'PTS_SAMPLE_SIZE',type : 'string'},
{name : 'PTS_ELIGIBLE_RATE',type : 'string'},
{name : 'PTS_UNIT_RANK',type : 'string'},
{name : 'PTS_SCHOOL_RANK',type : 'string'}
];

var recordHeads = Ext.data.Record.create(record1);

//定义数据源
var datastore = new Ext.data.Store( {
proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'<foundation:root/>gridPagingAction.action'})),
reader : new Ext.data.JsonReader( {
root : 'data',
totalProperty : 'totalProperty'
}, recordHeads),

remoteSort : false
});


//定义sql数据参数
datastore.on('beforeload', function() {
datastore.baseParams = {
XNXQ01ID_SEARCH : $value('XNXQ01ID_SEARCH'),
PSI_NAME_SEARCH : $value('PSI_NAME_SEARCH'),
userid : userid,
mainSqlId:'evaluationresultsquery.selectteacherlist',
countSqlId:'none'
};
});


//定义表格用来显示数据
var datacm = new Ext.grid.ColumnModel({
columns:[
{
header : '报表名称',
width:89,
dataIndex:'PSI_NAME'
},
{
header : '统计时间',
width:65,
dataIndex:'PSI_TIME'
},
{
header : '教师编号',
dataIndex:'TEACHERCODE',
width:89
},
{
header : '教师姓名',
width:89,
dataIndex:'TEACHERNAME'
},
{
header : '性别',
width:35,
align:'center',
dataIndex:'SEXCODE',
renderer:function(value){return rendererDisplay(<apframe:write dictTypeId='ZD_XB' type='array'/>,value);}
},
{
header : '职称',
width:89,
dataIndex:'TITLE',
renderer:function(value){return rendererDisplay(<apframe:write dictTypeId='ZD_JSZW' type='array'/>,value);}
},
{
header : '所属院系',
width:89,
dataIndex:'UNITCNAME'
},
{
header : '评分',
width:35,
align:'center',
dataIndex:'PTS_SCORE'
},
{
header : '样本数',
width:43,
align:'center',
dataIndex:'PTS_SAMPLE_SIZE'
},
{
header : '参评率',
width:43,
align:'center',
dataIndex:'PTS_ELIGIBLE_RATE',
renderer:function(value){
if(!value){
return '0%';
}
return parseFloat(value)*100+'%';
}
},
{
header : '单位排名',
width:55,
align:'center',
dataIndex:'PTS_UNIT_RANK'
},
{
header : '全校排名',
width:55,
align:'center',
dataIndex:'PTS_SCHOOL_RANK'
}
],
defaults: {
sortable: false,
menuDisabled: true
}
});


//定义工具栏按钮
var dataGrid = new Ext.grid.GridPanel({
store: datastore,
cm: datacm,
border : true,
height:125,
region : "center",
title:'按教师进行汇总统计' ,
loadMask : true,
split : true,
enableColumnMove: false,
sm:new Ext.grid.CheckboxSelectionModel({singleSelect:false}),
stripeRows: true,
iconCls : 'grid-icon'
});




//按教师进行汇总信息----------------------END-------------------------------------------------

//按教师+课程进行汇总统计信息----------------------START-----------------------------------------------
var detailData = [
{name : 'PTCS_SCORE',type : 'string'},
{name : 'PTCS_SAMPLE_SIZE',type : 'string'},
{name : 'TEACHERCODE',type : 'string'},
{name : 'TEACHERNAME',type : 'string'},
{name : 'SEXCODE',type : 'string'},
{name : 'TITLE',type : 'string'},
{name : 'UNITCNAME',type : 'string'},
{name : 'PTCS_ELIGIBLE_RATE',type : 'string'},
{name : 'PTCS_UNIT_RANK',type : 'string'},
{name : 'PTCS_SCHOOL_RANK',type : 'string'},
{name : 'PSI_NAME',type : 'string'},
{name : 'PSI_TIME',type : 'string'},
{name : 'COURSENAME',type : 'string'}
];


var detailRecord = Ext.data.Record.create(detailData);

var detailStore = new Ext.data.Store( {
proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'<foundation:root/>gridPagingAction.action'})),
reader : new Ext.data.JsonReader( {
root : 'data',
totalProperty : 'totalProperty'
}, detailRecord),
remoteSort : false
});

//数据查询
detailStore.on('beforeload', function() {
detailStore.baseParams = {
XNXQ01ID_SEARCH : $value('XNXQ01ID_SEARCH'),
PSI_NAME_SEARCH : $value('PSI_NAME_SEARCH'),
userid : userid,
mainSqlId:'evaluationresultsquery.selectteachercourselist',
countSqlId:'none'
};
});
//数据表格
var detailCm = new Ext.grid.ColumnModel({
columns:[
{
header : '报表名称',
width:76,
dataIndex:'PSI_NAME'
},
{
header : '统计时间',
width:65,
dataIndex:'PSI_TIME'
},
{
header : '教师编号',
dataIndex:'TEACHERCODE',
width:76
},
{
header : '教师姓名',
width:76,
dataIndex:'TEACHERNAME'
},
{
header : '性别',
width:31,
align:'center',
dataIndex:'SEXCODE',
renderer:function(value){return rendererDisplay(<apframe:write dictTypeId='ZD_XB' type='array'/>,value);}
},
{
header : '职称',
width:76,
dataIndex:'TITLE',
renderer:function(value){return rendererDisplay(<apframe:write dictTypeId='ZD_JSZW' type='array'/>,value);}
},
{
header : '所属院系',
width:76,
dataIndex:'UNITCNAME'
},
{
header : '课程名称',
width:78,
dataIndex:'COURSENAME'
},
{
header : '评分',
width:31,
align:'center',
dataIndex:'PTCS_SCORE'
},
{
header : '样本数',
width:43,
align:'center',
dataIndex:'PTCS_SAMPLE_SIZE'
},
{
header : '参评率',
width:43,
align:'center',
dataIndex:'PTCS_ELIGIBLE_RATE',
renderer:function(value){
if(!value){
return '0%';
}
return parseFloat(value)*100+'%';
}
},
{
header : '单位排名',
width:55,
align:'center',
dataIndex:'PTCS_UNIT_RANK'
},
{
header : '全校排名',
width:55,
align:'center',
dataIndex:'PTCS_SCHOOL_RANK'
}
],
defaults: {
sortable: false,
menuDisabled: true
}
});

//数据表格面板
var detailGrid = new Ext.grid.GridPanel({
store: detailStore,
height:125,
cm: detailCm,
title:'按教师+课程进行汇总统计' ,
border : true,
region : "south",
loadMask : true,
split : true,
enableColumnMove: false,
sm:new Ext.grid.CheckboxSelectionModel({singleSelect:false}),
stripeRows: true,
iconCls : 'grid-icon'
});


//按教师+课程进行汇总统计信息----------------------END-------------------------------------------------

//按教师+课程+指标进行汇总统计信息----------------------START-----------------------------------------------
var indexData = [
{name : 'PJ_TEA_COU_INDEX_STATISTIC_ID',type : 'string'},
{name : 'PTCIS_SCORE',type : 'string'},
{name : 'PTCIS_SAMPLE_SIZE',type : 'string'},
{name : 'TEACHERCODE',type : 'string'},
{name : 'TEACHERNAME',type : 'string'},
{name : 'SEXCODE',type : 'string'},
{name : 'TITLE',type : 'string'},
{name : 'UNITCNAME',type : 'string'},
{name : 'PTCIS_ELIGIBLE_RATE',type : 'string'},
{name : 'PSI_NAME',type : 'string'},
{name : 'PSI_TIME',type : 'string'},
{name : 'COURSENAME',type : 'string'}
];


var indexRecord = Ext.data.Record.create(indexData);

var indexStore = new Ext.data.Store( {
proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'<foundation:root/>gridPagingAction.action'})),
reader : new Ext.data.JsonReader( {
root : 'data',
totalProperty : 'totalProperty'
}, indexRecord),
remoteSort : false
});

//数据查询
indexStore.on('beforeload', function() {
indexStore.baseParams = {
XNXQ01ID_SEARCH : $value('XNXQ01ID_SEARCH'),
PSI_NAME_SEARCH : $value('PSI_NAME_SEARCH'),
userid : userid,
mainSqlId:'evaluationresultsquery.selectteacouindexlist',
countSqlId:'none'
};
});
//数据表格
var indexCm = new Ext.grid.ColumnModel({
columns:[
{
header : '报表名称',
width:78,
dataIndex:'PSI_NAME'
},
{
header : '统计时间',
width:65,
dataIndex:'PSI_TIME'
},
{
header : '教师编号',
dataIndex:'TEACHERCODE',
width:78
},
{
header : '教师姓名',
width:78,
dataIndex:'TEACHERNAME'
},
{
header : '性别',
width:31,
align:'center',
dataIndex:'SEXCODE',
renderer:function(value){return rendererDisplay(<apframe:write dictTypeId='ZD_XB' type='array'/>,value);}
},
{
header : '职称',
width:78,
dataIndex:'TITLE',
renderer:function(value){return rendererDisplay(<apframe:write dictTypeId='ZD_JSZW' type='array'/>,value);}
},
{
header : '所属院系',
width:78,
dataIndex:'UNITCNAME'
},
{
header : '课程名称',
width:78,
dataIndex:'COURSENAME'
},
{
header : '评分',
width:31,
align:'center',
dataIndex:'PTCIS_SCORE'
},
{
header : '样本数',
width:43,
align:'center',
dataIndex:'PTCIS_SAMPLE_SIZE'
},
{
header : '参评率',
width:43,
align:'center',
dataIndex:'PTCIS_ELIGIBLE_RATE',
renderer:function(value){
if(!value){
return '0%';
}
return parseFloat(value)*100+'%';
}
},
{
header : '按指标得分明细',
width:100,
dataIndex:'',
renderer: function(value,meta,record){
var resultStr = "<div>" +
"<a href='javascript:showMoreDetail("+record.get('PJ_TEA_COU_INDEX_STATISTIC_ID')+");' >指标得分明细</a>" + "</div>";
return resultStr;
}
}
],
defaults: {
sortable: false,
menuDisabled: true
}
});

//按指标得分明细
function showMoreDetail(PJ_TEA_COU_INDEX_STATISTIC_ID){
detailData = [
{name:'PEI_NAME',type:'string'},
{name:'PID_FULLSCORE',type:'string'},
{name:'PID_SCORE',type:'string'},
{name:'PID_AVERAGE',type:'string'},
{name:'PID_UNIT_AVERAGE',type:'string'}
];
detailRecord = Ext.data.Record.create(detailData);

detailStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'<foundation:root/>gridPagingAction.action'})),
reader: new Ext.data.JsonReader( {
root : 'data',
totalProperty : 'totalProperty'
}, detailRecord),
remoteSort : false
});
detailStore.on('beforeload', function() {
detailStore.baseParams = {
PJ_TEA_COU_INDEX_STATISTIC_ID:PJ_TEA_COU_INDEX_STATISTIC_ID,
mainSqlId:'evaluationresultsquery.selectIndexDetail_List',
countSqlId:'evaluationresultsquery.selectIndexDetail_Count'
};
});
detailCm = new Ext.grid.ColumnModel({
columns:[
{
header:'指标名称',
width:100,
dataIndex : 'PEI_NAME'
},
{
header:'满分值',
width:80,
dataIndex : 'PID_FULLSCORE'
},
{
header:'得分',
width:80,
dataIndex : 'PID_SCORE'
},
{
header:'单位平均分',
width:80,
dataIndex : 'PID_UNIT_AVERAGE'
},
{
header:'全校平均分',
width:100,
dataIndex : 'PID_AVERAGE'
}]
});

var detailPagingBar = new Ext.PagingToolbar({
pageSize: pageSize,
store: detailStore,
displayInfo: true
});

detailGrid = new Ext.grid.EditorGridPanel({
title:'指标得分明细信息',
store: detailStore,
cm: detailCm,
sm:new Ext.grid.CheckboxSelectionModel({singleSelect:true}),
border : true,
frame:true,
margins:'3 0 0 0',
region : "center",
loadMask : true,
split : true,
enableColumnMove: false,
stripeRows: true,
iconCls : 'grid-icon',
bbar:detailPagingBar
});

detailWindow = new Ext.Window({ //定义对话框
layout : 'border',
width : 520,
height : 400,
shadow : true,
title:'',
modal : true,
closable : true,
minWidth : 200,
minHeight : 100,
buttons : [
{
text : '关闭',
handler : function (){
detailWindow.hide();
}
}],
items:[detailGrid]
});

detailWindow.show();

detailStore.load({
params : {
start : 0,
limit : pageSize
}
});
}

//数据表格面板
var indexGrid = new Ext.grid.GridPanel({
store: indexStore,
height:125,
cm: indexCm,
title:'按教师+课程+指标进行汇总统计' ,
border : true,
region : "south",
loadMask : true,
split : true,
enableColumnMove: false,
sm:new Ext.grid.CheckboxSelectionModel({singleSelect:false}),
stripeRows: true,
iconCls : 'grid-icon'
});


//按教师+课程+指标进行汇总统计信息----------------------END-------------------------------------------------


//定义查询条件栏
var conditionForm=new Ext.FormPanel( {
buttonAlign:'center',
id:'conditionForm',
frame:true,
height : 70,
split : true,
margins:'3 0 0 0',
collapsible : true,
region : "north",
title:'查询条件:',
border : false,
bodyBorder:false,
labelAlign : 'left',
items : [{
layout : 'column',
items : [
{
columnWidth : .40,
layout : 'form',
labelWidth:65,
items : [{
xtype:"combo",
id:'XNXQ01ID_SEARCH',
fieldLabel : '学年学期',
width : 130,
mode : 'local',
triggerAction : 'all',
editable:true,
selectOnFocus : true,
forceSelection : true,
displayField : 'text',
valueField : 'value',
readOnly : true,
allowBlank:false,
store : new Ext.data.SimpleStore({
fields: ['value', 'text'],
data : xnxqArr
})
}]
},
{
columnWidth : .40,
labelWidth:80,
layout : 'form',
items : [ new Ext.form.TextField( {
fieldLabel : '报表名称',
id : 'PSI_NAME_SEARCH',
width : 130,
allowBlank : true
})]
},
{
columnWidth : .08,
labelWidth:40,
layout : 'form',
items : [ new Ext.Button({text:'查询',iconCls : 'icon-search',handler:function(){
if(!$value('XNXQ01ID_SEARCH')){
Ext.Msg.alert('提示','请选择学年学期后再查询!');
return;
}
loadGrid(datastore);//教师
loadGrid(detailStore);//教师+课程
loadGrid(indexStore);//教师+课程+指标
}})]
}
,
{
columnWidth : .08,
labelWidth:40,
layout : 'form',
items : [ new Ext.Button({text:'重置',iconCls : 'icon-reset',handler:function(){
conditionForm.getForm().reset();
//设置默认学年学期
Ext.getCmp('XNXQ01ID_SEARCH').store.loadData(xnxqArr);
pageCall.queryNamedSqlForObj('evaluationresultsquery.selectCurrentYearName',{},function(xnxq){
currentXnxqid = xnxq.XNXQ01ID;
$set("XNXQ01ID_SEARCH",currentXnxqid);
});
}})]
}]

}]
});


//对数据进行分页加载
function loadGrid(store){
store.load( {
/*params : {
start : 0,
limit : 10000
}*/
});
}


//大的form面板的定义
var innerPanel = new Ext.Panel({
layout : 'form',//注意
border : false,
title:'评价结果查询',
iconCls : 'icon-plugin',
split : true,
items:[conditionForm,dataGrid,detailGrid,indexGrid]
});

//大面板
var bigTabPanel = new Ext.TabPanel({
region : 'center',
activeTab: 0,
border : false,
frame:true,
items:[innerPanel]
});

Ext.onReady(function(){
new Ext.Viewport({
layout : 'border',
split : true,
items:[bigTabPanel]
});

//设置默认学年学期
Ext.getCmp('XNXQ01ID_SEARCH').store.loadData(xnxqArr);
pageCall.queryNamedSqlForObj('evaluationresultsquery.selectCurrentYearName',{},function(xnxq){
currentXnxqid = xnxq.XNXQ01ID;
$set("XNXQ01ID_SEARCH",currentXnxqid);
});

loadGrid(datastore);//教师
loadGrid(detailStore);//教师+课程
loadGrid(indexStore);//教师+课程+指标

});

</script>
</body>
</html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics