尽管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
分享到:
相关推荐
MagicGrid is a small and flexible JQuery grid plugin. Although it only provide basic grid function, good design model give it great flexibility. It is open source and totally free. Before your start, ...
NULL 博文链接:https://atian25.iteye.com/blog/1019910
jQuery grid view plugin - jQuery表格插件
简单的jquery Grid 表格,对数据的排序,查询的操作
主要介绍了Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法,本文中的事件指collapsebody和expandbody事件,需要的朋友可以参考下
struts2-jquery-grid-plugin-3.5.1.jar 此jar包适合于struts2框架,一标签的形式实现grid插件,不过目前网络上此插件中文文档较少。
maven plugin maven plugin scm 项目管理 构建工具 antmaven plugin maven plugin scm 项目管理 构建工具 ant
Essential Grid 是 wordpress 的一个高级插件,它允许您在高度可定制的网格中显示各种内容格式。可能的应用范围包括投资组合、博客、画廊、Woomcommerce 商店、价格表、服务、产品幻灯片、推荐信以及任何你能想象到...
mybatis_plugin2.9.2
eclipse DB plugin(eclipse数据操作和浏览插件)
derby_plugin derby_ui_plugin derby Eclipse插件
Jenkins Email Extension Plugin
groovy eclipse plugin2groovy eclipse plugin2groovy eclipse plugin2groovy eclipse plugin2groovy eclipse plugin2groovy eclipse plugin2groovy eclipse plugin2
Pydroid repository plugin.xapk Pydroid repository plugin.xapkPydroid repository plugin.xapk
赠送jar包:spring-plugin-core-2.0.0.RELEASE.jar; 赠送原API文档:spring-plugin-core-2.0.0.RELEASE-javadoc.jar; 赠送源代码:spring-plugin-core-2.0.0.RELEASE-sources.jar; 赠送Maven依赖信息文件:spring...
Eclipse集成zk插件zk_plugin
xfire eclipse plugin插件 xfire eclipse plugin插件
Laravel开发-plugin 简单的Laravel插件管理
Credentials Plugin version:1.11 download from github,and have build it by: Run mvn clean package to create the plugin .hpi file. To install: 1. copy the resulting ./target/credentials.hpi file ...