Lauiui に基づいて Infinity Selector を実装する方法 (コード付き)

この記事の内容は、layui に基づいた Infinity Selector の実装方法 (コード付き) です。必要な方は参考にしていただければ幸いです。

html要素

<div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
        <input type="text" id="a" class="layui-input" readonly="readonly">
    </div>
</div>

jsリファレンス

layui.use(['form',"jquery","cascader"], function(){
    var $ = layui.jquery;
    var cascader = layui.cascader;
    
    var data = [
        {
            value: 'A',
            label: 'a',
            children: [
                {
                    value: 'AA1',
                    label: 'aa1',
                },
                {
                    value: 'BB1',
                    label: 'bb1'
                }
            ]
        },
        {
            value: 'B',
            label: 'b',
        }
    ]
    cascader({
        elem: "#a",
        data: data,
        // url: "/aa",
        // type: "post",
        // triggerType: "change",
        // showLastLevels: true,
        // where: {
        //     a: "aaa"
        // },
        value: ["A", "AA1"],
        success: function (data) {
            console.log(data);
        }
    });
});

cascaderパラメータの説明

1. elem: 入力コンテナ
2. data: 必須の静的データ、型は配列、
3. url: 非同期で取得されたデータ、型は配列、 2 つのパラメータのいずれかを選択します (データと URL)
4. タイプ: 非同期取得メソッド、省略可能
5. パラメータで非同期に渡されます、省略可能
6. トリガー メソッド、Fill in または他のものはすべてクリック、オプションのパラメータ「変更」、つまりマウスを移動してトリガーします
7. showLastLevels: 入力ボックスに最後のレベルのみを表示するかどうか、デフォルトは false、つまりすべてが表示されます
8 . value: 渡される初期値、type は配列、値は data
9 の値です。 成功: コールバック関数、選択が完了した後のコールバック関数、戻り値は value 配列です

デモ
github ソース コード

関連する推奨事項:

Lauiui のプロジェクト最適化と非侵襲的最適化の詳細な分析

Lauiui フォームの動的レンダリングと vue.js (コード付き) の間の競合解決

以上がLauiui に基づいて Infinity Selector を実装する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。