[FormBridge] 动态更改下拉选项
时间:2022-12-27阅读:198来源:柠檬博客作者:柠檬博客
介绍
我们将向您展示如何从 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条评论
登录后显示评论回复