自定义表头勾选框，勾选事件不会触发

按照官方的demo做的，新增了2列表头，第一列是勾选框，第二列是自定义文本
勾选框事件无法触发

源码

1. <style>
   
2.   .common-table-list {
   
3.     background-color: #fff;
   
4.     padding: 0 0;
   
5.   }
   
6. 
   
7.   #shipment {
   
8.     width: 100%;
   
9.     height: 650px;
   
10.     border: 1px solid #56b7e9;
    
11.   }
    
12. </style>
    
13. 
    
14. <div class="layui-fluid nepadmin-pad0 nepadmin-mar0" id="VIEW-order-list-table" lay-title="$t('运单列表')"
    
15.      v-auth="/order/list">
    
16.   <div class="common-pad">
    
17.     <ul class="common-tab-outer" id="menuOrderListContent">
    
18.       <!-- <li class="inner-this"><a lay-href="/order/list">$t('运单列表')</a></li> -->
    
19.     </ul>
    
20.   </div>
    
21.   <div class="common-content-outer">
    
22.     <div class="search-form">
    
23.       <form class="layui-form layui-row layui-col-space10" id="formOrder" lay-filter="formOrderData">
    
24.         <div class="layui-inline-select">
    
25.           <select name="order_status" lay-search lay-filter="orderFormVal"></select>
    
26.         </div>
    
27.         <div class="layui-inline-time layui-inline-select">
    
28.           <div class="layui-row">
    
29.             <div class="layui-col-md5">
    
30.               <select name="order_time" lay-filter="orderFormVal"></select>
    
31.             </div>
    
32.             <div class="layui-col-md7">
    
33.               <input type="text" name="time" id="searchDateShipment" placeholder="$t('请选择时间范围')" autocomplete="off"
    
34.                      class="layui-input" readonly>
    
35.             </div>
    
36.           </div>
    
37.         </div>
    
38.         <div class="layui-inline-input">
    
39.           <input type="text" name="keyword" class="layui-input jsKeyword" autocomplete="off"
    
40.                  placeholder="$t('请输入运单号/物流单号/买家/商品名称/商品SKU/商品SPU')">
    
41.         </div>
    
42.         <div class="layui-inline-btn">
    
43.           <button class="layui-btn layui-btn-sm layui-btn-default" lay-submit lay-filter="searchOrder">
    
44.             <i style="display: none"
    
45.                class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
    
46.             $t('查询')
    
47.           </button>
    
48.         </div>
    
49.         <div class="layui-inline-btn">
    
50.           <button class="layui-btn layui-btn-sm layui-btn-default" lay-submit lay-filter="payShipment">
    
51.             <i style="display: none"
    
52.                class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
    
53.             $t('付款')
    
54.           </button>
    
55.         </div>
    
56.       </form>
    
57.     </div>
    
58.     <div class="common-table-list">
    
59.       <div id="shipment"></div>
    
60.     </div>
    
61.   </div>
    
62. </div><!-- 顶部菜单 -->
    
63. 
    
64. <script>
    
