实现Extjs的grid表格的复制、粘贴

最新推荐文章于 2023-02-13 23:19:35 发布

幽y

最新推荐文章于 2023-02-13 23:19:35 发布

阅读量5.8k

点赞数

分类专栏： ExtJS

ExtJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

写了几个JSON格式数据绑定的grid网状表格，发现表格内的数据不能复制粘贴，只能read...

而又需要使用其中的某行数据，要求能方便快捷操作。

解决方法，如下：

局部定义表格复制、粘贴的样式：

1.在jsp、html中的<head></head>中添加css样式：

<style type="text/css"> 
     .x-selectable, .x-selectable * {  
          -moz-user-select: text!important;  
          -khtml-user-select: text!important;  
      }  
  </style> 

 

2.在grid中添加：

grid=new Ext.grid.GridPanel({
        viewConfig: {     
    templates: {    
     cell: new Ext.Template(  
       '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id}   x-selectable {css}" style="{style}"   tabIndex="0" {cellAttr}>', 
       '<div class="x-grid3-cell-inner x-grid3-col-{id}"  {attr}>{value}</div>',
       '</td>'
        )
     }  
   },

....})

 

 

全局定义复制、粘贴的样式：

1、在*.css文件中添加样式： 

.x-selectable, .x-selectable * {  
          -moz-user-select: text!important;  
          -khtml-user-select: text!important;  
      } 

2、新建一个js文件，写入如下内容：

if (!Ext.grid.GridView.prototype.templates) {
   Ext.grid.GridView.prototype.templates = {};
}
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
   '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}"  style="{style}" tabIndex="0" {cellAttr}>',
   '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
   '</td>'
);

3、在每一个需要复制，粘贴的grid的中引入此js(注：必须在ext-all.js后引入)

转载自：http://blog.sina.com.cn/s/blog_66a219dd0100s0ox.html

幽y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现Extjs的grid表格的复制、粘贴

写了几个JSON格式数据绑定的grid网状表格，发现表格内的数据不能复制粘贴，只能read...而又需要使用其中的某行数据，要求能方便快捷操作。解决方法，如下：局部定义表格复制、粘贴的样式：1.在jsp、html中的中添加css样式： .x-selectable, .x-selectable * { -moz-user-sel
复制链接

扫一扫