layui・テーブルのカラム選択

　　layuiテーブルに基づいて展開して表に記載されている：検索可能なドロップダウンリストを表示するには、セルをクリックします。

　　クラウドコードアドレスします。https：//gitee.com/kkk12/layui-table-select

I.はじめに

　　このプロジェクトは、何のドロップダウンリスト（選択）機能の問題layuiテーブルのテーブルセル（列）クリックイベントを解決しないように設計されています。
。AJAXリクエストを非同期バックグラウンドデータ。
B。リファレンス配列に直接送信されてもよい
C。以外は、キーワード検索用データのドロップダウンを入力します

第二に、使用

1.使用

　　ダウンロードは、プロジェクトの内部には、フォルダ全体をテーブル選択/定義し、ロードされたモジュールの使用を使用します。

layui.config（{
    ベース：「を定義/」
}）。{（伸びます
    layuiTableColumnSelect： '/テーブル選択/ JS /定義layui・テーブル選択' 
}）使用（[ 'layuiTableColumnSelect']、関数（）{
     VAR layuiTableColumnSelect = layui.layuiTableColumnSelect。
    
}）;

ドロップダウンリストlayuiテーブルセルをレンダリング2

</ TABLE> <テーブルクラス= "layui非表示" ID = "TABLEIDは" = "tableEvent" フィルタレイ>を
<スクリプト>
layui.use（[ 'テーブル'、 'layuiTableColumnSelect']、関数（）{
    VARテーブルはlayui.table =。
    layuiTableColumnSelect = layui.layuiTableColumnSelectました。
    、データ= [];
    data.push（{ID：1、名称： '张三1'、年齢：23、状態：1}）;
    data.push（{ID：2、名称： '张三2'、年齢：23、状態：1}）;
    data.push（{ID：3、名称： '张三3'、年齢：23、状態：1}）;
    data.push（{ID：3、名称： '张三4'、年齢：23、状態：0}）。
    data.push（{ID：4、名称： '张三5'、年齢：23、状態：0}）。
    data.push（{ID：6、名称： '张三6'、年齢：23、状態：0}）。
    table.render（{
        要素： '#table'
        、やった'
        、日付：
        、高さ：「フル90」
        ページ：真
        、COLS：[[
            {タイプ： 'チェックボックス'}
            、{フィールド： '名前'、イベント： 'addSelect'、タイトル： '名称'、幅：150}
            、{フィールド： '年齢'、タイトル： '年龄'、幅：305}
            、{フィールド： '状態'、タイトル： '故障状態'、幅：90、イベント： 'addState'、テンプレット：機能（D）{
                    IF（d.state == 0）{
                        「異常」を返します。
                    }そうであれば（d.state == 1）{
                        「通常」を返します。
                    }他{
                        「異常」を返します。
                    }
                }}
        ]]
    }）;
    VAR selectParams = [];
    selectParams.push（{名： '1'、値 '测试1'}）。
    selectParams.push（{名： '2'、値 '测试2'}）。
    selectParams.push（{名： '3'、値 '测试3'}）。
    selectParams.push（{名：4 ''、値 '测试4'}）。
    selectParams.push（{名前：5 ''、値 '测试5'}）。
    layuiTableColumnSelect.addSelect（{データ：selectParams、layFilter 'tableEvent' イベント 'addSelect'}）。
    layuiTableColumnSelect.addSelect（{URL： 'selectData.json'、：{}、layFilter 'tableEvent' イベント 'addState'}）。
}）;
</ SCRIPT>

　　注：
urlパラメータは、フィールドの背景AJAXリクエストパラメータがある場合は、データもデータを渡し、転送データに使用されるURLデータ転送を使用することができます。

データフォーマット

　　データフィールドの名前と値のデータ形式。
パラメータの配列の形式を渡すとき。

[
    名前{： 1、値"試験1" }、
    名前{： 2、値"試験2" }、
    名前{： 3、値"テスト3" }、
    名前{： 4、値"テスト4" }、
    名前{： 5、値"試験5" }
]

背景AJAXリクエストのフォーマット：

{
    データ：[
        {名：1、値 "試験1"}、
        {名：2、値 "試験2"}、
        {名：3、値 "テスト3"}、
        {名：4、値 "テスト4"}、
        {名前：5、値 "試験5"}
    ]
}

3.パラメータ説明

図4.効果

AJAX要求の背景：

パラメータ渡しの配列：

あなたは、キーワード検索]ドロップダウンボックスのデータを入力することができます。

layuiテーブル列選択（layuiテーブル検索可能なデータドロップダウンボックスを選択）