`
mutongwu
  • 浏览: 450088 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Grid “操作”列的plugin

    博客分类:
  • Ext
阅读更多
尽管EXT的常用设计是把对GRID记录的操作放在tbar或者bbar上,当总有人的需求与这个不一样。希望在每一条记录的后面,添加一列“操作”,对记录进行管理(修改、删除等)
于是,在参考了checkbox 的plugin以后,就可以完成上面的任务了。
插件的代码:
Ext.ux.OperateColumn = function(config){
        /**
         * @cfg 操作
         */
        this.operates = [];
        /**
         * @cfg 行样式的class名称
         */
        this.colStyle = 'grid3-operate-col';
        
        /**
         * @private 操作与处理函数映射
         */
        this.operateHandler = {}; 

	    Ext.apply(this, config);
	    if(!this.id){
	        this.id = Ext.id();
	    }
	    this.renderer = this.renderer.createDelegate(this);
	};
	
	Ext.ux.OperateColumn.prototype ={
        strTplImg : '<img class="{0}" op="{1}" ext:qtip="{2}" src="{3}"></img>',
        strTplText:'<span class ="{0}" op="{1}" style="{2}">{3}</span>',
	    init : function(grid){
	        this.grid = grid;
	        this.grid.on('render', function(){
	            var view = this.grid.getView();
	            view.mainBody.on('click', this.onClick, this);
	        }, this);
	    },
	    onClick : function(e, t){
            var op = t.getAttribute('op');
            if(this.operateHandler[op]){
                var index = this.grid.getView().findRowIndex(t);
                var record = this.grid.store.getAt(index);
                this.operateHandler[op](record);
            }
	    },
	
	    renderer : function(v, p, record){
            var ret = '';
            for(var i=0,len = this.operates.length;i < len; i++){
                this.operateHandler[this.operates[i]['type']] = this.operates[i]['handler'];

                if(this.operates[i].icon){
                    ret = ret + String.format(this.strTplImg,this.colStyle,this.operates[i]['type'],
                    this.operates[i]['qTips']||'',this.operates[i]['icon']);
                }
                else{
                    ret = ret + String.format(this.strTplText,this.colStyle,this.operates[i]['type'],
                    this.operates[i]['textStyle'],this.operates[i]['text']);
                }
            }
            return ret;
        }
	};


grid3-operate-col 的CSS代码:
.grid3-operate-col{
	margin:0 5px;
	cursor :pointer;
}


这里支持两种显示方式:
1.放上图片来表示操作——需要写上图片的位置和提示(可选)
2.写上文字来表示操作——需要写上文字和定义样式(可选)

来看一个使用例子:
首先是创建这样的一个实例:
     var opColumn = new Ext.ux.OperateColumn({
       header: "操作",
       dataIndex: 'id',//定义要映射的字段
       width: 80,
       align:'center',
       operates:[
       {
            type:'A',
            handler:function(){alert('a');},
            /*qTips:'修改',
            icon:'edit.gif'*/
            text: '修改',
            textStyle:'color:blue'
       },{
            type:'D',
            handler:function(record){grid.store.remove(record);},
            text:'删除',
            textStyle:'color:red'
/*            qTips:'删除',
            icon:'delete.gif'*/
       }
       ]
     });


在Grid中的应用:
.....
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ,opColumn//作为一列
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:350,
        width:600,
        title:'Array Grid'
        ,plugins:opColumn//添加插件

    });
.......


最后,上2张PP:




  • 大小: 8.3 KB
  • 大小: 22.2 KB
分享到:
评论

相关推荐

    jQuery grid view plugin - jQuery表格插件

    在jQuery Grid View插件中,你可以自定义列的宽度、样式和内容,以适应不同的数据类型和展示需求。此外,插件通常还支持列的排序功能,用户可以通过点击表头来按升序或降序排列数据。分页功能则让用户能够更有效地...

    sencha touch grid

    如果需要在Grid中编辑数据,可以使用`Ext.grid.plugin.CellEditing`或`Ext.grid.plugin.RowEditing`插件。这些插件提供单元格或整行的编辑模式,使用户可以直接在Grid上修改数据。 ### 排序与过滤 Grid默认支持对...

    Extjs Grid 扩展实例

    2. **行编辑**:为了实现增删改查的功能,我们可以集成ExtJS的行编辑插件(`Ext.grid.plugin.RowEditing`)。这允许用户直接在Grid的行内进行编辑,通过点击单元格激活编辑模式,完成后点击保存按钮提交更改。 3. *...

    Ext自定义Grid Cell插件

    1. **定义插件类**:首先,你需要创建一个新的类,继承自`Ext.grid.plugin.CellEditing`或`Ext.grid.plugin.RowEditing`,这两个是Ext JS内置的编辑插件。在你的类中,你可以覆盖或扩展默认的行为,以满足自定义的...

    Ext扩展控件-----可以在代码中动态为表格增加一列或者删除一列

    在本教程中,我们将深入探讨如何通过EXT Grid的插件机制实现动态地在代码中添加或删除表格列,这正是“Ext grid AddRemovecolumn plugin”的核心功能。 首先,让我们理解EXT Grid的基本结构。EXT Grid由多个组件...

    Ext表格列锁定+多表头插件

    这个插件主要用于改进Ext Grid的用户体验,特别是处理大量数据时,通过列锁定和多表头功能,使得用户能够更有效地浏览和操作数据。 首先,"列锁定"是Ext Grid中一个非常实用的功能,特别是在显示宽广、多列的数据表...

    Ext4 grid打印

    5. **插件支持**:Ext4 Grid可能需要借助特定的插件来实现打印功能,如Ext.grid.plugin.Printer。这些插件通常会处理大部分细节,包括表头的重绘和数据的分页。 6. **用户交互**:提供清晰的打印按钮和提示,让用户...

    ext grid网格控件实例

    EXT Grid控件是EXT JS库中的一个核心组件,它用于创建功能丰富的数据网格,能够高效地展示和操作大量数据。EXT Grid广泛应用于J2EE框架中,为Web应用提供了强大的数据展示和交互能力。在本实例中,我们将探讨四种...

    jquery grid plungin demo

    本篇将深入探讨"jquery grid plugin demo",通过代码示例解析其核心功能与应用场景。 jQuery Grid是一款基于jQuery的表格插件,它允许开发者创建具有分页、排序、搜索和过滤功能的数据网格。这个插件通常被称为...

    这是有关extjs的例子,里面有各种表单的定义,grid的实现

    Grid中的行可以通过`Ext.grid.RowModel`进行操作,而列则通过`Ext.grid.ColumnModel`进行定义。此外,Grid还可以通过添加插件(如`Ext.grid.plugin.CellEditing`)来实现单元格级别的编辑,或者通过`Ext.grid.plugin...

    table plugin

    总之,"table plugin"是提高Web应用中数据展示和管理能力的重要工具,其核心在于提供易用且功能强大的表格操作。通过深入了解和熟练运用这些插件,开发者能够更好地满足用户对数据展示的需求,提升产品的用户体验。

    flexigrid table jquery plugin

    这款插件提供了强大的数据展示能力,适用于处理大量数据并需要进行排序、分页、搜索和操作的数据表格。在网页开发中,Flexigrid能够极大地提升用户体验,使用户能够高效地浏览和管理表格数据。 Flexigrid的核心特性...

    Extjs4---grid的修改、删除功能---结合struts2、hibernate

    grid.plugins = [Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 // 单击即可编辑 })]; ``` 删除功能可以通过添加工具栏按钮实现,配合Struts2 Action进行后端处理。 ```javascript grid....

    Ext实现GridPanel内嵌行内嵌表格(RowExpander)

    在你的代码中,需要通过`Ext.grid.plugin.RowExpander`引入这个插件。 ```javascript var rowExpander = new Ext.grid.plugin.RowExpander({ expandTemplate: '{detail}', // 这里可以自定义展开后的模板,{...

    Ext 3.4 多表头 列锁定

    通过多表头,可以将相关列分组,使用户更容易理解和操作数据。例如,你可以将一组列定义为某个主题或类别的子集,并在表头中用嵌套的方式展示它们。在Ext 3.4中,实现多表头可能需要配置`headers`属性或者使用`Ext....

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    - 表格编辑:通过`Ext.grid.plugin.CellEditing`插件启用单元格编辑,用户可以直接在表格中修改数据。 - 分页:使用`Ext.toolbar.Paging`工具栏实现数据分页,提高数据加载效率。 - 表格排序:配置`sortInfo`属性或...

    表格Ext js源代码

    在本资源中,我们关注的是"表格Ext js gird源代码",这涉及到Ext JS中的Grid Panel组件,它是展示和操作数据集的主要工具。 Grid Panel是Ext JS中的核心组件之一,用于显示结构化的数据,通常以表格的形式。它支持...

    extjs 动态表格完整版

    `Ext.grid.plugin.RowEditing`和`Ext.grid.plugin.CellEditing`插件可以轻松启用这些功能。 6. **排序和过滤**:通过设置`sortable`属性,用户可以点击表头进行排序。使用`filters`配置可以为列添加过滤器,方便...

    ExtGridDemo

    7. **编辑(Editing)**:如果你的Grid需要支持数据编辑,可以集成Ext.grid.plugin.CellEditing或RowEditing插件。它们提供单元格级别的编辑,用户双击单元格后可以直接修改值。 8. **事件监听(Event Handling)**...

Global site tag (gtag.js) - Google Analytics