検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Lauiui を使用してテーブル データ テーブルをレンダリングする (例)

Lauiui を使用してテーブル データ テーブルをレンダリングする (例)

尚
尚転載
2019-11-29 14:00:496578ブラウズ

Lauiui を使用してテーブル データ テーブルをレンダリングする (例)

table モジュールは、layui フレームワークのコア コンポーネントの 1 つです。これはテーブル上で一連の関数と動的なデータ操作を実行するために使用され、日常業務に関わるほぼすべてのニーズをカバーします。

固定ヘッダー、固定行、固定列左/列右をサポート、列幅を変更するためのドラッグをサポート、並べ替えをサポート、マルチレベル ヘッダーをサポート、セルのカスタム テンプレートをサポート、テーブルのリロードをサポート (検索など) 、条件付きフィルタリングなど)、チェックボックスのサポート、ページングのサポート、セル編集のサポート、およびその他の多くの機能。

それでも、コード量とパフォーマンスをコントロールしながら、随時改良し、使いやすい機能を追加していきます。テーブルモジュールも、layuiの主要なメンテナンスプロジェクトの1つになります。

layui レンダリング テーブル データ フォームの例:

1.layui の css および js ファイルを導入します

link rel="stylesheet" href="lib/layui/css/layui.css">
<script src="lib/layui/layui.js"></script>

2. ページにテーブル要素を配置します

<table class="layui-hide" id="test" lay-filter=&#39;test3&#39;></table>

3. table.render() メソッドでコンテナを指定します

layui.use(&#39;table&#39;, function(){
            var table = layui.table;
//            var playerName;
//            if(item != undefined) {
//                playerName=item;
//            }
            table.render({
                elem: &#39;#test&#39;  table 容器的选择器或 DOM
                ,url:&#39;http://boss.superlychee.com/rest/web/golfTourManage/getGolfTourPlayerByTourIdAndRounds&#39;
                ,method:&#39;post&#39;
                ,where:{tourId:tourIds,rounds:rounds,playerName:item}
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {field:&#39;tourPlayerId&#39;, width:80, title: &#39;ID1&#39;, sort: true}
                    ,{field:&#39;playerName&#39;, width:80, title: &#39;姓名&#39;}
                    ,{field:&#39;hole1&#39;,  title: &#39;1&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole2&#39;, title: &#39;2&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole3&#39;, title: &#39;3&#39;,edit: &#39;text&#39;} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:&#39;hole4&#39;, title: &#39;4&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole5&#39;, title: &#39;5&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole6&#39;, title: &#39;6&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole7&#39;, title: &#39;7&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole8&#39;, title: &#39;8&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole9&#39;, title: &#39;9&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole10&#39;, title: &#39;10&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole11&#39;, title: &#39;11&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole12&#39;, title: &#39;12&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole13&#39;, title: &#39;13&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole14&#39;, title: &#39;14&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole15&#39;, title: &#39;15&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole16&#39;, title: &#39;16&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole17&#39;, title: &#39;17&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;hole18&#39;, title: &#39;18&#39;,edit: &#39;text&#39;}
                    ,{field:&#39;add&#39;, title: &#39;操作&#39;, width:177,toolbar:"#barDemo"}

4。この時点で、ページは次のようになります。

Lauiui を使用してテーブル データ テーブルをレンダリングする (例)

5. テキスト さて、テーブルデータをレンダリングするにはどうすればよいでしょうか?上記の 3 番目の部分は、「メソッド レンダリング」と呼ばれるレンダリング方法の 1 つです。layui 公式 Web サイトで提供されている

レンダリング メソッドは 3 つあります。ここでは説明しません。メソッド レンダリングの利点は次のとおりです。 HTML ファイルから分離して、JS 自体に焦点を当てることができます。特にプロジェクトの変更やリリースが頻繁に行われる場合には、その利便性がより顕著になるでしょう。属性 投稿の場合、

#6 はよくある問題ですが、論理的に言えば、この時点でテーブル データを確認できるはずですが、ほとんどの人のテーブルが依然としてレンダリングできないのはなぜですか?通常、これはあなたの妹がバックグラウンド データ形式 

response: {
    statusName: &#39;code&#39; //数据状态的字段名称，默认：code
    ,statusCode: 200 //成功的状态码，默认：0
    ,msgName: &#39;msg&#39; //状态信息的字段名称，默认：msg
    ,countName: &#39;count&#39; //数据总数的字段名称，默认：count
    ,dataName: &#39;data&#39; //数据列表的字段名称，默认：data

を設定したためで、その結果は次のようになります:


以上がLauiui を使用してテーブル データ テーブルをレンダリングする (例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css layui html JS table
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：Layui 日付制御の使用法 (例)次の記事：Layui 日付制御の使用法 (例)

関連記事

続きを見る