65.   layui.use(['admin', 'table', 'form', 'dropdown', 'jquery', 'laydate', 'i18n', 'laytpl', 'view'], function (admin, table, form, dropdown, $, laydate, i18n, laytpl, view) {
    
66. 
    
67.     var spread = new GC.Spread.Sheets.Workbook(document.getElementById("shipment"), {
    
68.       tabStripVisible: false, // 隐藏sheet栏
    
69.       scrollbarMaxAlign: false, // 滚动条对齐表单最后一个数据
    
70.     })
    
71.       , sheet = spread.getActiveSheet()
    
72.       , spreadNS = GC.Spread.Sheets
    
73.       , oldJson = {}
    
74.       , saveJson = {}
    
75.       , template = {}
    
76.       , templateMaxY = 2
    
77.       , excelIo = new GC.Spread.Excel.IO();
    
78.     // spread.options.allowUndo = true; // 允许撤销操作
    
79. 
    
80. 
    
81.     var id = layui.router().search.id;
    
82.     admin.get({
    
83.       url: 'v1/supplier/' + id + '?expand=excel_template&fields=id',
    
84.       success: function (res) {
    
85.         init(res.data);
    
86.       }
    
87.     });
    
88. 
    
89. 
    
90.     function getSelect() {
    
91.       var spread = GC.Spread.Sheets.findControl("ss");
    
92.       var sheet = spread.getActiveSheet();
    
93.       // 获取选中行数据
    
94.       var checkedRows = [];
    
95.       for (var i = 0; i < sheet.getRowCount(); i++) {
    
96.         var checkboxValue = sheet.getValue(i, 0);
    
97.         if (checkboxValue) {
    
98.           checkedRows.push(i);
    
99.         }
    
100.       }
     
101.       for (var i = 0; i < checkedRows.length; i++) {
     
102.         console.log(sheet.getValue(checkedRows[i], 1));
     
103.         console.log(sheet.getValue(checkedRows[i], 2));
     
104.       }
     
105.     }
     
106. 
     
107. 
     
108.     function init(data) {
     
109.       if (!data.excel_template) {
     
110.         form.val('excel-form', {
     
111.           id: data.id
     
112.         });
     
113.         form.render();
     
114.         return;
     
115.       } else {
     
116.         var field = data.excel_template.field || {}
     
117.           , excel = data.excel_template.excel || {};
     
118.         form.val('excel-form', {
     
119.           ...data.excel_template.field,
     
120.           id: data.id
     
121.         });
     
122.         form.render();
     
123.       }
     
124.       if (excel) {
     
125.         template = data.excel_template.bind;
     
126.         templateMaxY = data.excel_template.maxy;
     
127.         renderData(excel, parseInt(field.title_begin), parseInt(field.title_end));
     
128.       }
     
129.     }
     
130. 
     
131. 
     
132.     function randomNum(minNum, maxNum) {
     
133.       switch (arguments.length) {
     
134.         case 1:
     
135.           return parseInt(Math.random() * minNum + 1, 10);
     
136.           break;
     
137.         case 2:
     
138.           return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
     
139.           break;
     
140.         default:
     
141.           return 0;
     
142.           break;
     
143.       }
     
144.     }
     
145. 
     
146. 
     
147.     form.on('submit(payShipment)', function (data) {
     
148.       var data = [];
     
149.       // 获取选中行数据
     
150.       var checkedRows = [];
     
151.       for (var i = 0; i < sheet.getRowCount(); i++) {
     
152.         var checkboxValue = sheet.getValue(i, 0);
     
153.         if (checkboxValue) {
     
154.           checkedRows.push(i);
     
155.         }
     
156.       }
     
157.       admin.modal.success('选中第' + checkedRows + '运单进行付款');
     
158.       return false;
     
159.       for (var i = 0; i < checkedRows.length; i++) {
     
160.         console.log(sheet.getValue(checkedRows[i], 1));
     
161.         console.log(sheet.getValue(checkedRows[i], 2));
     
162.       }
     
163. 
     
164.       return false;
     
165.     });
     
166. 
     
167. 
     
168.     function mockData() {
     
169.       var data = []
     
170.         , total = randomNum(10, 50);
     
171.       for (var i = 0; i < total; i++) {
     
172.         data.push({
     
173.           CustomerName: 'CTC',
     
174.           ShipmentType: 'Drop',
     
175.           BU: 'XXX',
     
176.           HAWBNo: 'SIN' + randomNum(1000000, 9999999),
     
177.           PONo: 'EBE19116 ' + randomNum(1000000, 9999999),
     
178.           Shipper: 'Life Technologies Holdings Pte Ltd ',
     
179.           OriginSite: 'Singapore',
     
180.           OriginAirport: 'SIN',
     
181.           OriginCountry: 'SG',
     
182.           DestAirport: 'PVG',
     
183.           DestCity: 'Hefei',
     
184.           DestCountry: 'cn',
     
185.           DestinationCurrency: 'CNY',
     
186.           FreightRate: Math.random() * 10,
     
187.           PayStatus: Math.random() * 10 > 5 ? 'Yes' : 'No'
     
188.         })
     
189.       }
     
190. 
     
191.       return data;
     
192.     }
     
193. 
     
194. 
     
195.     function renderData(excel, begin, end) {
     
196.       spread.fromJSON(JSON.parse(excel), {
     
197.         tabStripVisible: false, // 隐藏sheet栏
     
198.         scrollbarMaxAlign: false, // 滚动条对齐表单最后一个数据
     
199.       });
     
200.       sheet = spread.getActiveSheet();
     
201.       // sheet.options.isProtected = true;
     
202.       // 停止渲染
     
203.       sheet.suspendPaint();
     
204.       // 隐藏表头
     
205.       // sheet.options.rowHeaderVisible = false;
     
206.       // sheet.options.colHeaderVisible = false;
     
207. 
     
208.       // 新增表头
     
209.       sheet.setColumnCount(2, spreadNS.SheetArea.rowHeader);
     
210.       sheet.options.rowHeaderAutoTextIndex = 0;
     
211.       sheet.options.rowHeaderAutoText = spreadNS.HeaderAutoText.blank;
     
212. 
     
213.       // 冻结表头
     
214.       sheet.frozenRowCount(end);
     
215.       // sheet.frozenColumnCount(2);
     
216.       // 合并勾选框 付款状态
     
217.       sheet.addSpan(0, 0, 2, 1, GC.Spread.Sheets.SheetArea.rowHeader);
     
218.       sheet.addSpan(0, 1, 2, 1, GC.Spread.Sheets.SheetArea.rowHeader);
     
219.       // 设置勾选框 付款状态
     
220.       var style = new GC.Spread.Sheets.Style();
     
221.       style.backColor = '#56b7e9'
     
222.       style.foreColor = 'white'
     
223.       style.vAlign = GC.Spread.Sheets.VerticalAlign.center
     
224.       style.hAlign = GC.Spread.Sheets.HorizontalAlign.center
     
225.       sheet.setStyle(-1, 0, style, GC.Spread.Sheets.SheetArea.rowHeader);
     
226.       sheet.setStyle(-1, 1, style, GC.Spread.Sheets.SheetArea.rowHeader);
     
227. 
     
228.       // 勾选框不锁定
     
229.       // style.locked = false
     
230.       sheet.setCellType(0, 0, new MyCheckBoxCellType(), GC.Spread.Sheets.SheetArea.rowHeader);
     
231.       sheet.getCell(0, 1, GC.Spread.Sheets.SheetArea.rowHeader).width(150)
     
232.         .text('Status').backColor('#56b7e9').foreColor('white')
     
233.         .vAlign(GC.Spread.Sheets.VerticalAlign.center)
     
234.         .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
     
235. 
     
236.       renderTemplate(begin, mockData())
     
237.     }
     
238. 
     
239. 
     
240.     function getTemplateData(index, data) {
     
241.       if (!template[index]) {
     
242.         return '';
     
243.       }
     
244.       var name = template[index].name;
     
245.       if (!data[name]) {
     
246.         return '';
     
247.       }
     
248. 
     
249.       return data[name];
     
250.     }
     
251. 
     
252. 
     
253.     function renderTemplate(end, data) {
     
254.       // 根据数据数量生成新行
     
255.       var length = data.length;
     
256.       sheet.addRows(end + 1, length - 1);
     
257.       // 循环生成勾选框
     
258.       for (var i = 0; i < length; i++) {
     
259.         var c = new GC.Spread.Sheets.CellTypes.CheckBox()
     
260.           , x = i + parseInt(end)
     
261.           , rowData = data[i] || {};
     
262.         // c.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
     
263.         sheet.setCellType(x, 0, c, GC.Spread.Sheets.SheetArea.rowHeader);
     
264.         sheet.getCell(x, 1, GC.Spread.Sheets.SheetArea.rowHeader).text(rowData.PayStatus).foreColor(rowData.PayStatus == 'Yes' ? 'white' : 'red'); // 付款状态
     
265. 
     
266.         // 单元格赋值
     
267.         for (var y = 0; y < templateMaxY; y++) {
     
268.           var cellData = getTemplateData(y, rowData);
     
269.           if (cellData) {
     
270.             sheet.setValue(x, y, cellData);
     
271.           }
     
272.         }
     
273.       }
     
274.       sheet.resumePaint();
     
275.       // 绑定勾选框事件
     
276.       spread.bind(GC.Spread.Sheets.Events.ButtonClicked,
     
277.         function (e, args) {
     
278.         alert(args);
     
279.           var sheet = args.sheet,
     
280.             row = args.row,
     
281.             col = args.col;
     
282.           var cellType = sheet.getCellType(row, col);
     
283.           if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBox) {
     
284.             var colHeaderCell = cellType = sheet.getCell(0, col, GC.Spread.Sheets.SheetArea.rowHeader);
     
285.             if (colHeaderCell.cellType() instanceof MyCheckBoxCellType) {
     
286.               var checkStatus = true;
     
287.               for (var i = 0; i < sheet.getRowCount(); i++) {
     
288.                 var cell = sheet.getCell(i, col);
     
289.                 if (cell.cellType() instanceof GC.Spread.Sheets.CellTypes.CheckBox && !cell.value()) {
     
290.                   checkStatus = false;
     
291.                   break;
     
292.                 }
     
293.               }
     
294.               colHeaderCell.tag(checkStatus);
     
295.               sheet.repaint();
     
296.             }
     
297.           }
     
298.         });
     
299.     }
     
300. 
     
301. 
     
302.     var viewPage = $('#VIEW-order-list-table');
     
303.     var tableFilter = 'order-list-table';
     
304.     var routeStatus = admin.route.search.status;
     
305.     var selectTpl = document.getElementById('select-tpl').innerHTML;
     
306. 
     
307. 
     
308.     // 初始化
     
309.     admin.get({
     
310.       url: 'v1/basic?fields=order_status,warehouse,shop,order_time',
     
311.       success: function (res) {
     
312.         var data = res.data;
     
313.         if (routeStatus) {
     
314.           renderSelect(data.order_status, 'order_status');
     
315.           form.val("formOrderData", {
     
316.             "order_status": routeStatus
     
317.           })
     
318.           form.render();
     
319.         } else {
     
320.           renderSelect(data.order_status, 'order_status');
     
321.         }
     
322.         renderSelect(data.order_time, 'order_time');
     
323.         form.render();
     
324.       }
     
325.     });
     
326. 
     
327.     // 渲染通用下拉框
     
328.     function renderSelect(data, name) {
     
329.       var container = $('select[name=' + name + ']');
     
330.       laytpl(selectTpl).render(data, function (html) {
     
331.         if (name == 'order_status') {
     
332.           html = '<option value="">' + i18n.t('全部状态') + '</option>' + html;
     
333.         }
     
334.         if (name == 'order_time') {
     
335.           html = '<option value="">' + i18n.t('全部时间') + '</option>' + html;
     
336.         }
     
337.         container.html(html);
     
338.       });
     
339.     }
     
340. 
     
341.     // 搜索
     
342.     var arrForm = []; // 取出表单的value值
     
343.     var objField = {}; // 存储表单的value值，方便提交
     
344.     // select搜索
     
345.     form.on('select(orderFormVal)', function (data) {
     
346.       arrForm = $('#formOrder').serializeArray();
     
347.       for (var i in arrForm) {
     
348.         objField.order_status = arrForm[0].value
     
349.         objField.warehouse_id = arrForm[1].value
     
350.         objField.shop_id = arrForm[2].value
     
351.         objField.order_time = arrForm[3].value
     
352.         objField.time = arrForm[4].value
     
353.         objField.keyword = arrForm[5].value
     
354.       }
     
355.       reloadTable(objField)
     
356.     });
     
357.     // 时间搜索
     
358.     laydate.render({
     
359.       elem: '#searchDateShipment',
     
360.       range: '~',
     
361.       done: function (value, date, endDate) {
     
362.         arrForm = $('#formOrder').serializeArray();
     
363.         for (var i in arrForm) {
     
364.           objField.order_status = arrForm[0].value
     
365.           objField.warehouse_id = arrForm[1].value
     
366.           objField.shop_id = arrForm[2].value
     
367.           objField.order_time = arrForm[3].value
     
368.           objField.time = value
     
369.           objField.keyword = arrForm[5].value
     
370.         }
     
371.         reloadTable(objField)
     
372.       }
     
373.     });
     
374. 
     
375. 
     
376.     // 下载ssjson文件方法
     
377.     var funDownload = function (content, filename) {
     
378.       var eleLink = document.createElement('a');
     
379.       eleLink.download = filename;
     
380.       eleLink.style.display = 'none';
     
381.       // 字符内容转变成blob地址
     
382.       var blob = new Blob([content]);
     
383.       eleLink.href = URL.createObjectURL(blob);
     
384.       // 触发点击
     
385.       document.body.appendChild(eleLink);
     
386.       eleLink.click();
     
387.       // 然后移除
     
388.       document.body.removeChild(eleLink);
     
389.     };
     
390. 
     
391.     // 点击按钮，导出当前页面的ssjson文件。
     
392.     $("#saveSsjson").click(function () {
     
393.       var testJson = JSON.stringify(spread.toJSON());
     
394.       funDownload(testJson, "test.ssjson");
     
395.     });
     
396. 
     
397. 
     
398.     // 导出事件
     
399.     $("#saveExcel").click(function () {
     
400. 
     
401.       var fileName = $("#exportFileName").val();
     
402.       var password = $("#password").val();
     
403.       if (fileName.substr(-5, 5) !== '.xlsx') {
     
404.         fileName += '.xlsx';
     
405.       }
     
406. 
     
407.       // 导出到excel中，包括绑定的数据
     
408.       var json = spread.toJSON({
     
409.         includeBindingSource: true
     
410.       });
     
411. 
     
412.       // here is excel IO API
     
413.       excelIo.save(json, function (blob) {
     
414.         saveAs(blob, fileName);
     
415.       }, function (e) {
     
416.         // process error
     
417.         console.log(e);
     
418.       }, {password: password});
     
419. 
     
420.     });
     
421. 
     
422. 
     
423.     function MyCheckBoxCellType() {
     
424.       GC.Spread.Sheets.CellTypes.CheckBox.apply(this);
     
425.       this.caption("All");
     
426.     }
     
427. 
     
428.     MyCheckBoxCellType.prototype = new GC.Spread.Sheets.CellTypes.CheckBox();
     
429.     var basePaint = GC.Spread.Sheets.CellTypes.CheckBox.prototype.paint;
     
430.     MyCheckBoxCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
     
431. 
     
432.       //var tag = context.sheet.getColumn(context.col,context.sheetArea).tag();
     
433.       var tag = context.sheet.getTag(context.row, context.col, context.sheetArea);
     
434.       if (tag !== true) {
     
435.         tag = false;
     
436.       }
     
437.       basePaint.apply(this, [ctx, tag, x, y, width, height, style, context]);
     
438.     };
     
