extjs grid 单元格 多选
new Ext.grid.CellSelectionModel({
last : false, // 上一次选中的单元格
selections : [], // 选择区缓存
handleMouseDown: function (grid, row, col, event) {
var isSelected;
if (event.button !== 0 || this.isLocked())
return;
if (event.shiftKey && this.last !== false) { //是否按下shift
this.selectMatrix(row, col);
grid.getView().focusCell(row, col);
return;
} else if (event.ctrlKey) { //是否按下ctrl
isSelected = this.isSelected(row, col);
if (col === 0 && this.last[1] === 0) {
isSelected ? this.deselectRow(row) : this.selectRow(row, true);
}
if (isSelected) { // 是否已被选中,是则反选,否则选中
this.deselectCell(row, col);
} else {
this.selectCell(row, col, true);
this.last = [row, col];
}
} else if (col === 0) { // 第一列是NumberColumn 点击则选择列
this.selectRow(row);
this.last = [row, col];
} else { // 选择单个单元格
this.selectCell(row, col);
this.last = [row, col];
}
if (this.matrix)
delete this.matrix;
},
// 清除选择区内所以单元格被选中的样式
clearCellSelections: function () {
var l = this.selections.length,
i = 0;
for (; i < l; i++) {
cell = this.selections[i];
this.grid.view.onCellDeselect(cell[0], cell[1]); // GridView的内置方法,改变某单元格样式
}
this.selections.length = 0;
},
// 反选指定单元格,并清除相应选择区缓存
deselectCell: function (row, col, isDelrow) {
var l = this.selections.length,
i = 0, n = 0;
if (this.selections) {
this.grid.view.onCellDeselect(row, col); // GridView的内置方法,改变某单元格样式
for (; i < l; i++) {
cell = this.selections[i];
if (row !== cell[0] || col !== cell[1]) {
this.selections[n++] = this.selections[i];
} else if (!isDelrow) { // 是否删除行
this.selections.splice(i, 1);
return;
}
}
this.selections.length = n;
}
},
// 根据选择区缓存中的数据,判断是否被选中
isSelected: function (row, col) {
var l = this.selections.length,
i = 0;
for (; i < l; i++) {
cell = this.selections[i];
if (row === cell[0] && col === cell[1]) {
return true;
}
}
return false;
},
// 选中某个单元格
selectCell: function (rowIndex, colIndex, keepExisting, preventViewNotify, preventFocus) {
if (this.fireEvent("beforecellselect", this, rowIndex, colIndex) !== false) {
if (!keepExisting)
this.clearCellSelections();
this.selections.push([rowIndex, colIndex]); // 加入选择区缓存
if (!preventViewNotify) {
var v = this.grid.getView();
v.onCellSelect(rowIndex, colIndex); // GridView的内置方法,改变某单元格样式
if (preventFocus !== true) {
v.focusCell(rowIndex, colIndex);
}
}
this.fireEvent("cellselect", this, rowIndex, colIndex);
this.fireEvent("selectionchange", this, this.selection);
}
},
// 选中某一行
selectRow: function (rowIndex, keepExisting) {
var clen = this.grid.getColumnModel().getColumnCount(),
c = 0;
if (!keepExisting)// 是否清空所有已选择的单元格
this.clearCellSelections();
for (; c < clen; c++) {
this.selectCell(rowIndex, c, true);
}
},
// 某行反选
deselectRow: function (row) {
var clen = this.grid.getColumnModel().getColumnCount(),
c = 0;
if (this.selections) {
for (; c < clen; c++) {
this.deselectCell(row, c, true);
}
}
},
// 按shift键调用的方法,选中一个矩形区域内所有的单元格
selectMatrix: function (row, col, keepExisting) {
// 以上一次被选择的单元格为起点,形成一个矩阵区域
var r = this.last[0],
c = this.last[1];
if (!keepExisting)
this.clearCellSelections();
if (r > row) {
var temp = row;
row = r;
r = temp;
}
if (col === 0 && c === 0) { // 若选择了第一列序号,则选择行
for (; r <= row; r++) {
this.selectRow(r, true);
}
return;
}
if (c > col) {
var temp = col;
col = c;
c = temp;
}
for (; r <= row; r++) {
for (var i = c; i <= col; i++) {
this.selectCell(r, i, true);
}
}
this.matrix = { // 矩形区域选择区数据
start: [r, c],
end: [row, col]
};
}
}),
extjs grid 单元格 多选的更多相关文章
- Extjs grid 单元格事件
celldblclick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) { //extjs 4.2下,有时出现,多次不 ...
- Extjs grid 单元格编辑
实现grid勾选后出现编辑按钮,通过增加一个字段checked来控制 事件如下: selectionchange: function (thi, selected, eOpts) { for (var ...
- ExtJs4学习(十)Grid单元格换色和行换色的方法
Grid单元格换色 { text:'类别', dataIndex:'type', align:'center', renderer:function(value,metaData){ console. ...
- 取得grid单元格里刚输入的文本,未保存的文本
取得grid单元格里刚输入的文本内容,未保存的文本,正在输入的值,正在编辑的值,编辑框 dbgrid->DataSource->DataSet->UpdateRecord(); pr ...
- ExtJS4.x Grid 单元格鼠标悬停提示
//每一个列都会出现鼠标悬浮上去显示内容 /** * //适用于Extjs4.x * @class Ext.grid.GridView * @override Ext.grid.GridView * ...
- 点击grid单元格弹出新窗口
实现功能:点击指定单元格后会弹出新窗口,并且最后一行合计不会触发单元格触发函数 <script type="text/javascript"> grid.on('cel ...
- 关于Kendo的Grid 单元格样式
<!DOCTYPE html><html style="height: 100%;"><head><meta http-equiv=&qu ...
- Ext grid单元格编辑时获取获取Ext.grid.column.Column
item2.width = 80; //item2.flex = 1; item2.align = 'center'; item2.menuDisabled = true; //禁止显示列头部右侧菜单 ...
- ExtJs grid单选,多选
一. selType : 'checkboxmodel',singleSelect : true, // 单选multiSelect : true, // 多选singleSelects:['edit ...
随机推荐
- Bluetooth SDP介绍
目录 1. 概念 2. 服务记录(Service Record) 3. 服务属性(Service Attribute) 4. 服务类(Service Class) 5. 服务查找 5.1 UUID 5 ...
- Bluetooth HCI介绍
目录 1. HCI功能 2. HCI Packet 1. HCI Command 2. HCI Event 3. HCI Data 3. HCI传输层 HCI, 主机控制接口(Host Control ...
- mongodb在win7下的安装和使用
1.下载mongodb的windows版本,有32位和64位版本,根据系统情况下载,下载地址:http://www.mongodb.org/downloads 2.解压缩至额E:/mongodb即可 ...
- github中国版本coding.net 的部署和使用
1.在coding.net注册帐号. 2.安装github,自己百度github软件然后安装. 3.打开coding.net 输入帐号后新建项目 创建项目 创建后,创建ssh公钥,如果不创建的话,在每 ...
- angularJS中controller的通信
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Oracle横向纵向汇总
Oracle横向纵向汇总 有一张表test 如下, (NO 学生编号 ,cj 成绩) NO name KM CJ 001 张三 语文 80 001 张三 数学 86 001 张三 英语 75 0 ...
- [LeetCode] Maximal Rectangle(good)
Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and ...
- Hubilder用git插件安装使用
打开Hbuilder,工具->插件安装(git分布式版本管理插件) 打开https://www.github.com,注册.登录.创建仓库 在Hbuilder中新建项目→然后右键→Team→共享 ...
- SQL语句创建表和数据库
删除数据库,SQL Server将数据库的清单存放在master系统数据库的sysdatabases表中,只需要查看该表是否存在于该数据库中就可以了,语句如下: use master -- 设置当 ...
- [转]ANDROID L——Material Design详解(动画篇)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...