Extjs Grid 编辑 新增 删除 保存 (爽)

//创建edgrid.js
Ext.onReady(function(){
Ext.QuickTips.init();

// 格式化日期显示
function formatDate(value){
return value ? value.dateFormat('Y, M d') : '';
}
// 格式化性别显示,这是个 renderer, 渲染器
function formatSex(value) {
return value ? "男" : "女";
}
// 弄个缩写的别名
var fm = Ext.form;

// 列模型定义了表格所有列的信息,
// dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)
var cm = new Ext.grid.ColumnModel([
{
id:'id',
header: "编号",
dataIndex: 'id',
width: 50
},
{
id:'name',
header: "用户名",
dataIndex: 'name',
width: 250,
editor: new fm.TextField({
allowBlank: false// 不能为空
})
},
{
header: "地区",
dataIndex: 'area',
width: 100,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'area',// 对应的选择框的ID
lazyRender:true,
listClass: 'x-combo-list-small'
})
},
{
header: "电子邮件",
dataIndex: 'email',
width: 220,
align: 'left',
editor: new fm.TextField({
allowBlank: true
})
},
{
header: "年龄",
dataIndex: 'age',
width: 70,
align: 'right',
editor: new fm.NumberField({
allowBlank: true,
allowNegative: false,
maxValue: 100
})
},
{
header: "生日",
dataIndex: 'birthDay',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'y/m/d',
minValue: '1970/01/01',//最小值
disabledDays: [0, 6],// 禁止选择的日期
disabledDaysText: '不许周末出生孩子'
})
},
{
header: "性别",
dataIndex: 'sex',
width: 95,
renderer: formatSex,
editor: new fm.Checkbox()
}
]);

// 默认情况下列是可排序的
cm.defaultSortable = true;

// 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
var User = Ext.data.Record.create([
// 下面的 "name" 匹配读到的标签名称, 除了 "birthDay",它被映射到标签 "birth"
{name: 'id', type: 'int' },
{name: 'name', type: 'string'},
{name: 'area'},
{name: 'email', type: 'string'},
{name: 'age', type: 'int'}, // automatic date conversions
{name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y/m/d'},
{name: 'sex', type: 'bool'}
]);

// 创建 Data Store
var store = new Ext.data.Store({
// 使用 HTTP 加载
url: 'users.xml',

// 因为返回值是 XML, 所以我们创建一个解析器
reader: new Ext.data.XmlReader({
// 记录必须包含 "user" 标签
record: 'user'
}, User),

sortInfo:{field:'name', direction:'ASC'}// 排序信息
});

// 创建编辑器表格
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:800,
height:300,
autoExpandColumn:'name',
title:'功能管理',// 标题
frame:true,
clicksToEdit:1,//设置点击几次才可编辑
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据

// 顶部工具栏按钮
tbar: [
{
text: '新增',
iconCls:'xz',//按钮图标的CSS名称
handler : function(){// 点击按钮执行的操作
var n = grid.getStore().getCount();// 获得总行数
var p = new User({
id: n + 1,
name: '新数据' + n,
area: '',
email: '[email protected]',
age: 20,
birthDay: (new Date()).clearTime(),
sex: true
});
grid.stopEditing();// 停止编辑
store.insert(n, p);// 插入到最后一行
grid.startEditing(n, 1);// 开始编辑1单元格
}
},
{
text: '删除',
iconCls:'sc01',
handler : function(){

//var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
if(rows.length==0){
Ext.MessageBox.alert('警告', '最少选择一条信息,进行删除!');
}else{
Ext.MessageBox.confirm('提示框', '您确定要进行该操作?',function(btn){
if(btn=='yes'){
if(rows){
for (var i = 0; i < rows.length; i++) {
//alert(rows[i].get("id"));
store.remove(rows[i]);
//store.removeAll(); //删除所有数据

}
this.getEl().dom.action='./formservlet?operator=save';
this.getEl().dom.submit();
}
}
});
} // 弹出对话框警告
}
},
{
text: '保存',
iconCls: 'bc',
handler : function(){
var recordtoedit = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
if(recordtoedit) {
Ext.Msg.alert('查看选中', "您现在选中的用户其名字为:" + recordtoedit.get("name"));// 取得用户名
// alert("您现在选中的用户其名字为:" + recordtoedit.get("name"));
}
}
},
{
text: '查询',
iconCls: 'cx',
handler : function(){

}
}
]
});

// 单元格编辑后事件处理
grid.on("afteredit", afterEdit, grid);
// 事件处理函数
function afterEdit(e) {
var record = e.record;// 被编辑的记录
// 显示等待对话框
Ext.Msg.wait("请等候", "修改中", "操作进行中...");

// 更新界面, 来真正删除数据
Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:" + e.record.get("name").value + "\n 修改的字段是:"
+ e.field);// 取得用户名
};

// 触发数据加载
store.load();
});

//创建edgrid.jsp

<%@page contentType="text;html; charset=GBK"%>
<%@page import="com.luke.hm.tree.EJBContext"%>



表格编辑器示例



































//创建users.xml



1
XXX1
XXX2
[email protected]
88
true
1980/01/01


2
Benson
山东济南
[email protected]
27
true
1982/12/12


3
Benson_GG
济南历下
[email protected]
28
false
1982/12/11




//创建edgrid.css
/** 定义了一些工具栏按钮的 CSS 样式 */
.xz {
background-image:url(./xz.gif) !important;
}

.sc01 {
background-image:url(./sc.gif) !important;
}

.sc02 {
background-image:url(./sc.gif) !important;
}

.cx {
background-image:url(./cx.gif) !important;
}

.bc {
background-image:url(./bc.gif) !important;
}

你可能感兴趣的:(Extjs)