EXTJS GRID 中 单击行和单元格获得行或者单元格的内容(数据)
grid.addListener('cellclick',cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','当前选中的数据是'+data);
}
------------------------------------------------------------------------------
grid.on('mouseover',function(e){//添加mouseover事件
var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
var record = store.getAt(index);//把这列的record取出来
var str = Ext.encode(record.data);//组装一个字符串,这个需要你自己来完成,这儿我把他序列化
var rowEl = Ext.get(e.getTarget());//把target转换成Ext.Element对象
rowEl.set({
'ext:qtip':str //设置它的tip属性
},false);
}
});
---------------------------------------------------------------------------------
listeners: {
'cellclick':function(grid,rowIndex,columnIndex,e ){ }
}
//这是单击grid单元格时,触发的事件
grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";
我要改变都是整个背景色,不是光是字的颜色。还有怎么能点一个单元格时候,让上次的点的单元格颜色恢复到原来呢???
把表格刷新下可以把以前单击而改变的颜色还原,grid.getView().refresh(); 然后再让这次单击的单元格变色。
grid.getView().refresh();
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";
分享到:
相关推荐
在IT领域,特别是Web开发中,Ext Grid是一个广泛使用的组件,用于展示和管理大量数据。它提供了丰富的功能,包括排序、筛选、分页等,使得数据的交互和操作变得非常便捷。当我们需要将Ext Grid中的数据导出为Excel...
在按钮的点击事件处理器中,执行上述的数据转换和文件写入操作。 4. **文件下载触发**:导出完成后,我们需要创建一个隐藏的`<a>`标签,设置其`href`为生成的Excel文件的Blob URL,并模拟点击,从而触发浏览器的...
9. **事件处理**:EXTGRID支持各种用户操作事件,如点击、双击、选中等,通过监听这些事件可以实现定制化功能。 在压缩包中,"Test.bak"可能是一个备份文件,通常包含程序的原始数据或配置信息,而"MyEXT"可能是EXT...
2. 当用户滚动到Grid的底部或者点击分页导航条时,EXT Grid会触发Ajax请求,向服务器发送当前的页码和每页记录数。 3. DWR接收到请求后,根据这些参数在后端数据库执行相应的SQL查询,获取对应页的数据,并将其转换...
通常,它会监听EXT Grid的某个事件(如按钮点击),在事件处理函数中执行导出操作。 请注意,为了使示例能够直接运行,你需要确保引入了EXT库、SheetJS库和FileSaver.js库,并且这些库的版本与示例代码兼容。此外,...
6. **触发下载**:最后,创建一个隐藏的`<a>`标签,设置其`href`属性为刚才创建的URL,并触发点击事件,这样浏览器就会开始下载Excel文件。 博客链接提到的可能是一个具体的实现示例或工具,但未提供具体内容,所以...
5. **排序(Sorting)**: Grid的每列都可进行升序或降序的排序,只需点击列头即可。可以通过`sortable`配置项控制列是否可排序。 6. **过滤(Filtering)**: Grid支持行级过滤,允许用户根据列的值筛选数据。`...
6. **事件监听**:EXT提供了丰富的事件系统,如`rowselect`、`cellclick`等,可以监听用户的交互行为,实现动态响应。 7. **Ajax交互**:GRID通常与服务器进行异步数据交换,EXT的AJAX组件(如AjaxProxy)用于发送...
"extgrid导出excel"这个主题是关于如何将ExtJS中的数据网格(Ext Grid)的数据导出到Excel文件中,方便用户进行数据管理和分析。 首先,让我们深入了解一下Ext Grid。Ext Grid是一种用于展示和操作大量结构化数据的...
3. 排序:Grid中的每一列都可以设置为可排序,用户只需点击列头,即可根据该列数据进行升序或降序排序。 4. 自定义列:EXT Grid允许开发者自定义列的显示样式和行为,可以添加图片、链接,甚至嵌入其他EXT组件。 5...
你可以创建一个隐藏的`a`标签,设置其`href`为生成的文件内容URL,然后模拟点击事件,触发下载。 在实际应用中,你可能还需要处理一些复杂情况,比如: - 处理样式和格式:EXT Grid的样式无法直接应用于Excel,...
EXTgrid是一款基于JavaScript的前端数据展示组件,广泛应用于Web应用程序中,用于展示大量结构化数据。它是由ExtJS库提供的一种强大的数据网格控件。在Web应用中,有时需要将EXTgrid中的数据导出到Excel文件,以便...
在Ext JS这个强大的JavaScript框架中,`Grid...在深入研究`Ext Grid CellEdit`的过程中,了解和掌握组件化开发思想、事件处理机制以及数据绑定原理是非常重要的,这些知识点能够帮助你更好地驾驭此类自定义插件的开发。
同时,它可能还包含了导出按钮的定义,当用户点击这个按钮时,会触发`gridToExcel.js`中的导出逻辑。 最后,`exportexcel.jsp`可能是一个服务器端的处理程序,用于辅助导出过程。在某些情况下,由于浏览器的安全...
- 用户滚动到Grid的底部或点击分页条的下一页按钮时,EXT Grid会向服务器发送请求,携带当前页码和每页记录数。 - 服务器根据这些参数查询数据库,只返回当前页面所需的数据,并可能包含总记录数,以便正确显示...
JSP可以通过AJAX请求触发导出操作,当用户点击“导出”按钮时,EXT Grid的Store会将其当前的数据发送到服务器。在服务器端,可以使用Apache POI库,这是一个强大的API,专门用于处理Microsoft Office格式的文件,...
4. **禁用默认行为**:由于Grid本身已经处理了行点击事件,所以需要禁用radio按钮的默认点击行为,以防止选中状态的混乱。在renderer中,我们添加了`disabled`属性,这将阻止浏览器对radio按钮的默认处理。 5. **...
通过监听事件,可以实现用户交互,如点击事件、编辑事件等。 5. **行操作**:行可以添加、删除、编辑,甚至拖动进行重新排序。EXT JS提供行选择模式,如单选、多选和全选。 6. **视图配置**:Grid的视图配置可以...
EXT Grid 是一个强大的数据网格组件,广泛应用于EXT JS框架中,用于展示和操作大量结构化数据。表头的三层插件则是EXT Grid的一种扩展功能,它允许用户在表头部分实现更为复杂和多层次的布局,以更好地管理和组织...
**jq-extgrid表格插件详解** jq-extgrid是一款基于jQuery的强大的表格插件,它极大地扩展了基础的jQuery grid功能,提供了丰富的特性以满足复杂的表格展示需求。在Web开发中,尤其是在数据展示和操作上,jq-extgrid...