前台extjs的js代码:
Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
width:500,
items: [
{
region: 'center',
xtype: 'tabpanel',
items: [
Qgrid
]
}]
});
});
var pageSize = 4;//每页多少数据
var gridstore = Ext.create('Ext.data.Store', {
storeId:'QsimpsonsStore',
pageSize: pageSize,//分页。。。
fields: [
{ name: 'ID', type: 'int' },
{ name: 'NAME', type: 'string' },
{ name: 'IDENT', type: 'string' },
{ name: 'qualify', type: 'bool' },
{ name: 'exam_date', type: 'string' },
{ name: 'nowtime', type: 'string' }
],//定义字段
proxy:{
type: 'ajax',
url:'studentgridAction.action', //请求的数据的url -------下面有后台代码
reader:{
type:'json',
root:'students', //对应action中需要被现实的字段
totalProperty: 'total' //数据总数
}
},
sorters:[{property:"ID",direction:"ASC"}],//按qq倒序
autoLoad:{params:{start:0,limit:pageSize}}//自动加载,每次加载一页
})
//------------------
function renderSex(value, cellmeta, record, rowIndex, columnIndex, store)//value当前单元格的值,record是这行的所有数据,store表格里所有的数据
{
if(value==false)
{
return "<span style='color:red;font-weight:bold;'>无</span>";
}
else
{
//return record.get('qualify');
return "<span style='color:green;font-weight:bold;'>有</span>";
}
}
//----------------
var Qgrid=Ext.create("Ext.grid.Panel",{
title:'学生列表',
frame: true,
rowLines: false,
columns: [//配置表格列
//序号
Ext.create("Ext.grid.RowNumberer",{
width: 40,
text:'序号'
}),
{header: "学生账号", width: 200, dataIndex: 'ID', sortable: false},//renderer:renderSex可自定义显示
{header: "学生姓名", width: 200, dataIndex: 'NAME', sortable: false},
/*{header: "考试资格", width: 200, dataIndex: 'qualify', xtype: 'booleancolumn', sortable: false,
trueText: "<span style='color:green;font-weight:bold;'>有</span>",
falseText: "<span style='color:red;font-weight:bold;'>无</span>" //一样效果
}*/
{header: "考试资格", width: 200, dataIndex: 'qualify', sortable: false,renderer:renderSex}//渲染函数
],
store:gridstore,//指定grid的数据源
//多选框
selType:'checkboxmodel',
multiSelect:true,
//分页控件
dockedItems: [
{
xtype: 'pagingtoolbar',
pageSize : pageSize,//分页....
store:gridstore,
dock: 'bottom', //分页 位置
emptyMsg: '没有数据',
displayInfo: true,
displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
beforePageText: '第',
afterPageText: '页/共{0}页'
}],
tbar:[
'-','-',{
icon: 'images/add.png',
text:"添加资格",
type:"submit",
handler:function(buttonObj){
var grid1=buttonObj.ownerCt.ownerCt;
var data=grid1.getSelectionModel().getSelection();
if(data.length==0){
Ext.example.msg('<font color="#ff9900">警告</font>',"请先选择学生!");
}
else{
//得到ID的数据
var st=grid1.getStore();
var ids=[];
var name=[];
var exam_data=[];
var nowtime=[];
var k=1;
Ext.Array.each(data,function(record){
if(k==1)
{
exam_data.push(record.get('exam_date'));
nowtime.push(record.get('nowtime'));
}
k++;
});
if(exam_data>nowtime)
{
Ext.Array.each(data,function(record){
if(record.get('qualify')==true)
{
//Ext.example.msg('<font color="#0000ff">温馨提示</font>',""+record.get('NAME')+"重新被授予资格");
name.push(record.get('NAME'));
}
else
{
ids.push(record.get('ID'));
}
});
/*if(name.length>0)
{
Ext.MessageBox.alert("提示框","<br>"+name+"<br><br>已经具有考试资格,无需再授予资格<br>");
}*/
if(ids.length>0)
{
Ext.Ajax.request({
url:'qualificationMan.action',
params:{ids:ids.join(",")},//传值到后台,单传2个值到后台时以,分开
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.example.msg('<font color="#0000ff">温馨提示</font>','资格授予成功!');
Qgrid.store.reload();//重新加载数据
}
})
}
}
else
{
Ext.example.msg('<font color="#ff9900">警告</font>','考试已经开始或已经结束,不能再授权!');
}
}
}
},'-','-',
{
icon: 'images/delete.png',
text:"取消资格",
type:"submit",
handler:function(buttonObj){
var grid1=buttonObj.ownerCt.ownerCt;
var data=grid1.getSelectionModel().getSelection();
if(data.length==0){
Ext.example.msg('<font color="#ff9900">警告</font>','请先选择学生!');
}
else
{
//得到ID的数据
var st=grid1.getStore();
var ids=[];
var name=[];
var exam_data=[];
var nowtime=[];
var k=1;
Ext.Array.each(data,function(record){
if(k==1)
{
exam_data.push(record.get('exam_date'));
nowtime.push(record.get('nowtime'));
}
k++;
});
if(exam_data>nowtime)
{
Ext.Array.each(data,function(record){
if(record.get('qualify')==false)
{
name.push(record.get('NAME'));
}
else
{
ids.push(record.get('ID'));
}
});
/*if(name.length>0)
{
Ext.MessageBox.alert("提示框","<br>"+name+"<br><br>不具有考试资格,无需取消资格<br>");
}*/
if(ids.length>0)
{
Ext.Ajax.request({
url:'Cancelqualification.action',
params:{ids:ids.join(",")},//传值到后台,单传2个值到后台时以,分开
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.example.msg('<font color="#0000ff">温馨提示</font>','资格取消成功!');
Qgrid.store.reload();//重新加载数据
}
})
}
}
else
{
Ext.example.msg('<font color="#ff9900">警告</font>','考试已经开始或已经结束,不能取消授权!');
}
}
}
}
]
});
structs.xml
<action name = "studentgridAction" class ="teacher_qualification.Action" method="getstudent">
<result name="students" type="json"></result>
</action>
后台java代码实现函数:
public List<Model>students;//和 grid的store的root:'students',对应
public Integer total;//分页。。。数据总数
public Integer start;//分页。。。每页开始数据
public Integer limit;//分页。。。每一页数据
//省略get和set的方法,一定要get和set,不然前台获取不到值
public String getstudent()
{
// HttpServletRequest request = ServletActionContext.getRequest();set seesion的值
//request.getSession().setAttribute("testid", testid);
HttpServletRequest request = ServletActionContext.getRequest();
String oppo=(String) request.getSession().getAttribute("testid");//获取考试的id。seesion方法
int testid=Integer.parseInt(oppo);//试卷ID
users=new ArrayList<Student>();
users=remote().Partstudents("学生");//得到所有學生
students=new ArrayList<Model>();
//分页
total=users.size();
int end=start+limit;
if(end>users.size())//不能总数
{
end=users.size();
}
for(int i=start;i<end;i++)//只加载当前页面数据
{
Model ok=new Model();
ok.setID(users.get(i).getID());
ok.setNAME(users.get(i).getNAME());
ok.setIDENT(users.get(i).getIDENT());
List <qualification>fuck=new ArrayList<qualification>();
fuck=remote1().getqualificationParts(users.get(i).getID(), testid);
if(fuck.size()>0)
{
ok.setQualify("true");
}
else
{
ok.setQualify("false");
}
ok.setExam_date(exam_data);
ok.setNowtime(nowtime);
students.add(ok);
}
System.out.println("start:"+start+" end:"+end);
return "students";
}
相关推荐
NULL 博文链接:https://lucky16.iteye.com/blog/1522254
Extjs4 Grid分页与自动刷新
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
extjs4打印grid插件,官网上的一个例子程序,有需要的人可以下载来看看。
NULL 博文链接:https://kohisa.iteye.com/blog/651399
ExtJs+Dwr(Grid)实现分页功能,很实用
ExtJs+WCF+LINQ实现分页Grid
extjs 分页 从dao到action
ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能
extjs 富客户端界面设计 grid分页后台处理
ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传...
学习ext, guice 的好程序 学习ext4 extjs4, guice 的好程序 mybatis的好程序,可以借鉴很多东西的好程序
因此,现在几乎所有的grid控件都会支持分页功能。extjs也不例外,它对分页也提供了强大而方便的支持,使得我们在分页处理上可以得心应手。 在extjs中,类Ext.PagingToolbar封装了关于分页的操作,该类从Toolbar继承...
ExtJs+Dwr带分页分组传参后台排序功能的grid 主要包含:这个主要用到ExtJS+DWR+Spring+Hibernate,主要包括浏览页(usernamerecord.jsp),脚步文件(usernamerecord.js),dwr分页代理脚本文件(dwrproxy.js),...
这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题
从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域)。 其中grid-body包含了许多tr元素,每一个tr都是代表Grid组件中的一行数据;每个tr内部...
动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页动画效果的grid分页
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...