Extjs Grid 编者新增删除保存 _JavaScript

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: 'Benson@163.com',
??????????????????? 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"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>表格编辑器示例</title>

<link rel="stylesheet" type="text/css" href="<%= EJBContext.getRootPath()%>/ext/resources/css/ext-all.css" />



<link rel="stylesheet" type="text/css" href="<%= EJBContext.getRootPath()%>/menujscss/edgrid.css" />

??? 
???? 
???? <script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/adapter/ext/ext-base.js"></script>
???? 

??? <script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/ext-all.js"></script>
??? 
???? <script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/source/locale/ext-lang-zh_CN.js"></script>

??? 
??? <script type="text/javascript" src="edgrid.js"></script>
??? 
??? 
? 

</head>
<body>

<h1>
? <select name="area" id="area" style="display: none;">
????? <option value="历城区">历城区</option>
????? <option value="历下区">历下区</option>
????? <option value="槐荫区">槐荫区</option>
? </select>

? 
</h1>
<div id="editor-grid"></div>

</body>
</html>

//创建users.xml
<?xml version="1.0" encoding="GBK"?>
<users>
? <user>
????? <id>1</id>
??? <name>XXX1</name>
??? <area>XXX2</area>
??? <email>XXX1@126.com</email>
??? <age>88</age>
??? <sex>true</sex>
??? <birth>1980/01/01</birth>
? </user>
??? <user>
??? <id>2</id>
??? <name>Benson</name>
??? <area>山东济南</area>
??? <email>Benson@163.com</email>
??? <age>27</age>
??? <sex>true</sex>
??? <birth>1982/12/12</birth>
? </user>
??? <user>
??? <id>3</id>
??? <name>Benson_GG</name>
??? <area>济南历下</area>
??? <email>aa@bb.com</email>
??? <age>28</age>
??? <sex>false</sex>
??? <birth>1982/12/11</birth>
? </user>

</users>

//创建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 Grid 编者 新增 删除 保存

Extjs Grid 编者新增删除保存