extjs grid
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif'; Ext.QuickTips.init(); function formatDate(value) {
//var date = new Date(value);
return value ? date.dateFormat('Y-m-d H:i:s') : '';
} var sm = new Ext.grid.CheckboxSelectionModel({checkOnly : true}); var cm = new Ext.grid.ColumnModel([sm, {
id : 'ID',
header : '编号',
dataIndex : 'ID',
align : 'center',
width : ,
hidden : true
}, {
header : '名称',
dataIndex : 'name',
align : 'center',
width : ,
editor : new Ext.form.TextField({})
}, {
header : "时间",
dataIndex : 'time',
width : ,
align : 'center',
renderer : formatDate,
editor : new Ext.ux.form.DateTimeField({
fieldLabel : '时间',
id : 'time',
name : 'time',
width : ,
height : ,
allowBlank : false,
blankText : '时间不能为空',
editable : false,
value : new Date()
})
}]); var record = Ext.data.Record.create([{
name : 'ID',
type : 'string'
}, {
name : 'name',
type : 'string'
}, {
name : 'time',
type : 'date',
dateFormat : 'Y-m-d H:i:s'
}]); var store = new Ext.data.Store({
autoLoad : false,
pruneModifiedRecords : true, //每次Store加载后,清除所有修改过的记录信息
proxy : new Ext.data.HttpProxy({
url : 'list.action',
method : 'POST'
}),
baseParams : {
pageNo : ,
pageSize :
},
paramNames : {
start : "pageNo",
limit : "pageSize"
},
reader : new Ext.data.JsonReader({
totalProperty : 'totalCount',
root : 'results'
}, record)
}); store.load(); var tbar = new Ext.Toolbar({
items : [{
text : '新增',
iconCls : 'add',
handler : add
}, '-', {
text : '保存',
iconCls : 'save',
handler : save
}, '-', {
text : '删除',
iconCls : 'remove',
handler : remove
}]
}); var bbar = new Ext.PagingToolbar({
pageSize : ,
store : store,
displayInfo : true,
lastText : "尾页",
nextText : "下一页",
beforePageText : "当前",
prevText : "上一页",
firstText : "首页",
refreshText : "刷新",
afterPageText : "页,共{0}页",
displayMsg : '数据从第{0}条 - 第{1}条 共{2}条数据',
emptyMsg : '没有数据'
}); var grid = new Ext.grid.EditorGridPanel({
id : "myGrid",
title : '信息维护',
renderTo : 'grid',
sm : sm,
cm : cm,
store : store,
clicksToEdit : ,
loadMask : {
msg : '正在加载数据,请稍侯……'
},
autoScroll : true,
autoWidth : true,
autoHeight : true,
stripeRows : true,
viewConfig : {
forceFit : true
},
tbar : tbar,
bbar : bbar
}); grid.render(); function add() {
var initValue = {
ID : "",
name : "",
time : new Date()
};
var recode = store.recordType;
var p = new recode(initValue); // 根据上面创建的recode 创建一个默认值
grid.stopEditing();
store.insert(, p);// 在第一个位置插入
grid.startEditing(, );// 指定的行/列,进行单元格内容的编辑
} function save() {
var modified = store.modified;
Ext.Msg.confirm("警告", "确定要保存吗?", function(button) {
if (button == "yes") {
var json = [];
Ext.each(modified, function(item) {
json.push(item.data);
});
if (json.length > ) {
Ext.Ajax.request({
url : "save.action",
params : {
data : Ext.util.JSON.encode(json)
},
method : "POST",
success : function(response) {
Ext.Msg.alert("信息","数据保存成功!",function() {
store.reload();
});
},
failure : function(response) {
Ext.Msg.alert("警告","数据保存失败,请稍后再试!");
}
});
} else {
Ext.Msg.alert("警告", "没有任何需要更新的数据!");
}
}
});
} function remove() {
var selModel = grid.getSelectionModel();
if (selModel.hasSelection()) {
Ext.Msg.confirm("警告", "确定要删除吗?", function(button) {
if (button == "yes") {
var recs = selModel.getSelections();
var list = [];
for (var i = ; i < recs.length; i++) {
var rec = recs[i];
list.push("'" + rec.get('ID') + "'");
}
Ext.Ajax.request({
url : "delete.action",
params : {
data : list.join(',')
},
method : "POST",
success : function(response) {
Ext.Msg.alert("信息","数据删除成功!", function() {
store.reload();
});
},
failure : function(response) {
Ext.Msg.alert("警告","数据删除失败,请稍后再试!");
}
});
}
});
} else {
Ext.Msg.alert("错误", "没有任何行被选中,无法进行删除操作!");
}
}
});
public String list() throws Exception {
String sql = "select ID,name,time from Info";
String rs= infoService.getJSONBySQL(sql, page);
String jsonString = "{totalCount:" + page.getTotal() + ",results:" + rs+ "}"; response.setCharacterEncoding("UTF-8");
response.setContentType("application/json");
response.getWriter().print(jsonString); return null;
} public String save() throws Exception {
String data = request.getParameter("data");
JSONArray array = JSONArray.fromObject(data);
Object[] list = array.toArray();
for (int i = ; i < list.length; i++) {
Map<String, String> map = (Map<String, String>) list[i];
Info info = new Info();
info.setId(map.get("ID"));
info.setName(map.get("name"));
info.setTime(map.get("time")); if (null != info.getId() && info.getId().length() > ) {
infoService.upate(info);
} else {
infoService.save(info);
}
} response.getWriter().write("SUCCESS"); return null;
} public String delete() throws Exception {
String ids = request.getParameter("data"); infoService.delete(ids); response.getWriter().write("SUCCESS"); return null;
}
extjs grid的更多相关文章
- ExtJS Grid导出excel文件
ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...
- extjs grid renderer用法
extjs grid renderer用法 摘自:http://www.cnblogs.com/ljian/archive/2011/10/27/2226959.html var cm = new E ...
- 解决extjs grid 不随窗口大小自适应的问题
解决extjs grid 不随窗口大小自适应的问题 August 30, 2010 zhai Javascript 8,403 viewsGo to comment 最近遇到的问题,在使用grid的时 ...
- Extjs grid分页多选记忆功能
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候 ...
- extjs grid数据改变后刷新的实现
做了一个编辑extjs grid记录的窗体,但更改数据后,怎么重新刷新grid让数据显示呢? 做了半天的尝试,其实到最后只需一句话,faint:-) this.store.reload(); 不用加任 ...
- 72. js EXTJS grid renderer用法
转自:https://blog.csdn.net/shancunxiaoyazhi/article/details/22156083 renderer : Function (可选的)该函数用于加工单 ...
- [转]ExtJS Grid 分页时保持选中的简单实现方法
原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...
- ExtJs Grid 删除,编辑,查看详细等超链接处理
在网上查了好多资料,关于ExtJs处理操作栏的“删除”.“编辑”.“查看详细”的处理,原来项目都是这么处理: 操作栏:{ text:'操作', xtype:'actioncolumn', items ...
- extjs grid 分页
在使用extjs创建带分页功能的 grid 如下: 1.创建一个模型 // 创建算定义模型 模型名称 User Ext.define('User', { extend: 'Ext.data.Model ...
- extjs grid renderer用法【转载】
今天在做项目时,需要在列表中的某列添加一个超链接,首先要取得当前选中行的数据,判断数据类型,然后链接到不同的页面,研究下.发现ExtJs提供了一个很强的方法如下: var cm = new Ext.g ...
随机推荐
- php用soap创建webservice
php提供了一个专门用于soap操作的扩展库,使用该扩展库后 可以直接在php中进行soap操作.下面将介绍soap的基本操作. 一.soap扩展的使用方法 php的soap扩展库通过soap协议实现 ...
- VS2010调用Com组件
Com组件开发过程中用的不多,资料也不多,故记录开发Com组件中的部分问题. 在这一篇文章里,讲解了如何使用VS2010创建Com组件.现在基于该文章创建的Com组件接口,创建VC++项目来调用该接口 ...
- zookeeper 配置详解
http://blog.csdn.net/shenlan211314/article/details/6185176 因博主原创,所以不能转载 下面是更为详细的配置说明: 前面两篇文章介绍了Zook ...
- 2模02day1题解
源文件在我的网盘上.链接:http://pan.baidu.com/s/1qWPUDRm 密码:k52e (只有机智的人才能看到我的链接) 机智的双重下划线~~~ T1 T1就是一个递推,这题目把我恶 ...
- OpenResty(Nginx)+Lua+GraphicsMagick实现缩略图功能
http://www.hopesoft.org/blog/?p=1188 http://www.imagemagick.org/download/ 2.用法 原始图片是input.jpg,尺寸:160 ...
- 【Python】django多对多 查询 ,反查等操作
The Django Book中这样写 但我使用属性名后加_set会报错 而直接用members = group.user_group_join.all() 就可以 可能因为我的MyUser类里有两个 ...
- Redis windows安装配置与Jedis访问数据库
一 Redis概要 Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.它通常被称为数据结构服务器 ...
- 【JAVA、C++】LeetCode 017 Letter Combinations of a Phone Number
Given a digit string, return all possible letter combinations that the number could represent. A map ...
- GLSL Entry point not found
解决方案: 在引用OpenGL的头文件 #include <GL/glew.h>#include <GL/glut.h> 前添加 #define GLUT_DISABLE_AT ...
- eclipse 切换svn账号
1. 查看你的Eclipse中使用的是什么SVN Interface,位置在 windows > preference > Team > SVN 2. 如果是用的J ...