edit-grid2.js
上传用户:qfccsy
上传日期:2022-03-27
资源大小:716k
文件大小:8k
- /*
- * Ext JS Library 2.0.1
- * Copyright(c) 2006-2008, Ext JS, LLC.
- * licensing@extjs.com
- *
- * http://extjs.com/license
- */
- /**
- * 简体中文 Demo 制作: 刘长炯 beansoft@126.com
- * http://beansoft.blogjava.net/
- */
- 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:'add',//按钮图标的CSS名称
-
- handler : function(){// 点击按钮执行的操作
- var n = grid.getStore().getCount();// 获得总行数
- // 调用 DWR 进行添加操作, 操作完成后调用方法来更新界面
- JUserManager.addUser('新用户' + n, '北京', function(data) {
- if(data) {
- var p = new User({
- id: data,
- name: '新用户' + n,
- area: '北京',
- email: 'beansoft@126.com',
- age: 20,
- birthDay: (new Date()).clearTime(),
- sex: true
- });
-
- grid.stopEditing();// 停止编辑
-
- store.insert(n, p);// 插入到最后一行
- grid.startEditing(n, 1);// 开始编辑1单元格
- }
- });
- }
- },
-
- {
- text: '查看所选',
- iconCls: 'details',
- handler : function(){
- var recordtoedit = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
- if(recordtoedit) {
- Ext.Msg.alert('查看选中', "您现在选中的用户其名字为:" + recordtoedit.get("name"));// 取得用户名
- // alert("您现在选中的用户其名字为:" + recordtoedit.get("name"));
- }
- }
- },
-
- {
- text: '删除所选',
- iconCls:'remove',
- handler : function(){
- var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
-
- if(!record){
- Ext.Msg.alert("提示","请先选择要删除的行!");
- return;
- }
-
- // 弹出对话框警告
- if(record) {
- Ext.MessageBox.confirm('确认删除',
- '你真的要删除所选用户吗?',
- function(btn) {
- if(btn == 'yes') {// 选中了是按钮
- // 调用 DWR, 执行结果成功时方删除所有数据
- JUserManager.removeUser( record.get("id"), function(data) {
- if(data) {
- // 更新界面, 来真正删除数据
- store.remove(record);
- } else {
- Ext.Msg.alert("出错了!","单个用户数据删除失败!");
- }
- });
-
- }
- }
- );
- }
-
- }
- },
-
- {
- text: '删除所有',
- iconCls: 'user-delete',
- handler : function(){
- Ext.MessageBox.confirm('确认删除',
- '你真的要删除所有用户信息吗?',
- function(btn) {
- if(btn == 'yes') {// 选中了是按钮
- // 调用 DWR, 执行结果成功时方删除所有数据
- JUserManager.removeAllUser( function(data) {
- if(data) {
- // 更新界面, 来真正删除数据
- store.removeAll();
- } else {
- Ext.Msg.alert("出错了!","批量数据删除失败!");
- }
- });
- }
- }
- );
-
- }
- }
-
- ]
- });
-
- // 单元格编辑后事件处理
- grid.on("afteredit", afterEdit, grid);
-
- // 事件处理函数
- function afterEdit(e) {
- var record = e.record;// 被编辑的记录
-
- // 显示等待对话框
- Ext.Msg.wait("请等候", "修改中", "操作进行中...");
-
- // 调用 DWR, 执行结果成功时方删除所有数据
- JUserManager.editUser( record.get("id"), e.field, e.value, function(data) {
- if(data) {
- // 更新界面, 来真正删除数据
- Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:" + e.record.get("name") + "n 修改的字段是:"
- + e.field);// 取得用户名
- } else {
- Ext.Msg.alert("出错了!","修改数据失败,将重置为修改前的值!",function(){
- record.set(e.field, e.originalValue);
- });
- }
- });
-
- };
- // 触发数据加载
- store.load();
- });