HTMLの動的リスト作成時、文字型の項目を数字として並び変える方法

2024年3月23日テクニカルメモ

数字の項目を文字型として持っているけど、数値型の項目としてソートかけられないかな?

WebFOCUSバージョン
9.0.3

数字のデータが入っている文字型

データに数値が入っている文字型の項目がある場合、ソートをかけると文字列として並び替えが行われます。

本記事では、HTMLの動的リストで文字型の項目を数字順で並び替えを行う場合の方法をご紹介いたします。

完成イメージ

実装方法

数字のデータが入っている文字型の項目を数字順でソートをかけるには、一時項目を作成する必要があります。

本記事では、一時項目の作成方法、HTML上での設定方法をご紹介いたします。

シノニムの画面を起動

アプリケーションディレクトリから、任意のシノニムを選択し、データアシスト画面を開きます。

ここでは[test_num]というシノニムを選択

一時項目の作成

データを整数に変換する[TO_INTEGER]関数を使い、文字列の項目を整数に変換して、ソート用の項目を新たに作成していきます。

該当する文字型の項目を右クリックし、[関数の適用]を選択します。

ここで選択している「NUM_01」が文字型で数字を持っている項目です。

フォーマット変換から、[TO_INTEGER]関数を選択し、タイトルと名前を指定します。
この時、パラメータの[string]は、ソートをかけたい項目を選択してください。

ソート用項目が作成できました。
ここでは、文字型の項目を[NUM_01],新規に作成した数値型の項目を[NUM_02]としています。

動的リストの設定

App Studioで編集したいHTMLを開きます。

ドロップダウンリストを選択し、右端の[設定]を選択します

値フィールド:文字型の項目
表示フィールド:作成した一時項目

を選択します。
また、表示項目に対して、ソート順を選択します。

[プロパティ]-[テキスト]-[テキスト位置揃え]から、テキストの位置を変更することも可能です。

実行して結果を確認

実行して、結果を確認します。
一時項目で作成した項目でソートがかかり、数字が昇順に並んでいます。

HTMLの動的リストで、文字型の項目を数字としてソートして表示するには、一時項目を作成すればいいことが分かったね!