439.     MyCheckBoxCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
     
440.       if (context) {
     
441.         return {
     
442.           x: x,
     
443.           y: y,
     
444.           row: context.row,
     
445.           col: context.col,
     
446.           cellRect: cellRect,
     
447.           sheetArea: context.sheetArea,
     
448.           isReservedLocation: true,
     
449.           sheet: context.sheet
     
450.         };
     
451.       }
     
452.       return null;
     
453.     };
     
454. 
     
455.     MyCheckBoxCellType.prototype.processMouseUp = function (hitInfo) {
     
456. 
     
457.       var sheet = hitInfo.sheet,
     
458.         row = hitInfo.row,
     
459.         col = hitInfo.col,
     
460.         sheetArea = hitInfo.sheetArea;
     
461. 
     
462.       if (sheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.colHeader).locked() && sheet.options.isProtected) {
     
463.         return;
     
464.       }
     
465. 
     
466.       var tag = sheet.getTag(row, col, sheetArea);
     
467.       //var tag = sheet.getColumn(col,sheetArea).tag();
     
468.       if (tag === undefined || tag === null) { //first time
     
469.         sheet.setTag(row, col, true, sheetArea);
     
470.         //sheet.getColumn(col,sheetArea).tag(true)
     
471.       } else {
     
472.         sheet.setTag(row, col, !tag, sheetArea);
     
473.         //sheet.getColumn(col,sheetArea).tag(!tag)
     
474.       }
     
