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 ...
随机推荐
- 关于 CAS 不能登录的问题
经过排查,是因为 Capistrano 部署中设置了 http_proxy.此时通过 cas.m.xxxx.com 域名去访问 CAS 服务时,就不通了,需要修改为 IP 来访问. 但是公司的 CAS ...
- ruby代码重构第一课
(文章是从我的个人主页上粘贴过来的, 大家也可以访问我的主页 www.iwangzheng.com) 新手写代码的时候往往会出现很多重复的代码没有提取出来,大师高瞻远瞩总能提点很多有意义的改进,今天重 ...
- linux下vim的常用指令
进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后 ...
- Linux运维相关目录
- NOIP 2011 Day 1 部分题解 (Prob#1 and Prob#2)
Problem 1: 铺地毯 乍一看吓cry,地毯覆盖...好像是2-dims 线段树,刚开头就这么难,再一看,只要求求出一个点,果断水题,模拟即可.(注意从标号大的往小的枚举,只要有一块地毯符合要求 ...
- ssh连接慢的问题的解决?
<1>群中同学遇到的问题,我之前在uuwatch也遇到了同样的问题? 问个问题师兄们 突然之间 公司服务器连接很慢 连一个shell需要10几秒钟 服务器就在公司全是内网服务器, 我也不知 ...
- canva实践小实例 —— 马赛克效果
前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大 ...
- 2.saltstack笔记之目标,模块,返回写入数据库
作者:刘耀 QQ:22102107 一.目标(targeting Minions) 1.匹配Minions Id 匹配所有 (*) [root@node1 salt]# salt '*' test.p ...
- codeforces 485A.Factory 解题报告
题目链接:http://codeforces.com/problemset/problem/485/A 题目意思:给出 a 和 m,a 表示第一日的details,要求该日结束时要多生产 a mod ...
- Win7下Event_Log服务4201错误的有效解决方法
在对Windows7系统进行某些优化或者更改了用户权限之后,会导致Window7系统的“事件查看器”无法启动,显示相关服务没有运行,而对相应服务Windows Event Log进行手动启动的时候,会 ...