报表插件（ReportSheet）实现右键菜单的显示与隐藏

收藏

本帖最后由 Ellia.Duan 于 2024-10-29 15:45 编辑

ReportSheet可以实现多表联合查询，比如说我的报表一条记录既有学生信息，又有班级信息。如下图所示：
image.png359346007.png

但是在预览界面，仅仅是想要修改学生信息，不允许修改班级信息。我们可以用之前的文章ReportSheet实现权限控制来实现禁止编辑班级信息。
以及，如果想实现点击班级信息时，不希望出现“添加记录”“删除记录”等菜单的需求该如何实现呢。如下图所示：
image.png72569884.png

下文将详细介绍实现方案。

一、设置数据源

var dataManager = spread.dataManager();
var tables = {};
tables.student = dataManager.addTable("student", {
batch: true,
remote: {
read: function () {
let data = [
{id: 1, name: "张三", age: 4, sex: '男', classId: 1},
{id: 2, name: "李四", age: 8, sex: '女', classId: 1},
{id: 3, name: "小王", age: 7, sex: '男', classId: 1},
{id: 4, name: "小韩", age: 8, sex: '女', classId: 2},
{id: 5, name: "小明", age: 7, sex: '男', classId: 2},
]
return Promise.resolve(data);
},
batch: function (changes) {
console.log('student changes', changes)
return Promise.resolve(changes.map(item => ({succeed: true})));
}
}
});
tables.class = dataManager.addTable("class", {
batch: true,
remote: {
read: function () {
let data = [
{id: 1, name: '一年级1班'},
{id: 2, name: '一年级2班'},
{id: 3, name: '二年级1班'},
]
return Promise.resolve(data);
},
batch: function (changes) {
console.log('class changes', changes)
return Promise.resolve(changes.map(item => ({succeed: true})));
}
}
});

复制代码

通过以上代码，设置了student表以及class表。
二、设置报表

const reportSheet = spread.addSheetTab(0, '报表1', GC.Spread.Sheets.SheetType.reportSheet);
const templateSheet = reportSheet.getTemplate();
const columns = ['id', 'name', 'age', 'sex'];
columns.forEach((columnName, i) => {
let obj = {
type: "List",
binding: `student[${columnName}]`,
autoFit: 'Column', //自适应列宽
}
if (i == 0) {
obj['filter'] = {
"condition": {
"column": "classId",
"operator": "Equal",
"dataColumn": {
"tableName": "class",
"columnName": "id"
}
}
}
}
templateSheet.setValue(0, i, columnName);
templateSheet.setTemplateCell(1, i, obj)
})
templateSheet.setTemplateCell(1, 4, {type: "List", binding: `class[id]`,})
templateSheet.setTemplateCell(1, 5, {type: "List", binding: `class[name]`,})
templateSheet.setValue(0, 5,'班级')
templateSheet.getRange(0, 0, 2, 6).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
templateSheet.getRange(0, 0, 2, 6).borderLeft(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
templateSheet.getRange(0, 0, 2, 6).borderRight(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
templateSheet.getRange(0, 0, 2, 6).borderTop(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
templateSheet.getRange(0, 0, 2, 6).borderBottom(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
templateSheet.getRange(0, 0, 1, 6).backColor('pink');
templateSheet.setColumnVisible(4,false)

复制代码

在上述代码中，首先创建了一个reportSheet ，然后设置字段信息。需要注意的是，可以通过Filter进行多表联合查询，
可以查看Filter用法：https://demo.grapecity.com.cn/sp ... ng/filter-condition
image.png969817810.png

在设置Filter之后，我们设置了样式，以及隐藏了class id列。
三、设置数据填报
在上文的需求描述中，提到了，仅仅是想对student表进行数据填报，那么我们仅仅添加student表即可，如下代码：

// 设置数据填报
const salesRule = {
name: "test1",
tableName: "student", // table名称
fields: [
{formula: 'A2', dbColumnName: 'id', isPrimary: true},
{formula: 'B2', dbColumnName: 'name'},
{formula: 'C2', dbColumnName: 'age'},
{formula: 'D2', dbColumnName: 'sex'}
],
skipRecordWithEmptyValue: false,
includeUnmodified: false
}
templateSheet.setDataEntrySetting([salesRule]);

复制代码

四、设置权限

templateSheet.getCell(-1,-1).locked(false)
templateSheet.getCell(1,5).locked(true)
templateSheet.protect()

复制代码

通过上述三行代码，实现了班级信息字段不可以编辑的功能
五、动态设置菜单

var config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
let oldCommand = GC.Spread.Sheets.Designer.getCommand("reportSheetAddRecord");
let oldCommand2 = GC.Spread.Sheets.Designer.getCommand("reportSheetDeleteRecord");
oldCommand.visibleContext += " && controlByMyself"
oldCommand2.visibleContext += " && controlByMyself"
config.commandMap = {
'reportSheetAddRecord': oldCommand,
'reportSheetDeleteRecord': oldCommand2
}
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
var spread = designer.getWorkbook();
var oldOpenMenu = spread.contextMenu.onOpenMenu;
spread.contextMenu.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
let sheet = spread.getActiveSheetTab()
let templateSheet = sheet.getTemplate()
const row = sheet.getSheet().getActiveRowIndex(), col = sheet.getSheet().getActiveColumnIndex()
const designTemplateCell1 = sheet.getTemplateCell(row, col)
let field = designTemplateCell1.binding;
if (field.indexOf('[')) {
field = field.substring(0, field.indexOf('['))
}
const dataEntrySetting = templateSheet.getDataEntrySetting();
var result = dataEntrySetting.find((v) => {
return v.tableName === field;
});
if (result) {
designer.setData("controlByMyself", true)
} else {
designer.setData("controlByMyself", false)
}
oldOpenMenu.apply(this, arguments);
};

复制代码

demo:

动态控制右键菜单.html (8.74 KB, 下载次数: 5)

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

报表插件（ReportSheet）实现右键菜单的显示与隐藏

0 个回复

SpreadJS 认证

SpreadJS 高级认证