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

KevinChen

本帖最后由 koko 于 2019-8-5 15:44 编辑

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

源码

<style>
.common-table-list {
background-color: #fff;
padding: 0 0;
}
#shipment {
width: 100%;
height: 650px;
border: 1px solid #56b7e9;
}
</style>
<div class="layui-fluid nepadmin-pad0 nepadmin-mar0" id="VIEW-order-list-table" lay-title="$t('运单列表')"
v-auth="/order/list">
<div class="common-pad">
<ul class="common-tab-outer" id="menuOrderListContent">
</ul>
</div>
<div class="common-content-outer">
<div class="search-form">
<form class="layui-form layui-row layui-col-space10" id="formOrder" lay-filter="formOrderData">
<div class="layui-inline-select">
<select name="order_status" lay-search lay-filter="orderFormVal"></select>
</div>
<div class="layui-inline-time layui-inline-select">
<div class="layui-row">
<div class="layui-col-md5">
<select name="order_time" lay-filter="orderFormVal"></select>
</div>
<div class="layui-col-md7">
<input type="text" name="time" id="searchDateShipment" placeholder="$t('请选择时间范围')" autocomplete="off"
class="layui-input" readonly>
</div>
</div>
</div>
<div class="layui-inline-input">
<input type="text" name="keyword" class="layui-input jsKeyword" autocomplete="off"
placeholder="$t('请输入运单号/物流单号/买家/商品名称/商品SKU/商品SPU')">
</div>
<div class="layui-inline-btn">
<button class="layui-btn layui-btn-sm layui-btn-default" lay-submit lay-filter="searchOrder">
<i style="display: none"
class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
$t('查询')
</button>
</div>
<div class="layui-inline-btn">
<button class="layui-btn layui-btn-sm layui-btn-default" lay-submit lay-filter="payShipment">
<i style="display: none"
class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
$t('付款')
</button>
</div>
</form>
</div>
<div class="common-table-list">
<div id="shipment"></div>
</div>
</div>
</div>
<script>
layui.use(['admin', 'table', 'form', 'dropdown', 'jquery', 'laydate', 'i18n', 'laytpl', 'view'], function (admin, table, form, dropdown, $, laydate, i18n, laytpl, view) {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("shipment"), {
tabStripVisible: false, // 隐藏sheet栏
scrollbarMaxAlign: false, // 滚动条对齐表单最后一个数据
})
, sheet = spread.getActiveSheet()
, spreadNS = GC.Spread.Sheets
, oldJson = {}
, saveJson = {}
, template = {}
, templateMaxY = 2
, excelIo = new GC.Spread.Excel.IO();
// spread.options.allowUndo = true; // 允许撤销操作
var id = layui.router().search.id;
admin.get({
url: 'v1/supplier/' + id + '?expand=excel_template&fields=id',
success: function (res) {
init(res.data);
}
});
function getSelect() {
var spread = GC.Spread.Sheets.findControl("ss");
var sheet = spread.getActiveSheet();
// 获取选中行数据
var checkedRows = [];
for (var i = 0; i < sheet.getRowCount(); i++) {
var checkboxValue = sheet.getValue(i, 0);
if (checkboxValue) {
checkedRows.push(i);
}
}
for (var i = 0; i < checkedRows.length; i++) {
console.log(sheet.getValue(checkedRows[i], 1));
console.log(sheet.getValue(checkedRows[i], 2));
}
}
function init(data) {
if (!data.excel_template) {
form.val('excel-form', {
id: data.id
});
form.render();
return;
} else {
var field = data.excel_template.field || {}
, excel = data.excel_template.excel || {};
form.val('excel-form', {
...data.excel_template.field,
id: data.id
});
form.render();
}
if (excel) {
template = data.excel_template.bind;
templateMaxY = data.excel_template.maxy;
renderData(excel, parseInt(field.title_begin), parseInt(field.title_end));
}
}
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
form.on('submit(payShipment)', function (data) {
var data = [];
// 获取选中行数据
var checkedRows = [];
for (var i = 0; i < sheet.getRowCount(); i++) {
var checkboxValue = sheet.getValue(i, 0);
if (checkboxValue) {
checkedRows.push(i);
}
}
admin.modal.success('选中第' + checkedRows + '运单进行付款');
return false;
for (var i = 0; i < checkedRows.length; i++) {
console.log(sheet.getValue(checkedRows[i], 1));
console.log(sheet.getValue(checkedRows[i], 2));
}
return false;
});
function mockData() {
var data = []
, total = randomNum(10, 50);
for (var i = 0; i < total; i++) {
data.push({
CustomerName: 'CTC',
ShipmentType: 'Drop',
BU: 'XXX',
HAWBNo: 'SIN' + randomNum(1000000, 9999999),
PONo: 'EBE19116 ' + randomNum(1000000, 9999999),
Shipper: 'Life Technologies Holdings Pte Ltd ',
OriginSite: 'Singapore',
OriginAirport: 'SIN',
OriginCountry: 'SG',
DestAirport: 'PVG',
DestCity: 'Hefei',
DestCountry: 'cn',
DestinationCurrency: 'CNY',
FreightRate: Math.random() * 10,
PayStatus: Math.random() * 10 > 5 ? 'Yes' : 'No'
})
}
return data;
}
function renderData(excel, begin, end) {
spread.fromJSON(JSON.parse(excel), {
tabStripVisible: false, // 隐藏sheet栏
scrollbarMaxAlign: false, // 滚动条对齐表单最后一个数据
});
sheet = spread.getActiveSheet();
// sheet.options.isProtected = true;
// 停止渲染
sheet.suspendPaint();
// 隐藏表头
// sheet.options.rowHeaderVisible = false;
// sheet.options.colHeaderVisible = false;
// 新增表头
sheet.setColumnCount(2, spreadNS.SheetArea.rowHeader);
sheet.options.rowHeaderAutoTextIndex = 0;
sheet.options.rowHeaderAutoText = spreadNS.HeaderAutoText.blank;
// 冻结表头
sheet.frozenRowCount(end);
// sheet.frozenColumnCount(2);
// 合并勾选框付款状态
sheet.addSpan(0, 0, 2, 1, GC.Spread.Sheets.SheetArea.rowHeader);
sheet.addSpan(0, 1, 2, 1, GC.Spread.Sheets.SheetArea.rowHeader);
// 设置勾选框付款状态
var style = new GC.Spread.Sheets.Style();
style.backColor = '#56b7e9'
style.foreColor = 'white'
style.vAlign = GC.Spread.Sheets.VerticalAlign.center
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center
sheet.setStyle(-1, 0, style, GC.Spread.Sheets.SheetArea.rowHeader);
sheet.setStyle(-1, 1, style, GC.Spread.Sheets.SheetArea.rowHeader);
// 勾选框不锁定
// style.locked = false
sheet.setCellType(0, 0, new MyCheckBoxCellType(), GC.Spread.Sheets.SheetArea.rowHeader);
sheet.getCell(0, 1, GC.Spread.Sheets.SheetArea.rowHeader).width(150)
.text('Status').backColor('#56b7e9').foreColor('white')
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.hAlign(GC.Spread.Sheets.HorizontalAlign.center)
renderTemplate(begin, mockData())
}
function getTemplateData(index, data) {
if (!template[index]) {
return '';
}
var name = template[index].name;
if (!data[name]) {
return '';
}
return data[name];
}
function renderTemplate(end, data) {
// 根据数据数量生成新行
var length = data.length;
sheet.addRows(end + 1, length - 1);
// 循环生成勾选框
for (var i = 0; i < length; i++) {
var c = new GC.Spread.Sheets.CellTypes.CheckBox()
, x = i + parseInt(end)
, rowData = data[i] || {};
// c.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
sheet.setCellType(x, 0, c, GC.Spread.Sheets.SheetArea.rowHeader);
sheet.getCell(x, 1, GC.Spread.Sheets.SheetArea.rowHeader).text(rowData.PayStatus).foreColor(rowData.PayStatus == 'Yes' ? 'white' : 'red'); // 付款状态
// 单元格赋值
for (var y = 0; y < templateMaxY; y++) {
var cellData = getTemplateData(y, rowData);
if (cellData) {
sheet.setValue(x, y, cellData);
}
}
}
sheet.resumePaint();
// 绑定勾选框事件
spread.bind(GC.Spread.Sheets.Events.ButtonClicked,
function (e, args) {
alert(args);
var sheet = args.sheet,
row = args.row,
col = args.col;
var cellType = sheet.getCellType(row, col);
if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBox) {
var colHeaderCell = cellType = sheet.getCell(0, col, GC.Spread.Sheets.SheetArea.rowHeader);
if (colHeaderCell.cellType() instanceof MyCheckBoxCellType) {
var checkStatus = true;
for (var i = 0; i < sheet.getRowCount(); i++) {
var cell = sheet.getCell(i, col);
if (cell.cellType() instanceof GC.Spread.Sheets.CellTypes.CheckBox && !cell.value()) {
checkStatus = false;
break;
}
}
colHeaderCell.tag(checkStatus);
sheet.repaint();
}
}
});
}
var viewPage = $('#VIEW-order-list-table');
var tableFilter = 'order-list-table';
var routeStatus = admin.route.search.status;
var selectTpl = document.getElementById('select-tpl').innerHTML;
// 初始化
admin.get({
url: 'v1/basic?fields=order_status,warehouse,shop,order_time',
success: function (res) {
var data = res.data;
if (routeStatus) {
renderSelect(data.order_status, 'order_status');
form.val("formOrderData", {
"order_status": routeStatus
})
form.render();
} else {
renderSelect(data.order_status, 'order_status');
}
renderSelect(data.order_time, 'order_time');
form.render();
}
});
// 渲染通用下拉框
function renderSelect(data, name) {
var container = $('select[name=' + name + ']');
laytpl(selectTpl).render(data, function (html) {
if (name == 'order_status') {
html = '<option value="">' + i18n.t('全部状态') + '</option>' + html;
}
if (name == 'order_time') {
html = '<option value="">' + i18n.t('全部时间') + '</option>' + html;
}
container.html(html);
});
}
// 搜索
var arrForm = []; // 取出表单的value值
var objField = {}; // 存储表单的value值，方便提交
// select搜索
form.on('select(orderFormVal)', function (data) {
arrForm = $('#formOrder').serializeArray();
for (var i in arrForm) {
objField.order_status = arrForm[0].value
objField.warehouse_id = arrForm[1].value
objField.shop_id = arrForm[2].value
objField.order_time = arrForm[3].value
objField.time = arrForm[4].value
objField.keyword = arrForm[5].value
}
reloadTable(objField)
});
// 时间搜索
laydate.render({
elem: '#searchDateShipment',
range: '~',
done: function (value, date, endDate) {
arrForm = $('#formOrder').serializeArray();
for (var i in arrForm) {
objField.order_status = arrForm[0].value
objField.warehouse_id = arrForm[1].value
objField.shop_id = arrForm[2].value
objField.order_time = arrForm[3].value
objField.time = value
objField.keyword = arrForm[5].value
}
reloadTable(objField)
}
});
// 下载ssjson文件方法
var funDownload = function (content, filename) {
var eleLink = document.createElement('a');
eleLink.download = filename;
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
};
// 点击按钮，导出当前页面的ssjson文件。
$("#saveSsjson").click(function () {
var testJson = JSON.stringify(spread.toJSON());
funDownload(testJson, "test.ssjson");
});
// 导出事件
$("#saveExcel").click(function () {
var fileName = $("#exportFileName").val();
var password = $("#password").val();
if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx';
}
// 导出到excel中，包括绑定的数据
var json = spread.toJSON({
includeBindingSource: true
});
// here is excel IO API
excelIo.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
// process error
console.log(e);
}, {password: password});
});
function MyCheckBoxCellType() {
GC.Spread.Sheets.CellTypes.CheckBox.apply(this);
this.caption("All");
}
MyCheckBoxCellType.prototype = new GC.Spread.Sheets.CellTypes.CheckBox();
var basePaint = GC.Spread.Sheets.CellTypes.CheckBox.prototype.paint;
MyCheckBoxCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
//var tag = context.sheet.getColumn(context.col,context.sheetArea).tag();
var tag = context.sheet.getTag(context.row, context.col, context.sheetArea);
if (tag !== true) {
tag = false;
}
basePaint.apply(this, [ctx, tag, x, y, width, height, style, context]);
};
MyCheckBoxCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
if (context) {
return {
x: x,
y: y,
row: context.row,
col: context.col,
cellRect: cellRect,
sheetArea: context.sheetArea,
isReservedLocation: true,
sheet: context.sheet
};
}
return null;
};
MyCheckBoxCellType.prototype.processMouseUp = function (hitInfo) {
var sheet = hitInfo.sheet,
row = hitInfo.row,
col = hitInfo.col,
sheetArea = hitInfo.sheetArea;
if (sheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.colHeader).locked() && sheet.options.isProtected) {
return;
}
var tag = sheet.getTag(row, col, sheetArea);
//var tag = sheet.getColumn(col,sheetArea).tag();
if (tag === undefined || tag === null) { //first time
sheet.setTag(row, col, true, sheetArea);
//sheet.getColumn(col,sheetArea).tag(true)
} else {
sheet.setTag(row, col, !tag, sheetArea);
//sheet.getColumn(col,sheetArea).tag(!tag)
}
//add your code here
tag = sheet.getTag(row, col, sheetArea);
//tag = sheet.getColumn(col,sheetArea).tag();
// sheet.setValue(-1, 0, tag);
sheet.suspendPaint();
for (var i = 0; i < sheet.getRowCount(); i++) {
var cell = sheet.getCell(i, col);
if (cell.cellType() instanceof GC.Spread.Sheets.CellTypes.CheckBox) {
cell.value(tag);
}
}
sheet.resumePaint();
};
Array.prototype.clone = function () {
let a = [];
for (let i = 0, l = this.length; i < l; i++) {
a.push(this[i]);
}
return a;
};
})
</script>

复制代码

KevinChen · KevinChen

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

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

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

复制代码

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

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

image.png827487182.png

这里可选值的API为：

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

koko · koko

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

koko · koko

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

KevinChen · KevinChen

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

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

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

image.png897156982.png

koko · koko

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

KevinChen · KevinChen

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

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

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

image.png508051452.png

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

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

[已处理] 自定义表头勾选框，勾选事件不会触发

最佳答案

6 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章