Select などの Form フォーム要素の使用方法の紹介

Select などの Form 要素については、使用すると一部の機能が無効になります。

たとえば、select に付属の Search 機能は次のとおりです。

実際、Form フォーム要素を使用する場合、layui に付属する機能の一部 (検索、検証など) が必要な場合は、それを < で囲んでください。 ;Form> タグを使用し、レンダリングを有効にするには、form オブジェクトを初期化する必要があります。同様に、タブも要素オブジェクトを初期化する必要があります。

//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.config({
    base: '/Resources/Script/'
})
.use(['element', 'common', 'form'], function () {
    var element = layui.element;//tab选项卡类的功能才能实现
    var form = layui.form;//部分表单元素功能才能实现
});

キャンセル ボタンの自動送信イベントについて

layui はボタンを使用すると、関係なくフォームを自動的に送信します。ボタンの種類は送信ではありません。

解決策:

1.

タグ内に記述しておけば自動的に送信されますが、一般的に使用する場合は、Form の外に記述してください。

2. ボタン クリック イベントの戻り値は false を返す必要があり、フォームの送信も整理できます。

ここには、フォーム フォームに囲まれたフォーム要素という小さな詳細があることに注意してください。Jquery の Seriliaze メソッドを使用して、フォームの結果セットをすばやくカプセル化できます: (JSON オブジェクトをカプセル化します)

var formData = $("#infoForm").serializeArray();
           var data = {};
           $.each(formData, function (index, item) {
               data[item.name] = item.value;
           });

または、key=value&key1=value2 の文字列を生成します (Serialize() を使用)

ただし、ここでlayuiフォームのselectオプションを取得すると、元のselectが非表示になり、再レンダリングされます。それ。選択です。現時点では、上記のメソッドで選択の値を取得することはできません。引き続き $().value を使用できます。デフォルトのオプションのオプションには value='' を割り当てる必要があります。それ以外の場合は、値ががレンダリングされると、デフォルトで text() 値がコピーされます。

laydate のデフォルト値の初期化:

個人的には isInitValue をオンにしてくださいドキュメントにはこう書かれていますが、正確ではなく、無駄な構成のように感じられます。いずれにしても、デフォルト値を初期化する前に、isInitValue を明示的に指定する必要があります。

DataTable データ テーブルの非同期読み込みパラメーターについて:

リクエストに関しては、layui リクエストを行う場合、パラメーターにはデフォルトで pageIndex と pageSize が含まれます。リクエスト パラメータを渡すと、独自の pageIndex および pageSize 名を構成できます。追加のリクエストパラメータは where にカプセル化する必要があり、最終的に、layui がそれらをまとめてバックグラウンドに送信します。

応答パラメータの設定に関して、線を引く際に4つの項目を指摘する必要があります。他のパラメータをバックグラウンドで自由に転送し、完了時に取得できます。

省と都市の連携 (コントロール レベルでのローカル レンダリング) について

#Laui には双方向バインディングの概念がないため、ここで行われることは、データを取得し、コントロールをレンダリングして更新するたびに繰り返されます。したがって、一般的に採用されるのは、form -form 属性とlay-filter 属性) で select を囲み、次に form.select('select', select: filter 属性値を含む div を実行することによる、フォーム リスニング イベントの部分的なレンダリングです。 )、すべてのフォーム select を更新する必要はなく、特定の select をレンダリングしますが、イベント監視はコントロール レベルに移行できます (つまり、コントロール上でレイ フィルターがマークされます)。

<div class="layui-form" lay-filter="selLocation">
                            <label class="text_label">出发站:</label>
                            <div class="layui-input-inline">
                                <select id="selLocation" name="selLocation" class="text_input" lay-filter="selLocation" lay-verify="" lay-search></select>
                            </div>
                        </div>

form.on("select(selLine)", function (data) {
                       var template1 = "<option value=&#39;&#39;>全部选项</option>";
                       for (var index in result.Data) {
                           if (result.Data[index].LineId == data.value) {
                               template1 += "<option value=&#39;" + result.Data[index].TimesId + "&#39;>" + result.Data[index].TimesName + "</option>";
                           }
                       }
                       $("#selTimes").html(template1);
                       form.render(&#39;select&#39;,&#39;selLlocation&#39;);
                   })

データリストの自己増加列の実装(2種類)

1. テンプレートエンジンを使用します

模板：
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
table的col参数：
cols: [[
            { title: &#39;序号&#39;, templet: &#39;#indexTpl&#39;, width: "6%" }
]]

2. パラメータを使用しますincol type:numbers (このパラメータはlayui2.2.0の新機能であることに注意してください)

cols: [[
            { title: '序号', type:'numbers', width: "6%" }
]]

2番目の方法をお勧めします。2番目の方法は、ページングによるソートです。2番目のページは、前のページから増加するインデックスです。 1つ目のタイプでは、ソート中にシリアル番号が10-1

と変化します。バックエンド スタッフがフロントエンド コードを作成します。それはわずかに見えます。ページに関するいくつかの提案 (ほとんどはフォーム)

私の提案は次のとおりです:

1. まず、グリッド レイアウトと使いやすいいくつかの基本的なフレームワークを理解します。すべてにレイアウトがあります。

2. chrome を使用して要素のスタイルを変更し、変更したスタイルを自分で cp し、それを css にカプセル化します。

3. コンポーネントを使用するときは、構造を注意深く確認してください。元の構造を破壊すると、簡単に故障につながる可能性があります。

4. デモは依然として大きな影響力を持っているため、デモを完全にコピーしないでください。つまり、要素が前にネストされているため、必ずルールを明確に読んでください。バックエンド スタッフにとっては、これらのいくつかの点を知っていればほぼ十分であり、すでにほとんどのアプリケーションを処理できます。

layui の詳細については、layui 使用法チュートリアル 列に注目してください。

以上がSelect などの Form フォーム要素の使用方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。