火狐、IE浏览器实现Extjs的grid表格的复制、粘贴

最新推荐文章于 2020-12-28 00:37:00 发布

weixin_34355715

最新推荐文章于 2020-12-28 00:37:00 发布

阅读量319

点赞数

文章标签： python

原文链接：https://my.oschina.net/luyaolove/blog/418113

版权

2019独角兽企业重金招聘Python工程师标准>>>

从后台获取参数，一次填入ext：grid网状表格，发现表格内的数据不能复制粘贴，只能read...，火狐和IE 11都不能复制。

火狐解决方案

局部定义表格复制、粘贴的样式：  
  
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后引入)

IE解决方案

直接修改ext-all.js文件，将下面一个地方的unselectable="on"值改为unselectable=""即可

{c.cell=new Ext.Template('<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>','<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="" {attr}>{value}</div>',"</td>")}for(var a in c){var b=c[a];if(b&&Ext.isFunction(b.compile)&&!b.compiled){b.disableFormats=true;b.compile()}}this.templa

下面样式不确定要不要加，大家测试下，本人忘记了

<style type="text/css">
    .x-grid3-cell-text-visible .x-grid3-cell-inner {overflow:visible;padding:3px 3px 3px 5px;white-space:normal;word-wrap: break-word; }
</style>

转载于:https://my.oschina.net/luyaolove/blog/418113