`

用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>

分享到:
评论

相关推荐

    模仿EXT效果的datagrid

    EXT是一个流行的JavaScript库,特别在创建富客户端应用时被广泛使用。EXT提供的DataGrid组件是其核心特性之一,它能够展示大量数据,并提供强大的分页、排序、过滤和编辑功能。在没有EXT库的情况下,我们可以使用...

    EXT中三种方法实现在DataGrid上显示toolTip

    本文将详细解析在EXT中实现DataGrid上显示toolTip的三种方法,并通过一个具体的代码示例来加深理解。 ### 第一种方法:使用`dataTipField`属性 在DataGrid的列定义中,可以通过设置`dataTipField`属性来指定列的...

    Ext--DataGrid教程

    博文链接:https://vincent-yy.iteye.com/blog/234061

    DataGrid中嵌套DataGrid

    而"DataGrid中嵌套DataGrid"是一种复杂但非常实用的技术,它允许在一个DataGrid的行或列中内嵌另一个DataGrid,以展示层次化数据或相关联的数据集。这种技术同样适用于DataGrid与DataList,以及DataList之间的嵌套,...

    C# WPF DataGrid控件实现三级联动

    在这里,我们有三个相关的DataGrid,当用户在第一个DataGrid中做出选择时,第二个和第三个DataGrid的数据会相应地自动更新,形成一个联动的交互体验。 要实现这种效果,我们需要以下步骤: 1. **数据模型设计**: ...

    使用DataGrid完成一个行级数据折叠收缩展示的功能

    在WPF(Windows Presentation Foundation)开发中,DataGrid控件是一个强大的工具,常用于显示和操作结构化的数据。本文将详细介绍如何使用DataGrid实现行级数据的折叠和展开功能,以便在用户界面中以更直观的方式...

    vb中datagrid控件的详细使用方法

    在VB(Visual Basic)编程环境中,`DataGrid`控件是一个非常重要的组件,它用于显示数据源中的数据,如数据库、数组或记录集。`DataGrid`控件为用户提供了一种交互式的表格形式,可以进行浏览、编辑和操作数据。在本...

    Wpf DataGrid 合计行,并在最下方

    本列子不使用ToolKit(有3.5和4.0的限制),添加一个类,重写DataGrid。可以在DataGrid上下左右绑定一个DataGrid,类似Footer属性。示例可直接运行,简单易懂。 (思路:两个DataGrid(mainDG,bottomDG),bottomDG...

    C#WPF之DataGrid用法

    可以在DataGrid中为每行添加一个复选框,用户勾选后可以通过一个“删除”按钮将选中的数据从数据集中移除。 ##### 3. 修改数据 对于编辑功能,可以通过双击DataGrid的某一行或某一单元格来激活编辑模式。此时,用户...

    WPF DataGrid合并单元格(模板列嵌套DataGrid)

    本教程将详细讲解如何在DataGrid中实现单元格的合并,以及如何在模板列中嵌套另一个DataGrid,尽管这种“合并”并非传统意义上的单元格合并,而是通过自定义布局来达到类似的效果。 首先,我们要明白,WPF DataGrid...

    vb DataGrid 控件的使用

    VB中的DataGrid控件是一个非常实用的工具,用于在用户界面中展示和操作数据库中的数据。它呈现数据的方式类似于电子表格,提供了灵活的功能,如编辑、排序和格式化。以下是对DataGrid控件的详细说明: 1. **...

    jeasyui-datagrid-datagrid

    在Web应用开发中,数据展示和交互是核心部分之一,而DataGrid作为数据展示的利器,深受开发者喜爱。JeasyUI DataGrid是一款基于jQuery的轻量级组件,它为开发者提供了丰富的功能,如数据分页、排序、过滤等,极大地...

    WPF MVVM 模式使用DataGrid

    3. **命令绑定**:对于增删改查等操作,可以创建命令(如ICommand接口的实现)在ViewModel中,然后在View中绑定到DataGrid的特定元素上,如行的右键菜单或按钮。 4. **事件处理**:DataGrid的事件,如...

    easyUI的dataGrid重画

    在本文中,我们将深入探讨如何在EasyUI框架中实现`dataGrid`的重画功能,特别是在自定义搜索框和调整默认按钮大小方面。EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括`dataGrid`,它是一个强大的数据展示...

    打印DataGrid数据实例

    在`GeneratePages`方法中,你需要处理如何分割DataGrid到多个页面,因为一个`FixedPage`可能无法容纳所有数据。这个方法可以根据实际需求调整,例如,你可以决定每页显示多少行,或者根据`DataGrid`的高度和宽度动态...

    datagrid中编辑状态(editor)下一列嵌入多个控件

    根据上述代码,可以在`datagrid`的“地址信息”这一列中同时显示多个控件,如三个下拉框和一个文本输入框,用户可以在编辑状态下直接修改这些控件的内容。 #### 五、总结 通过自定义编辑器,我们可以实现在`...

    FLEX的一个DataGrid例子

    在Flex开发中,DataGrid控件是一个非常重要的组件,它被广泛用于展示和操作结构化的数据,例如数据库表格或者XML列表。本例子旨在帮助开发者更好地理解和应用DataGrid,通过实例来学习其基本功能和特性。 DataGrid...

    WPF中DataGrid自定义实现最后一行下面跟一个汇总行,类似MT4

    本话题主要探讨如何在DataGrid中自定义实现最后一行后面添加一个汇总行,这在金融软件如MT4(MetaTrader 4)中非常常见,用于显示数据的总计或平均值等统计信息。 首先,我们需要了解DataGrid的基本用法。DataGrid...

    silverlight datagrid控件动画

    在本文中,我们将深入探讨Silverlight 4.0中的DataGrid控件以及如何为其添加动画效果。Silverlight是一种由微软开发的富互联网应用程序(RIA)技术,它允许开发者创建交互式、媒体丰富的Web应用程序。而DataGrid控件...

    datagrid简单使用示例

    在HTML页面中,我们需要一个`&lt;table&gt;`元素作为DataGrid的基础。然后,通过jQuery的选择器找到该表格,并调用`datagrid()`方法进行初始化,设置相关的参数,如数据源、列定义、分页配置等。 2. **数据源** 在这个...

Global site tag (gtag.js) - Google Analytics