Lauiui フレームワークで一般的に使用される入力ボックスの紹介

#1. 通常の入力ボックス input

<div class="layui-form-item">
    <label class="layui-form-label"><span class="f_orange">*</span>字段编号</label>
    <div class="layui-input-block width_250 pos-r">
        <input type="text" class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="" autocomplete="off">
        <i class="icon_ca_layui"></i>
    </div>
</div>

2. オートコンプリート入力ボックス

1.layui に autoComplete プラグインが導入されていることを確認してください。

2. 初期化コードがlayui.useのコールバック関数で実行されていることを確認します。

3.baseUtility.js を導入します。

HTML

@* 备案网点 *@
<div class="layui-input-block" style="margin-top:5px; margin-left:320px;">
    <label class="layui-form-label">备案网点</label>
    <div class="layui-input-inline">
        <input type="text" id="txtRegisterCompanyId_searchForm" lay-verify="required" style="width:200px;"
               placeholder="请输入" data-provide="typeahead" class="layui-input" autocomplete="off">
        <input type="hidden" name="RegisterCompanyId" id="hiddenRegisterCompanyId_searchForm" />
    </div>
</div>

js データソースの初期化

は、layui.use のコールバック関数で定義する必要があります。

// 备案网点
siteUtility.GetAllSiteByKey("#txtRegisterCompanyId_searchForm", "#hiddenRegisterCompanyId_searchForm");

1 つは入力ボックスの ID で、もう 1 つは隠しフィールドの ID です。

GetAllSiteByKey パブリック関数は、baseUtility.js で定義されています。

値の取得

// 收集 查询表单数据
var serializeForm = $("#searchForm").formSerialize(true);

このシリアル化メソッドは、隠しフィールドの ID 値を取得できます。

実装方法(参考)

/*
  获取全部的网点
  @param txtElementId 输入框Id
  @param hiddenElementId 与输入框匹配的隐藏域Id
 */
GetAllSiteByKey: function (txtElementId, hiddenElementId) {
    $(txtElementId).typeahead({
        minLength: 0,
        //items: 'all',
        source: function (query, process) {
            var xdata = [];
            console.group('查询条件 = ' + query);

            $.ajax({
                type: "GET",
                url: urlEnum.GetAllSiteByKey,
                async: false,
                data: { "q": query },
                success: function (result) {
                    console.info('GetAllSiteByKey result');
                    console.info(result);

                    if (result != null && result != undefined) {
                        $.each(result.list, function (i, item) {
                            xdata.push({
                                id: item.value,
                                name: item.key,
                                obj: item
                            });
                        }); // end each
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // layer.msg("数据加载失败", { icon: 1 });
                },
                timeout: 5000
            });

            console.info('Auto 返回值：');
            console.info(xdata);

            // 如果 Auto 控件被用户置空则同时将隐藏域也置空
            if ($(txtElementId).val() == "") {
                $(hiddenElementId).val("");
            }

            console.groupEnd();
            return process(xdata);
        },
        updater: function (item) {
            console.info('updater = ' + item);
            console.info(item);

            $(hiddenElementId).val(item.id);

            return item;
        }
    }); // end typeahead
}

3.代入

通常の入力ボックスでも自動入力ボックスでも、直接値を代入することができます

// 备案网点
$("#txtRegisterCompanyId_editForm").val(registerCompanyName);

layui の詳細については、

layui 使用法チュートリアル 列に注目してください。

以上がLauiui フレームワークで一般的に使用される入力ボックスの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。