FlexGrid 点击单元格获取单元格所在列的binding 和行数据 ?

KevinChen

KevinChen · KevinChen

感谢反馈，本帖结贴了，如遇新的问题欢迎开新帖交流~

Fishborne · Fishborne

FlexGrid 点击单元格，
如何获取单元格所在列的binding 和行数据 ?

KevinChen · KevinChen

你好，请参考示例：https://demo.grapecity.com.cn/wi ... Events/Mouse/purejs

将以下代码完整拷贝后，替换掉示例的app.js即可：

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjCore from '@grapecity/wijmo';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// create some random data
var countries = 'US,Germany,UK,Japan'.split(',');
var data = [];
for (var i = 0; i < 20; i++) {
data.push({
id: i,
country: countries[i % countries.length],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
overdue: i % 4 == 0
});
}
//
// bind a grid to the data
var theGrid = new wjGrid.FlexGrid('#theGrid', {
itemsSource: new wjCore.CollectionView(data),
formatItem: function (s, e) {
if (e.panel == s.cells) {
if (s.columns[e.col].binding == 'country' && !(s.rows[e.row] instanceof wjGrid.GroupRow)) {
if (s.editRange != null && s.editRange.contains(e.row, e.col)) {
let spanEle = document.createElement('span');
spanEle.className = 'my-button';
spanEle.innerHTML = '⬤';
s.activeEditor.style.width = '75%';
e.cell.insertBefore(spanEle, s.activeEditor);
}
else {
let html = '⬤' + e.cell.innerHTML;
e.cell.innerHTML = html;
}
}
}
}
});
//
// monitor and log mouse moves
var logEl = document.getElementById('log');
theGrid.addEventListener(theGrid.hostElement, 'click', function (e) {
var ht = theGrid.hitTest(e);
var logText = wjCore.format('panel {cellType} row {row} col {col}', {
cellType: wjGrid.CellType[ht.cellType],
row: ht.row,
col: ht.col
});
if (e.target.classList.contains('my-button')) {
logText += ' (fake button!)';
}
else if (e.target.tagName == 'INPUT' && e.target.type == 'checkbox') {
logText += ' (checkbox!)';
}
else if (ht.panel == theGrid.cells) {
if (theGrid.rows[ht.row] instanceof wjGrid.GroupRow) {
logText += ' (group row)';
}
else {
logText += ' (value: ' + theGrid.cells.getCellData(ht.row, ht.col, true) + ')';
}
}
logText += '绑定列：' + theGrid.columns[ht.col].binding;
logEl.innerHTML = logText;
});
}

复制代码

Fishborne · Fishborne

ok, theGrid.hitTest(e)
thanks

		自动登录	找回密码
密码			立即注册

[已处理] FlexGrid 点击单元格获取单元格所在列的binding 和行数据 ?

最佳答案

4 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章

[已处理] FlexGrid 点击单元格 获取单元格所在列的binding 和行数据 ?

最佳答案

4 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章

[已处理] FlexGrid 点击单元格获取单元格所在列的binding 和行数据 ?