操作表格有一种需求,要操作表格需要动态的添加内容,删除内容以及双击的时候进入编辑状态。这个时候怎么办呢,看具体的实现吧。

双击点击的时候可以单元格的操作。

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Extjs4.2</title>
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet">
<script src="../ExtJS4.2/ext-all.js"></script>
<script src="d1.js"></script>
<script  src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<h1>ExtJS4.2学习</h1>
<hr />
作者:springok
<h2>ExtJS grid表格</h2>
<div id="springokgrid"></div>
<div id="springok1"></div>
</body>
</html>
Ext.onReady(function(){
    //定义列
    var columns = [
        {header:'编号',dataIndex:'id',width:50,
            editor:{
                allowBlank:true
            }}, //sortable:true 可设置是否为该列进行排序
        {header:'名称',dataIndex:'name',width:80},
        {header:'描述',dataIndex:'descn',width:112}
      ];
    //定义数据
    var data =[
        ['1','小王','描述01'],
        ['2','李四','描述02'],
        ['3','张三','描述03'],
        ['4','束洋洋','思考者日记网'],
        ['5','高飞','描述05']
    ];
    //转换原始数据为EXT可以显示的数据
    var store = new Ext.data.ArrayStore({
        data:data,
        fields:[
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置
           {name:'name'},
           {name:'descn'}
        ]
    });
    //加载数据
    store.load();  

    //创建表格
    var grid = new Ext.grid.GridPanel({
        renderTo:'springokgrid', //渲染位置
        width:550,
        autoHeight:true,
        store:store,
        columns:columns, //显示列
        stripeRows:true, //斑马线效果
        selType: 'cellmodel',
        bbar:new Ext.PagingToolbar({
            pageSize:2, //每页显示几条数据
            store:store,
            displayInfo:true, //是否显示数据信息
            displayMsg:'显示第 {0} 条到 {1} 条记录,一共  {2} 条', //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据
            emptyMsg: "没有记录" //没有数据时显示信息
        }) ,
        plugins:[
                 Ext.create('Ext.grid.plugin.CellEditing',{
                     clicksToEdit:1 //设置单击单元格编辑
                 })
        ],
        tbar:['-',{
            text:'添加一行',
            handler:function(){
                var p ={
                        id:'',
                        name:'',
                        descn:''
                        };
                    store.insert(0,p);
                }
            },'-',{
                text:'删除一行',
                handler:function(){
                    Ext.Msg.confirm('系统提示','确定要删除?',function(btn){
                        if(btn=='yes'){
                            var sm = grid.getSelectionModel();
                            var record = sm.getSelection()[0];
                            store.remove(record);
                        }
                    });
                }
        },'-',{
            text:'保存',
            handler:function(){
                var m = store.getModifiedRecords().slice(0);
                var jsonArray = [];
                Ext.each(m,function(item){
                    jsonArray.push(item.data);
                });
                Ext.Ajax.request({
                    method:'POST',
                    url:'/ExtJs4.2Pro/EditGridServlet',
                    success:function(response){
                        Ext.Msg.alert('系统提示',response.responseText,function(){
                            store.load();
                        });
                    },
                    failure:function(){
                        Ext.Msg.alert("错误","与后台联系的时候出了问题。");
                    },
                    params:'data='+encodeURIComponent(Ext.encode(jsonArray))
                });
            }
        }]
    });
});  

效果:

思考的问题:

这里我们启用了CellEditing插件,其他的部分并没有什么变化。可是看到的结果是,现在可以用TextField的方式随意修改单元格。记得不能让单元格为空,否则无法修改。

默认情况下,需要双击单元格才能激活编辑器,从而进行修改。不过,也可以给表格配置上clicksToEdit:1,这样就可以通过单击单元格激活编辑器,从而进行修改,上面的代码中已经用到了。

TextField不允许输入空值,因为在创建columns时对应的editor设置了allowBlank:false属性。allowBlank:false表示不运行在TextField中输入空值。

上面的示例中用到了数组对象的Slice(start,[end])方法,该方法返回一个新数组,包含了原函数从start到end所指定的元素,但是不包括end元素,比如a.slice(0,3)。如果start为负,则将它作为length+start处理(此处length为数组的长度,比如a.slice(-3,4),相当于a.slice(2,4))。如果end为负,就将它作为length+end处理(次数length为数组的长度,比如a.slice(0,-1)。如果省略end,那么slice方法将一直复制到原数组结尾,比如a.slice(1))。如果省略end,那么slice方法将一直复制到原数组结尾,比如a.slice(1)。如果end出现在start之前,不复制任何元素到新数组中,比如a.slice(4,3)。示例中store.getModifiedRecords().slice(0)的作用就是复制store.getModifiedRecords(),保证store.getModifiedRecords()中的原始数据不受影响。

