请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Ellia.Duan SpreadJS 开发认证
超级版主   /  发表于:2024-10-29 15:44  /   查看:70  /  回复:0
本帖最后由 Ellia.Duan 于 2024-10-29 15:45 编辑

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

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


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

一、设置数据源
  1.         var dataManager = spread.dataManager();
  2.         var tables = {};
  3.         tables.student = dataManager.addTable("student", {
  4.             batch: true,
  5.             remote: {
  6.                 read: function () {
  7.                     let data = [
  8.                         {id: 1, name: "张三", age: 4, sex: '男', classId: 1},
  9.                         {id: 2, name: "李四", age: 8, sex: '女', classId: 1},
  10.                         {id: 3, name: "小王", age: 7, sex: '男', classId: 1},
  11.                         {id: 4, name: "小韩", age: 8, sex: '女', classId: 2},
  12.                         {id: 5, name: "小明", age: 7, sex: '男', classId: 2},
  13.                     ]
  14.                     return Promise.resolve(data);
  15.                 },
  16.                 batch: function (changes) {
  17.                     console.log('student changes', changes)
  18.                     return Promise.resolve(changes.map(item => ({succeed: true})));

  19.                 }
  20.             }

  21.         });
  22.         tables.class = dataManager.addTable("class", {
  23.             batch: true,
  24.             remote: {
  25.                 read: function () {
  26.                     let data = [
  27.                         {id: 1, name: '一年级1班'},
  28.                         {id: 2, name: '一年级2班'},
  29.                         {id: 3, name: '二年级1班'},
  30.                     ]
  31.                     return Promise.resolve(data);
  32.                 },
  33.                 batch: function (changes) {
  34.                     console.log('class changes', changes)
  35.                     return Promise.resolve(changes.map(item => ({succeed: true})));
  36.                 }
  37.             }
  38.         });
复制代码
通过以上代码,设置了student表以及class表。
二、设置报表
  1.         const reportSheet = spread.addSheetTab(0, '报表1', GC.Spread.Sheets.SheetType.reportSheet);
  2.         const templateSheet = reportSheet.getTemplate();
  3.         const columns = ['id', 'name', 'age', 'sex'];
  4.         columns.forEach((columnName, i) => {

  5.             let obj = {
  6.                 type: "List",
  7.                 binding: `student[${columnName}]`,
  8.                 autoFit: 'Column', //自适应列宽
  9.             }
  10.             if (i == 0) {
  11.                 obj['filter'] = {
  12.                     "condition": {
  13.                         "column": "classId",
  14.                         "operator": "Equal",
  15.                         "dataColumn": {
  16.                             "tableName": "class",
  17.                             "columnName": "id"
  18.                         }
  19.                     }
  20.                 }
  21.             }
  22.             templateSheet.setValue(0, i, columnName);
  23.             templateSheet.setTemplateCell(1, i, obj)
  24.         })
  25.         templateSheet.setTemplateCell(1, 4, {type: "List", binding: `class[id]`,})
  26.         templateSheet.setTemplateCell(1, 5, {type: "List", binding: `class[name]`,})
  27.         templateSheet.setValue(0, 5,'班级')
  28.         templateSheet.getRange(0, 0, 2, 6).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
  29.         templateSheet.getRange(0, 0, 2, 6).borderLeft(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
  30.         templateSheet.getRange(0, 0, 2, 6).borderRight(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
  31.         templateSheet.getRange(0, 0, 2, 6).borderTop(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
  32.         templateSheet.getRange(0, 0, 2, 6).borderBottom(new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin));
  33.         templateSheet.getRange(0, 0, 1, 6).backColor('pink');
  34.         templateSheet.setColumnVisible(4,false)
复制代码
在上述代码中,首先创建了一个reportSheet  ,然后设置字段信息。需要注意的是,可以通过Filter进行多表联合查询,
可以查看Filter用法:https://demo.grapecity.com.cn/sp ... ng/filter-condition
image.png969817810.png

在设置Filter之后,我们设置了样式 ,以及隐藏了class id列。
三、设置数据填报
在上文的需求描述中,提到了,仅仅是想对student表进行数据填报,那么我们仅仅添加student表即可,如下代码:
  1.       // 设置数据填报
  2.         const salesRule = {
  3.             name: "test1",
  4.             tableName: "student",      // table名称
  5.             fields: [
  6.                 {formula: 'A2', dbColumnName: 'id', isPrimary: true},
  7.                 {formula: 'B2', dbColumnName: 'name'},
  8.                 {formula: 'C2', dbColumnName: 'age'},
  9.                 {formula: 'D2', dbColumnName: 'sex'}
  10.             ],
  11.             skipRecordWithEmptyValue: false,
  12.             includeUnmodified: false
  13.         }
  14.         templateSheet.setDataEntrySetting([salesRule]);

复制代码


四、设置权限
  1. templateSheet.getCell(-1,-1).locked(false)
  2.         templateSheet.getCell(1,5).locked(true)
  3.         templateSheet.protect()
复制代码
通过上述三行代码,实现了班级信息字段不可以编辑的功能
五、动态设置菜单
  1.        var config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
  2.         let oldCommand = GC.Spread.Sheets.Designer.getCommand("reportSheetAddRecord");
  3.         let oldCommand2 = GC.Spread.Sheets.Designer.getCommand("reportSheetDeleteRecord");
  4.         oldCommand.visibleContext += " && controlByMyself"
  5.         oldCommand2.visibleContext += " && controlByMyself"
  6.         config.commandMap = {
  7.             'reportSheetAddRecord': oldCommand,
  8.             'reportSheetDeleteRecord': oldCommand2
  9.         }
  10.         var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
  11.         var spread = designer.getWorkbook();


  12.         var oldOpenMenu = spread.contextMenu.onOpenMenu;
  13.         spread.contextMenu.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
  14.             let sheet = spread.getActiveSheetTab()
  15.             let templateSheet = sheet.getTemplate()
  16.             const row = sheet.getSheet().getActiveRowIndex(), col = sheet.getSheet().getActiveColumnIndex()
  17.             const designTemplateCell1 = sheet.getTemplateCell(row, col)
  18.             let field = designTemplateCell1.binding;
  19.             if (field.indexOf('[')) {
  20.                 field = field.substring(0, field.indexOf('['))
  21.             }
  22.             const dataEntrySetting = templateSheet.getDataEntrySetting();
  23.             var result = dataEntrySetting.find((v) => {
  24.                 return v.tableName === field;
  25.             });
  26.             if (result) {
  27.                 designer.setData("controlByMyself", true)
  28.             } else {
  29.                 designer.setData("controlByMyself", false)
  30.             }
  31.             oldOpenMenu.apply(this, arguments);
  32.         };
复制代码



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

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部