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

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

ok, theGrid.hitTest(e)
thanks

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

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

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import * as wjGrid from '@grapecity/wijmo.grid';
   
5. import * as wjCore from '@grapecity/wijmo';
   
6. //
   
7. document.readyState === 'complete' ? init() : window.onload = init;
   
8. //
   
9. function init() {
   
10.     //
    
11.     // create some random data
    
12.     var countries = 'US,Germany,UK,Japan'.split(',');
    
13.     var data = [];
    
14.     for (var i = 0; i < 20; i++) {
    
15.         data.push({
    
16.             id: i,
    
17.             country: countries[i % countries.length],
    
18.             sales: Math.random() * 10000,
    
19.             expenses: Math.random() * 5000,
    
20.             overdue: i % 4 == 0
    
21.         });
    
22.     }
    
23.     //
    
24.     // bind a grid to the data
    
25.     var theGrid = new wjGrid.FlexGrid('#theGrid', {
    
26.         itemsSource: new wjCore.CollectionView(data),
    
27.         formatItem: function (s, e) {
    
28.             if (e.panel == s.cells) {
    
29.                 if (s.columns[e.col].binding == 'country' && !(s.rows[e.row] instanceof wjGrid.GroupRow)) {
    
30.                     if (s.editRange != null && s.editRange.contains(e.row, e.col)) {
    
31.                         let spanEle = document.createElement('span');
    
32.                         spanEle.className = 'my-button';
    
33.                         spanEle.innerHTML = '&#x2b24;';
    
34.                         s.activeEditor.style.width = '75%';
    
35.                         e.cell.insertBefore(spanEle, s.activeEditor);
    
36.                     }
    
37.                     else {
    
38.                         let html = '<span class="my-button">&#x2b24;</span>' + e.cell.innerHTML;
    
39.                         e.cell.innerHTML = html;
    
40.                     }
    
41.                 }
    
42.             }
    
43.         }
    
44.     });
    
45.     //
    
46.     // monitor and log mouse moves
    
47.     var logEl = document.getElementById('log');
    
48.     theGrid.addEventListener(theGrid.hostElement, 'click', function (e) {
    
49.         var ht = theGrid.hitTest(e);
    
50.         var logText = wjCore.format('panel <b>{cellType}</b> row <b>{row}</b> col <b>{col}</b>', {
    
51.             cellType: wjGrid.CellType[ht.cellType],
    
52.             row: ht.row,
    
53.             col: ht.col
    
54.         });
    
55.         if (e.target.classList.contains('my-button')) {
    
56.             logText += ' (fake button!)';
    
57.         }
    
58.         else if (e.target.tagName == 'INPUT' && e.target.type == 'checkbox') {
    
59.             logText += ' (checkbox!)';
    
60.         }
    
61.         else if (ht.panel == theGrid.cells) {
    
62.             if (theGrid.rows[ht.row] instanceof wjGrid.GroupRow) {
    
63.                 logText += ' (group row)';
    
64.             }
    
65.             else {
    
66.                 logText += ' (value: <b>' + theGrid.cells.getCellData(ht.row, ht.col, true) + '</b>)';
    
67.             }
    
68.         }
    
69.         logText += '绑定列：' + theGrid.columns[ht.col].binding;
    
70.         logEl.innerHTML = logText;
    
71.     });
    
72. }
    

复制代码

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

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