如何添加单击事件

   listeners:
        {
             cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                // Ext.Msg.alert('Selected Record', 'Name : ' + record.get('id') + ' ' + record.get('name'));
                 if(cellIndex == 2) { // cellIndex starts from 0
                     Ext.Msg.alert('Selected Record', 'Name : ' + record.get('id') + ' ' + record.get('name'));
                 }
             },
             afteredit: function(val) {
                 alert(2)
       } ,

ok基本可以了。

ExtJS学习(四)EditorGrid可编辑表格的更多相关文章

  1. 38. ExtJS学习(四)EditorGrid可编辑表格

    转自:https://blog.csdn.net/qq_30739519/article/details/50865060

  2. ExtJS4.2学习(七)EditorGrid可编辑表格(转)

    鸣谢地址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html ------------- ...

  3. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  4. extjs 学习笔记(二)

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

  5. extjs学习(关于grid)

    1.想要调整某一列在表格中的顺序,可以使用mapping(索引是从0开始的) var store = new Ext.data.ArrayStore({ data:data, fields:[ {na ...

  6. jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、

    脚 本 之 家 www.jb51.net 脚本云 专题 素材下载 电子书 软件下载 源码下载 服务器常用软件 a5交易 首页 网页制作 脚本专栏 脚本下载 网络编程 数据库 CMS教程 电子书籍 平面 ...

  7. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  8. asp.net学习之 数据绑定控件--表格绑定控件

    原文:asp.net学习之 数据绑定控件--表格绑定控件     数据绑定 Web 服务器控件是指可绑定到数据源控件,以实现在 Web 应用程序中轻松显示和修改数据的控件.数据绑定 Web 服务器控件 ...

  9. 实现Easyui 可编辑表格

    一.前端框架使用的easyui框架 二.后端使用的是jfinal 三.效果图 四.html代码 <div id="table_tree" class="easyui ...

随机推荐

  1. hdu 5727 二分图+环排列

    Necklace Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Su ...

  2. [Codeforces]663E Binary Table

    某变换好题.不过听说还有O(2^n*n^2)DP的…… Description 给定一个n*m的01矩阵,你可以选择对任意行和任意列取反,使得最终“1”的数量尽量少. Input 第一行两个整数n,m ...

  3. [BZOJ]1019 汉诺塔(SHOI2008)

    找规律成功次数++. Description 汉诺塔由三根柱子(分别用A B C表示)和n个大小互不相同的空心盘子组成.一开始n个盘子都摞在柱子A上,大的在下面,小的在上面,形成了一个塔状的锥形体. ...

  4. python3全栈开发-并发编程的多进程理论

    一. 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): duoduo在一个时间段内有很多任务要做:python备课的任务,写 ...

  5. oracle之子查询、创建用户、创建表、约束

      子查询                                    子查询可以分为单行子查询和多行子查询   单行子查询           [1] 将一个查询的结果作为另外一个查询的条 ...

  6. 用js实现排列组合

    在leetcode上看到一个题,代码实现排列组合的. 记得大学上课时候,就用c写过,现在用js试试,顺便看看耗时. 先看看3的阶乘: function permute(temArr,testArr){ ...

  7. Tomcat常用参数的配置

    1.修改端口号 Tomcat端口配置在server.xml文件的Connector标签中,默认为8080,可根据实际情况修改. 修改端口号 2.解决URL中文参数乱码 在server.xml文件的Co ...

  8. Linux下安装java的jdk和配置环境变量

    每次感觉配这个超级简单 但是每次都要查下 记一下好了 Linux下安装jdk,步骤如下 1:下载jdk包:本章使用的为后缀为tar.gz的文件(不需要安装),如jdk-8u111-linux-x64. ...

  9. H5--Web Worker

    Web Worker是H5的新特性. JS是单线程的,所以在消息队列中如果用户想进行一些阻塞操作,比如时延timeout和定时器interval,或者是数据量较大及处理过程非常长的场景,就很容易出现页 ...

  10. delphi 线程教学第五节:多个线程同时执行相同的任务

    第五节:多个线程同时执行相同的任务   1.锁   设,有一个房间 X ,X为全局变量,它有两个函数  X.Lock 与 X.UnLock; 有如下代码:   X.Lock;      访问资源 P; ...