`

用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实现行级数据的折叠和展开功能,以便在用户界面中以更直观的方式...

    Wpf DataGrid 合计行,并在最下方

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

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

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

    C#WPF之DataGrid用法

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

    jeasyui-datagrid-datagrid

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

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

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

    WPF MVVM 模式使用DataGrid

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

    easyUI的dataGrid重画

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

    打印DataGrid数据实例

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

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

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

    FLEX的一个DataGrid例子

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

    silverlight datagrid控件动画

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

    datagrid简单使用示例

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

    easyui datagrid实现实现上下左右和回车切换单元格

    在实际的应用场景中,为了提高用户的交互体验,我们经常需要让 DataGrid 支持键盘导航功能,即通过键盘上的上下左右键和回车键可以在不同的单元格之间进行切换。这不仅可以提升用户体验,还可以满足不同用户的操作...

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

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

Global site tag (gtag.js) - Google Analytics