在做gridPanel中生成的数据有时需要进行查询,要是对整体数据过滤的话可以进行后台查询,但有些情况是需要根据本页面的数据进行选择,于是本人做了这个小的插件!
这个插件的功能是根据gridpanel中的列模式生成一个列表用于选择根据那个字段过滤数据,然后在文本框中输入需要过滤的数据
界面如图:
下拉列表是根据columnModel动态生成的,默认下拉列表数据中不包含隐藏列,可以自己在初始化插件时进行设置isContainHide 为true,默认从第1列生成下拉列表的数据,可以通过columnStart指定从那一列开始。
具体代码如下:
Ext.ns('Ext.ux.grid');
Ext.ux.grid.GridDataFilter = Ext.extend(Ext.util.Observable,{
//当前grid
grid : null,
//从那一列开始生成数据,默认从第一列开始
columnStart : 1 ,
//生成数据是否包含隐藏列
isContainHide : false ,
constructor : function(config){
Ext.apply(this, config?config:{});
Ext.ux.grid.GridDataFilter.superclass.constructor.call(this, config);
},
init : function(grid){
this.grid = grid ;
if(!grid.getTopToolbar()){
//如果gird有tbar
var tbar = new Ext.Toolbar([
this.getTbarCombo()
, {
xtype : 'textfield' ,
listeners : {
scope : this ,
render : function (f){
f.el.on('keydown' ,this.gridDataFilter , f , {buffer : 350, opGird:this.grid });
}
}
}
]);
grid.add(tbar);
}else{
//如果gird没有tbar
grid.on({
scope : this ,
render : function(){
grid.getTopToolbar().add(this.getTbarCombo());
grid.getTopToolbar().add({
xtype : 'textfield' ,
listeners : {
scope : this ,
render : function (f){
f.el.on('keydown' ,this.gridDataFilter , f , {buffer : 350, opGird:this.grid });
}
}
});
}
})
}
},
//过滤数据的函数
gridDataFilter : function(e,t,o){
var text = e.target.value ;
var varStore = o.opGird.getStore();
var tempSelValue = Ext.getCmp('tbarComboId').getValue();
if( tempSelValue != ''){
varStore.filter(tempSelValue,text,true ,false );
}else{
Ext.Msg.alert('提示','请选择需要查询字段');
}
} ,
/**
*根据grid生成列定义数组值
*@start,从那一列开始生成数据
*@param isContainHide是否包含隐藏列字段 默认false
*/
getGridColumnArrayData : function(){
var isHide = this.isContainHide ? this.isContainHide : false ;
var cm = this.grid.getColumnModel();
var retArr = new Array();
for(var i=this.columnStart-1 ; i<cm.getColumnCount() ; i++){
if(isHide){
var tempArr = new Array();
tempArr.push(cm.getDataIndex(i));
tempArr.push(cm.getColumnHeader(i));
retArr.push(tempArr);
}else{
if(!cm.isHidden(i)){
var tempArr = new Array();
tempArr.push(cm.getDataIndex(i));
tempArr.push(cm.getColumnHeader(i));
retArr.push(tempArr);
}
}
}
return retArr;
} ,
/**
*生成下拉列表的Store数据源
*/
getTbarComboStore : function(){
var store = new Ext.data.Store({
data : this.getGridColumnArrayData(),
reader : new Ext.data.ArrayReader({},[
{name : 'value' , mapping : 0 },
{name : 'name' , mapping : 1 }
])
});
return store ;
} ,
/**
*生成下拉列表combo
*/
getTbarCombo : function(){
var combo ={
xtype : 'combo' ,
emptyText : '请选择查询字段' ,
editable : false ,
fieldLabel : '查询字段',
id : 'tbarComboId' ,
editable : false ,
forceSelection : true ,
store : this.getTbarComboStore() ,
triggerAction : 'all' ,
mode : 'local' ,
displayField : 'name' ,
valueField : 'value'
}
return combo ;
}
});
- 大小: 29.8 KB
分享到:
相关推荐
nui或者miniui中gird合并重复行数据,查找某行
例如,数据表中有一个字段 f_DemoImage 用来存放图片的路径(包括图片文件名),为了在 DataGrid 的 Cell 中显示实际的图片,我们可以定义一个模板列,然后给该列赋予字段 f_DemoImage 的值,就可以在 DataGrid 的 ...
主要介绍了C#中GridView动态添加列的实现方法,涉及C#中GridView的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
CanOpen对象字典生成工具, 生成主站从站节点的对象字典。
一个很优秀的前台GIRD组件,速度快,体积小。最重要的,这个是免费的。:)
mfc 写的GIRD 源码,有两个例题,一个是基于对话框的;一个是Doc/View
ext2.0动态加载grid的例子,内附完整源码!
Echarts参数属性学习Gird演示案例:在同一个DOM中,使用gird同时创建折线图和柱图,可高效的利用数据,同时对API的开发和对接有事半功倍的效果。
selenium gird 资源part2
selenium gird 简介selenium gird 简介
ssh+extjs4.0grid删除数据实例,包没有了大家把包下载下来! 我的资源中有extjs的依赖包!
exejs gird filter java action整合资料
selenium gird资源selenium gird资源part1
gird_layout.zip
C#把GRID中的文字存储到EXCEL支持的CSV文件,保存后的文件能用EXCEL打开,排版后即可打印等操作。
ext Gird 有滚动条功能 附带滚动条 重写原本EXT
PB源码示例,绝对高效,效果相当不错,Grid标题美化demo。
可以在代码中动态为表格增加一列或者删除一列 ext gird AddRemovecolumn plugin
ext中grid数据查找后重填到gird中.网上搜集的部分资料。
Gird_Eye模块的Linux上位机,用qt开发,里面涉及到Linux串口通信编程