背景・実現したいこと
Kviewerのテーブルの列を特定の項目と連動して表示列を変更したい
利用したソースコード
フォームブリッジは下記のソースで対応できましたが、Kviewerについては情報がなかなか見つからず、教えていただけますと助かります
open_TableCol_by_op(state: any,tableFieldCode: string, colFieldCode: string, isDisplay: boolean): void {
consttargetTableDef1 = getFieldsDefinfo(state, tableFieldCode);
consttargetColDef1 = getFieldsDefinfo(targetTableDef1, colFieldCode);
targetColDef1.hide = ! isDisplay;
};
」
kviewerですと、下記のコードで実現できたのですがDOMのネスト構造に深く依存してしまうためなにかいい方法がありましたら押していただけますと助かります。
kviewerのコード
open_TableCol_by_op(state: any, tableFieldCode: string, colFieldCode: string, isDisplay: boolean): void {
// @ts-ignore
const targetTableEl1 = kv.detail.getElementByCode(tableFieldCode);
let targetHeaderColEl1: HTMLElement;
let targetHeaderColIndex: number;
targetTableEl1.children[0].children[1].children[0].children[0].children.forEach((f: any, colIndex: number) => {
if (f.children[0].innerText === colFieldCode) { // headerに表示しているcolのFieldCodeとラベルが同じ前提で、対象カラムを探す
targetHeaderColEl1 = f;
targetHeaderColIndex = colIndex;
}
});
// @ts-ignore
if (targetHeaderColEl1) {
if (!isDisplay) {
targetHeaderColEl1.style.display = ‘none’; // header行のCOLを非表示
// @ts-ignore
// const targetBodyColRowsEl2 = kv.detail.getTableElementsByCode(tableFieldCode, colFieldCode);
// if (targetBodyColRowsEl2) { // subTableのrowが在る場合
if (targetTableEl1.children[0].children[1].children[1].childElementCount > 0) {
// targetBodyColRowsEl2.forEach((r: any) => { // bodyの各行について
targetTableEl1.children[0].children[1].children[1].children.forEach((r: HTMLElement) => {
// r.style.display = ‘none’; // 所定のtdカラムを非表示
// @ts-ignore
r.children[targetHeaderColIndex].style.display = ‘none’; // 所定のtdカラムを非表示
});
}
}
} else {
// @ts-ignore
console.error(“At open_TableCol_by_op: field not find: table=” + tableFieldCode, targetHeaderColEl1)
}
}