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 ...
随机推荐
- HDFS 原理、架构与特性介绍--转载
原文地址:http://www.uml.org.cn/sjjm/201309044.asp 本文主要讲述 HDFS原理-架构.副本机制.HDFS负载均衡.机架感知.健壮性.文件删除恢复机制 1:当前H ...
- C++类编程(一)const的使用
设计类时,考虑以下五点 1.构造函数初始化列表 2.函数该不该加const 3.参数传递尽量考虑用引用传递,考虑加不加const 4.返回用不用引用 5.数据尽量放在private,函数尽量放在pub ...
- 【转】Maven最佳实践:划分模块
转自:http://juvenshun.iteye.com/blog/305865 “分天下为三十六郡,郡置守,尉,监” —— <史记·秦始皇本纪> 所有用Maven管理的真实的项目都应该 ...
- elk平台分析nginx日志的基本搭建
一.elk套件介绍 ELK 由 ElasticSearch . Logstash 和 Kiabana 三个开源工具组成.官方网站: https://www.elastic.co/products El ...
- [Android Pro] Android签名与认证详细分析之二(CERT.RSA剖析)
转载自: http://www.thinksaas.cn/group/topic/335449/ http://blog.csdn.net/u010571535/article/details/899 ...
- Quartus 软件的使用之PLL的使用
练习使用Altera FPGA 内的 PLL IP核: 思路:将clk_50M倍频到clk_100M,然后观察100M时钟. 1.生成PLL的核例化文件,然后调用. 点击NEXT之后,等一会会跳出如下 ...
- SQLite常用网址
英文版SQLite官网: http://www.sqlite.org/rescode.html中文版SQLite官网:http://www.helplib.net/s/sqlite/9/167.sht ...
- oracle 10g 学习之基本 SQL SELECT 语句(4)
本篇文章中,对于有的和MSSQL Server相同的语法我就没有再写了,这里我只写Oracle和MSSQL Server有点不同的 定义空值 l 空值是无效的,未指定的,未知的或不可预知的值 l ...
- oracle插入数据
插入数据 insert into comm_error_code_def (ID, ERR_MESSAGE, ERR_CODE, ERR_DESC, NAME, MISC_DESC, STATUS, ...
- chromium的Backtrace记录
ffmpeg处理完视频流后,上层的webrtc调用错误,可以看出webrtc的调用过程: Backtrace: webrtc::RTPFragmentationHeader::CopyFrom [0x ...