[FormBridge] 动态更改下拉选项

介绍

我们将向您展示如何从 kintone 检索和生成 FormBridge 下拉选项。此外,包括一个规范,根据所选值缩小较低层次结构中选项的值。FormBridge 也可以设置为通过选择的值来缩小范围,但是由于管理麻烦,我们采用了一种方法,将选择的数据保留在 kintone 中。

像这样的图像

代码
'use strict';

// kViewerのURLを記載
const kvOrganizationData = 'https://~~';

// kViewerから取得したデータを入れる配列
let organizationData = [];

(function () {
  /**
  * フォーム画面遷移時
  */
  fb.events.form.mounted = [async function (state) {
    // 非同期処理にてkViewerからデータを取得する
    await getOrganizationDataData();

    initDropdown('department');

    return state;
  }]

  /**
  * 部を変更時に課プルダウンを生成
  */
  fb.events.fields['department'].changed = [function () {
    // データの整合性を取るために値を空にする
    record['section'].value = '';
    record['group'].value = '';

    initDropdown('section');
  }];

  /**
  * 課を変更時にグループプルダウンを生成
  */
  fb.events.fields['section'].changed = [function (state) {
    // データの整合性を取るために値を空にする
    record['group'].value = '';

    initDropdown('group');
  }];

  /**
  * ドロップダウンの選択肢を生成
  * 部プルダウン:全ての部の値を表示
  * 課プルダウン:部が一致する課の値を表示
  * グループプルダウン:部と課が一致するグループの値を表示
  */
  function initDropdown(fieldCode) {
    let options = fields.find(({ code }) => code === fieldCode).options;
    let optionData = [];
    const isDepartment = fieldCode === 'department';
    const isSection = fieldCode === 'section';
    const isGroup = fieldCode === 'group';

    for (let data of yearOfAffiliationData) {
      const isMatchedDepartment = data['department'].value === record['department'].value;
      const isMatchedSection = data['section'].value === record['section'].value;
      const isAvailableOption =
          isDepartment
            || (isSection && isMatchedDepartment)
            || (isGroup && isMatchedDepartment && isMatchedSection);

      if (isAvailableOption) {
        // 条件に一致するデータを追加
        optionData.push(data[fieldCode].value);
      }
    }

    // 重複しているデータを削除
    optionData = new Set(optionData);

    // 重複しないよう、ドロップダウンのデータを初期化
    options.length = 0;

    for (let option of optionData) {
      // ドロップダウンの項目を設定
      options.push(option);
    }
  }

  /**
  * 組織情報を取得
  */
  async function getOrganizationDataData() {
    const kvOrganizationUrl = generateUrl(kvOrganizationData);

    await $j.ajax({
      url: kvOrganizationUrl
    }).done((data) => {
      organizationData = data.records;
    });
  }

})();
评论

函数 initDropdown(fieldCode) { } 部分

fields.find(({ code }) => code === fieldCode).options;

通过将FormBridge中设置的域代码设置为fieldCode,就可以得到选项的值。我们将通过重写这个获取的值来设置选项的值。很难找到这个

const isAvailableOption =
    isDepartment
        || (isSection && isMatchedDepartment)
        || (isGroup && isMatchedDepartment && isMatchedSection);

设置条件。

isDepartment更换零件时 isSection && isMatchedDepartment如果部门变更,部门数据相同isGroup && isMatchedDepartment && isMatchedSection如果部门发生变化,且部门和科室数据一致

// 重複しているデータを削除
optionData = new Set(optionData);

如果存在同名部门,使用设置消除重复数据。

// 重複しないよう、ドロップダウンのデータを初期化
options.length = 0;

FormBridge 使用此方法删除数据。

异步函数 getOrganizationDataData() { } 部分

const kvOrganizationUrl = generateUrl(kvOrganizationData);

从下面的 URL 加载 generateUrl.js。设置为使用generateUrl()。

最后

我很难实现它,所以我希望你能帮助

原创声明:本文系作者授权爱码网发表,未经许可,不得转载;

原文地址:https://www.likecs.com/show-308623515.html

198人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册