集算表使用关系视图，绑定的单元格显示的是#N/A，如何解决

Derrick.Jiao

本帖最后由 Derrick.Jiao 于 2022-3-7 16:16 编辑

利用管网例子，集算表结合关系视图，初始加载的时候是这样的如下图所示： image.png265868834.png

等到随便更改任何一个单元格的值以后，就可以全部加载出来，如下图所示：
image.png209915465.png

代码如下：

/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
<template>
  <div class="sample-tutorial">
<gc-spread-sheets
   class="sample-spreadsheets"
   @workbookInitialized="initSpread"
>
</gc-spread-sheets>
<div id="options-container" class="options-container">
      <fieldset>
         <legend>Active Row Operations</legend>
         <div class="field-line">
            <input id="remove" type="button" value="Remove" @click="removeRow()">
         </div>
         <div class="field-line">
            <input id="save" type="button" value="Save" @click="saveRow()">
         </div>
         <div class="field-line">
            <input id="reset" type="button" value="Reset" @click="resetRow()">
         </div>
      </fieldset>
      <fieldset>
         <legend>Save All Rows</legend>
         <div class="field-line">
            <input id="save-all" type="button" value="Save All" @click="saveAllRows()">
         </div>
      </fieldset>
      <fieldset>
         <legend>Batch Operations</legend>
         <div class="field-line">
            <input type="button" value="Submit" id="submit" @click="submitChanges()">
         </div>
         <div class="field-line">
            <input type="button" value="Discard" id="discard" @click="discardChanges()">
         </div>
      </fieldset>
</div>
  </div>
</template>

<script>
import Vue from "vue";
import "@grapecity/spread-sheets-vue";
import GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-tablesheet";
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import "./styles.css";

var tableName = "Employee";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var batchApiUrl = baseApiUrl + "/" + tableName + 'Collection';
var tablesheetName = 'MyTableSheet';

let App = Vue.extend({
  name: "app",
  data: function() {
return {
      spread: null,
      tablesheet: null,
      selections: null
}
  },
  methods: {
initSpread: function (spread) {
      this.spread = spread;

      spread.suspendPaint();
      spread.clearSheets();
      spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
      //init a data manager
      var dataManager = spread.dataManager();
      var myTable = dataManager.addTable("myTable", {
         remote: {
            read: {
                  url: apiUrl
            },
            update: {
                  url: apiUrl,
                  method: 'PUT'
            },
            create: {
                  url: apiUrl
            },
            delete: {
                  url: apiUrl
            },
            batch: {
                  url: batchApiUrl
            }
         },
         batch: true
      });

      var customerTable = dataManager.addTable("customerTable", {
            remote: {
                  read: {
                     url: baseApiUrl + "/Product"
                  }
            }
         });
         //add relationship between order table and customer table
         dataManager.addRelationship(myTable, "Id", "customer", customerTable, "Id", "myTables");

      //init a table sheet
      var sheet = spread.addSheetTab(0, tablesheetName, GC.Spread.Sheets.SheetType.tableSheet);
      // sheet.setColumnVisible(2, false);
      this.tablesheet = sheet;
      var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
      var options = sheet.rowActionOptions();
      options.push(
         rowActions.removeRow,
         rowActions.saveRow,
         rowActions.resetRow,
      );
      sheet.rowActionOptions(options);

      var selectView = customerTable.addView("customersView",
            [
                  { value: 'Id' },
                  { value: 'ProductName' },
            ]);
         var multiSelectStyle = {
            formatter: '=CONCAT(PROPERTY(@, "Id"), ", ", PROPERTY(@, "ProductName"))', // convert the object to string
            cellButtons: [
                  {
                     imageType: "dropdown",
                     command: "openMultiColumn",
                     useButtonStyle: true,
                  }
            ],
            dropDowns: [
                  {
                     type: "multiColumn",
                     option: {
                        width: 400,
                        height: 400,
                        dataSource: selectView,
                        bindingInfos: [
                              { name: "Id", size: 60 },
                              { name: "ProductName", size: "*" },
                              // { name: "ContactName", size: "*" },
                        ]
                     }
                  }
            ]
         };

      //bind a view to the table sheet
      myTable.fetch().then(function() {
         var view = myTable.addView("myView", [
            { value: "Id", width: 50, caption: "ID" },
            { value: "FirstName", width: 100, caption: "First Name" },

               { value: "customer", width: 150, style: multiSelectStyle},
            { value: "LastName", width: 100, caption: "Last Name" },
            { value: "HomePhone", width: 100, caption: "Phone" },
            { value: "Notes", width: 100, caption: "Notes" }
         ]); //the View has all default columns of the Table
         sheet.setDataView(view);
      });

      spread.bind(GC.Spread.Sheets.Events.SelectionChanged, (e, args) => {
         this.selections = args.newSelections;
      });

      spread.resumePaint();
},

removeRow() {
      this.traverseSelectionsRowsWithOperation((row) => {
         this.tablesheet.removeRow(row);
      });
},

saveRow() {
      this.traverseSelectionsRowsWithOperation((row) => {
         this.tablesheet.saveRow(row);
      });
},

resetRow() {
      this.traverseSelectionsRowsWithOperation((row) => {
         this.tablesheet.resetRow(row);
      });
},

saveAllRows() {
      this.spread.commandManager().SaveAll.execute(this.spread, { sheetName: tablesheetName });
},

submitChanges() {
      this.tablesheet.submitChanges();
},

discardChanges() {
      this.tablesheet.cancelChanges();
},

traverseSelectionsRowsWithOperation(operation) {
      var selections = this.selections;
      if (selections) {
         for (var i = 0; i < selections.length; i++) {
            var selection = selections;
            var row = selection.row;
            var rowCount = selection.rowCount;
            for (var r = row + rowCount - 1; r >= row; r--) {
                  operation(r);
            }
         }
      }
}

  }
});

function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/SpreadJSTutorial\//)[0] + 'server/api';
}

new Vue({
  render: (h) => h(App),
}).$mount("#app");
</script>