データ・ディクショナリを使用しfsLayuiPlugin

アウトライン

主に処理し、データテーブルは、エスケープデータで埋めデータディクショナリドロップダウンボックスを解決するために、データ・ディクショナリには、いくつかの場所で使用することができます。
同じドロップダウンボックスを使用して、データの1.複数のページ、すべてのページを変更する場所を変更する必要がある
代わりに、手動での書き込みに逃げるの2.データテーブルを templet テンプレートを解析
データ・ディクショナリは、サポート構成に共通のアプローチを提供静态数据字典して动态数据字典,,アドレスデータ辞書ファイルをplugins/frame/js/fsDict.js。

あなた場合は使用を 数据字典 しなければならない layui.js データ辞書ファイルの後半で紹介します /plugins/frame/js/fsDict.js

<script type="text/javascript" src="/plugins/frame/js/fsDict.js?v=1.4.0"></script>

静的データ・ディクショナリ

静的データは、典型的には、例えば、変更されないデータのために使用される辞書：文書ステータス（アクティブ、非アクティブ、発行、監査）、ユーザのステータス（アクティブ、非アクティブ、ロックされました）

どのように使用するには：

ではlayui.fsDict、オブジェクト、データ辞書の定義。

たとえば、次のように街の静的データ・ディクショナリの定義

コンフィギュレーション城市データ辞書名：city、cityJSONオブジェクトであります
コンフィギュレーション数据字典属性

layui.fsDict = {
    //城市
    city : {
      formatType : "local", //local 静态数据字典
      labelField : "name", //展示数据的属性
      valueField : "code", //value对应的属性
      //静态数据，数组
      data:[{"code":"0","name":"北京","style":"color:#F00;"},
        {"code":"1","name":"上海"},
        {"code":"2","name":"广州"},
        {"code":"3","name":"深圳"},
        {"code":"4","name":"杭州"}
      ]
    }
  }

エスケープ参照データテーブルのデータディクショナリ

表列だけで、コンフィギュレーション・データ・ディクショナリ情報 dict="city"

<p field="city" title="城市" width="100" dict="city"/>

データ・テーブルには、さまざまなスタイルのエスケープを示し、

テーブルには、データに、異なるスタイルの異なる情報を表示する必要がある場合 data 、定義 style 、または css このように異なるデータを表示するために様々なスタイルすることができ

辞書の設定

結果の表示

ドロップダウンボックスの参照データディクショナリ

私たちは、選択中のCSSスタイルを設定する必要があります class="fsSelect" し、辞書を設定します dict="city"

<select name="city" lay-verify="required"  lay-verType="tips" class="fsSelect" dict="city" addNull="1">
</select>

動的データ・ディクショナリ

このように変更されますカスケード地方の種類として、より多くのシナリオを使用して、動的データ・ディクショナリ。
データリストをロードするためにサーバによって非同期要求。

どのように使用するには：

ではlayui.fsDict、オブジェクト、データ辞書の定義。

たとえば、次のように街の静的データ・ディクショナリの定義

コンフィギュレーション省份データ辞書名：city、cityJSONオブジェクトであります
コンフィギュレーション数据字典属性

layui.fsDict = {
    //省份
    area1 : {
      formatType : "server", //server 动态数据字典
      loadUrl : "/fsbus/1005", //异步加载数据的url地址
      inputs : "parentid:0", //异步请求携带的参数
      labelField : "name", //示数据的属性
      valueField : "id" //value对应的属性
    }
  }

エスケープ参照データテーブルのデータディクショナリ

表列だけで、コンフィギュレーション・データ・ディクショナリ情報 dict="area1"

<p field="area1" title="省份" width="100" dict="area1"/>

ドロップダウンボックスの参照データディクショナリ

私たちは、選択中のCSSスタイルを設定する必要があります class="fsSelect" し、辞書を設定します dict="area1"

<select name="area1" class="fsSelect" dict="area1" addNull="1">
</select>

静的および動的な辞書辞書差

静的および動的辞書辞書htmlの使用の間に違いはありません、主な違いは、ということであるfsDict.jsコンフィギュレーションデータを取得する方法は、同じではありません。

辞書設定手順

プロパティ	失うことになります	デフォルト値	名前	説明
formatType	それはあります		フォーマットする方法	`server`：動的辞書`local`：静的辞書
loadUrl	ノー		非同期ロードのURL	データのURLアドレスの非同期読み込み
入力	ノー		パラメータ	パラメータを運ぶ非同期リクエスト
labelFieldプロパティ	それはあります		表示属性データ	情報に対応するフィールドを表示します
valueField	それはあります		対応する属性値	対応するフィールド値の値
データ	ノー		静的データ配列	静的データ・ディクショナリを使用します
spaceMode	ノー	、	表示データの複数の区切り	逃げるときにデータテーブルは、データの区切りを複数使用しました

入力とパラメータの使用

あなたは固定パラメータ、直接使用している場合 属性:值 ：デモ parentid:0 、複数のパラメータをすることができた場合 , 、デモスプリット、： parentid:0,name:test
あなたは、現在選択された値を渡したい場合は、リンク・テーブルを、直接 属性: 、書き込み値、デモ現在選択されているデフォルトに直接アクセスする必要はありません。 parentid: 。
他のセレクタを渡す必要の値を設定することができれば 属性:#选择器id 、例えば： key:#area2222222
この記事では、最初に私のブログに登場：ITCTOの技術のブログ

アウトライン

静的データ・ディクショナリ

エスケープ参照データテーブルのデータディクショナリ

データ・テーブルには、さまざまなスタイルのエスケープを示し、

ドロップダウンボックスの参照データディクショナリ

動的データ・ディクショナリ

エスケープ参照データテーブルのデータディクショナリ

ドロップダウンボックスの参照データディクショナリ

静的および動的な辞書辞書差

辞書設定手順

おすすめ