ExtJs gridPanel实现多行选取

最新推荐文章于 2026-05-19 12:58:48 发布
原创 最新推荐文章于 2026-05-19 12:58:48 发布 · 1.3k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#extjs #gridPanel #多行选取
本文介绍如何在ExtJS中实现gridPanel的多行选择功能并获取所选数据。通过设置multiSelect为true及使用CheckboxModel，可以轻松实现多选。获取选择的数据只需调用getSelection方法。

需求

在ExtJs中使用gridPanel时，实现选取多行，并且获得其中的数据

效果图如下

这里写图片描述

解决

在ExtJs中实现多行选择，只需要在gridPanel中配置默认属性：

multiSelect:true,
selModel: new Ext.selection.CheckboxModel(),

获取选择的数据：

var selection = this.getSelectionModel().getSelection();

得到的是一个对象数组

ext 列表页面关于多行查询的办法
12-01
首先在Ext.grid.GridPanel中必须要有tbar对象 然后要增加listeners: { ‘render’: function() { bbar2.render(this.tbar); //add one tbar //twoTbar.render(this.tbar); //add two tbar // threeTbar.render(this.tbar); //add three tbar } } 可以看到这里有bbar2这样就可以增加很多bar了 代码如下:this.bbar2 = new Ext.Toolbar({ renderTo: grid.tbar, items
Ext.grid.GridPanel实现点击多选
qq_42607626的博客
01-07 849
GridPanel实现多选 Ext.grid.GridPanel中选中单元格时，不需要按ctrl键便可多选，重写Ext.grid.CheckboxSelectionModel中的handleMouseDown方法，该方法继承自Ext.grid.RowSelectionModel(),然后调用重写后的方法定义sm即可 Ext.override(Ext.grid.CheckboxSelectionModel, { handleMouseDown : function(g, rowIndex, e)
Ext:gridPanel 在js中实现获取选中一行/多行的某列值
weixin_34217773的博客
05-20 605
2019独角兽企业重金招聘Python工程师标准>>> ...
Python脚本打包成EXE：PyInstaller实战指南与问题解决
最新发布
weixin_30411239的博客
05-19 470
在软件开发中，程序打包是将代码与依赖环境封装为独立可执行文件的关键步骤，其核心原理是通过静态分析和字节码封装，将解释器、标准库及第三方模块整合进单一文件。这项技术解决了跨平台分发和环境依赖的难题，极大提升了软件的可移植性和用户体验。在Python生态中，PyInstaller作为主流打包工具，采用冻结机制和bootloader技术，能够自动处理包括PyQt5、NumPy在内的复杂依赖，并支持数据文件与资源打包。对于桌面应用、自动化工具和小型服务端程序的分发，打包技术尤为重要。本文聚焦于PyInstaller
Extjs高级应用（一）：实现GridPanel的单元格多选模组
weixin_30580943的博客
05-02 430
之前在项目中突然遇见一个很奇怪的需求，要求单元格能和Excel一样进行多选，比如框选其中一个矩形区域，然后复制到同页面另一个Grid中！！并添加统计报表功能。当时这个需求就把我们都怔住了！很变态很强悍的需求，因为这个模块是一个基于报表的统计功能，使用了一个第三方的报表工具，但是页面展示非常难看。。。。。客户就对我们说，为什么不用Ext来制作报表呢。呵呵最后当时是被我们回绝了，因为这确实是对...
Ext GridPanel多选问题
lwlq8888的专栏
11-23 341
//自动判断是否全选并选中或不选中表头的checkbox function autoCheckGridHead(){ var hd_checker = grid.getEl().select('div.x-grid3-hd-checker'); //CompositeElementLite/CompositeElement     var hd = hd_checker.first...
ExtJS4学习笔记(八)---Grid多选/全选
nuoyan666的专栏
08-02 4303
上一篇文章，在Grid中加入了搜索功能（链接地址是：www.mhzg.net/a/20115/20115219110248.html），但大量数据需要删除操作的时候，总不能一条一条去删除吧，本文介绍如何在Extjs4 Grid中加入全选功能。 先来张效果图： 点击显示
ExtJS 4学习之GridPanel
达拉斯母牛
10-20 4906
英文原文 The Grid Component 1 最简单的Grid Panel Grid Panel是ExtJS的核心部分之一，通过Grid Panel可以对数据显示、排序、分组和编辑。Model和Store是Grid Panel处理数据的核心，每个Grid Panel都必须设置Model和Store。要创建Grid Panel，首先要定义Model，Model包括了Grid Pan
ExtJS中的GridPanel动态添加ColumnModel
热门推荐
yangzhimei的专栏
09-17 1万+
    前短时间一直研究ExtJS来着，看了我做的ExtTest，项目组想试用一下ExtJS，于是决定让我研究一下。表面上很简单，其实Ext的功能强大自不必说，关键其 源码结构太乱了（如果有源码的结构清晰的就好了），实在难读，所以有些问题还是要不断琢磨、试验。 最近遇到个ExtJS的GridPanel的ColumnModel的动态加载的问题，就让我纠结了好几个小时，开始想得复杂了，还以为Colum
Extjs GridPanel 添加使用单选按钮radio
a282919088的博客
11-13 5508
columns[ { text : "表决意见", width : 160, flex:1, dataIndex : "custom1", radioValues:[{"inputValue":"1","boxLabel":"同
ExtJs——获取GridPanel中的行数据的详细信息
linglinglu的专栏
06-25 3683
首先来一段GridPanel的定义： var sm2 = new Ext.grid.CheckboxSelectionModel({}); /** 定义Grid2的数据源 */ var personStore = new Ext.data.JsonStore({ method : "POST", fields : ["id","organizationName","hold
EXTJS的gridpanel的多选框及回显
xiaob123aaa的专栏
04-24 646
今天是第一次贴代码，跟大家一起学习下，也是防止以后用到忘了吧！之前学了很多东西，但是我发现过一段时间就忘了怎么搞了，下次在遇到还是跟第一次用一样，很花时间！贴点代码记录下来吧以后，坚持！ 首先这是效果图   ，实现的作用功能就是多选，保存，回显！      下面是js的代码：    initUIComponents : function() {  var sm = new Ex...
GridPanel中getSelectionModel
cooperSun
10-28 1004
本文导读：Ext.grid.GridPanel继承自Panel，其xtype为grid，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 当我们需要获取选择的数据时，就需要用到getSelectionModel方法。下面介绍GridPanel中getSelectionModel的操作。 一、Ext.grid.GridPanel 主要配置项： sto
extjs4 grid 多选、添加复选框、动态添加删除数据
冷月宫主的专栏
04-17 1301
grid多选属性：multiSelect: true 添加复选框：首先定义var selectModel = Ext.create(‘Ext.selection.CheckboxModel’); 然后设置grid的selModel属性。 动态添加删除数据：store.insert();和store.remove(); 示例代码： var arows = Ext.getCmp('dail
extjs3和extjs4的CheckboxSelectionModel的全选和翻页后全选择
ajuan1212的专栏
05-14 2807
extjs4是Ext.selection.CheckboxModel，extjs3 Ext.grid.CheckboxSelectionModel，在全选和翻页的时候都会出现下面问题： 未全选，列头的checkbox还是选中状态。 解决办法：监听gridpanel对应的store的datachanged事件 extjs3： function autoCheckGridHead(grid
Extjs4---Checkbox,多选，全选
网站开发初中级代码参考-转载
09-12 286
为了方便对多条数据进行修改，多选，全选功能是不可少的，本文是在我发表的Extjs4---grid添加搜索功能上进行修改的 html代码： 同Extjs4---grid添加搜索功能上的html代码 只需修改引用即可 gridCheck.js代码： //下面两行代码必须要，不然会报404错误 Ext.Loader.setConfig({enabled:true}); //我的searc...
extjs grid选择框默认全选_Extjs gridpanel 加入全选列
weixin_39730801的博客
12-18 961
我们在用Extjs的gridpanel时，往往会用到选择列，该选择列最好带有全选和取消全选功能。具体代码如下：vartableCheckboxModel=Ext.create('Ext.selection.CheckboxModel',{mode:"SIMPLE",showHeaderCheckbox:true});Ext.define('BaseDataGeneApp.view.Tab...
为什么ExtJS的Grid显示Store中多条记录时只会显示最后一条记录？
逍遥友的专栏
12-28 906
最近编程，用ExtJS的Grid显示多条记录，但总是显示且仅显示最后一条记录，怎样检查程序都没找到问题，后来发现其对应的数据表的ID全部都是0000，没有唯一的ID，于是就将数据表的ID的属性用以下命令改成primary key, 并将现有数据的ID生成唯一的，重新运行程序，Grid就显示全部的记录了。  alter table pszxtwocancel change id id int(7)
Extjs gridPanel对选中行的操作
Elina_1992的专栏
11-05 3954
1.extjs gridpanel 操作行 得到选中行的列01 var model = grid.getSelectionModel(); 02 model.selectAll();//选择所有行 03 model.selectFirstRow();//选择第一行 04 model.selectLastRow([flag]);//选择最后一行,flag为正的话保持当前已经选中的行数,不填则默认
ExtJS4.2 Grid知识点五：多选行（可以点击行选中记录与只能点击多选框选中记录）...
weixin_33811539的博客
08-15 506
本节主要学习ExtJS4.2 Grid多选行知识，示例图片：在线演示/示例代码 主要内容如下： 可以点击行选中记录与只能点击多选框选中记录 选中Grid中数据加载到Form 获取Grid中多行数据，生成JSON格式 1.可以点击行来选中记录，此时多选Grid只需要配置selType: 'checkboxmodel'，此时有一个缺陷，当你通过多选框勾...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值