475.       //add your code here
     
476.       tag = sheet.getTag(row, col, sheetArea);
     
477.       //tag = sheet.getColumn(col,sheetArea).tag();
     
478.       // sheet.setValue(-1, 0, tag);
     
479.       sheet.suspendPaint();
     
480.       for (var i = 0; i < sheet.getRowCount(); i++) {
     
481.         var cell = sheet.getCell(i, col);
     
482.         if (cell.cellType() instanceof GC.Spread.Sheets.CellTypes.CheckBox) {
     
483.           cell.value(tag);
     
484.         }
     
485.       }
     
486.       sheet.resumePaint();
     
487.     };
     
488. 
     
489.     Array.prototype.clone = function () {
     
490.       let a = [];
     
491.       for (let i = 0, l = this.length; i < l; i++) {
     
492.         a.push(this[i]);
     
493.       }
     
494.       return a;
     
495.     };
     
496. 
     
497. 
     
498.   })
     
499. </script>
     

复制代码

您好，您把Checkbox都放到了列头区域，那么所有对checkbox的操作都应该针对列头区域执行操作，

我举例说一下，在你贴的代码的第282行，

1. var cellType = sheet.getCellType(row, col);

复制代码

根据API，应该还需要传一个参数，指明这里获取的celltype是拿的行头单元格类型，

https://demo.grapecity.com.cn/sp ... et~getCellType.html



这里可选值的API为：

https://demo.grapecity.com.cn/sp ... eets.SheetArea.html

录了个屏~~ 竟然不支持gift。。。

感谢回复，这个已经修正，现在的问题是勾选框点击事件没有被触发

您好，您注意一下这个Demo：

https://demo.grapecity.com.cn/Sp ... olumnHeaderCheckBox

实际上它触发的是这个自定义的processMouseUp事件，如图：

不知道是不是在表头的checkBox 要自定义的对象~~ 系统内置的对象不生效啊

我解释一下，列头的checkbox选框，包括corner位置的checkbox，都是自定义单元格实现的，

它们的逻辑都需要自己写到processMouseUp事件中，在事件中自己编写逻辑执行它们的操作，

你注意一下Demo的processMouseUp事件的逻辑：



实际上这里自己实现了一个当点击checkbox的行为逻辑。