layuiを使用してテーブルデータテーブルを美しくする方法-ライユイのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

ライユイのチュートリアル

layuiを使用してテーブルデータテーブルを美しくする方法

王林

Nov 17, 2020 pm 04:04 PM

layuitableデータ表

layuiを使用してテーブルデータテーブルを美しくする方法

まず、美化されたレンダリングを見てみましょう:

(学習ビデオ共有: html ビデオチュートリアル)

layuiを使用してテーブルデータテーブルを美しくする方法

具体的な手順:

1.layui

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

のcssファイルとjsファイルを導入します

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

2.テーブル要素をページ

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

に配置します

3 、 table.render() メソッドを使用してコンテナを指定します。

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

layuiを使用してテーブルデータテーブルを美しくする方法

##5. 本文はここですが、テーブルデータをどのようにレンダリングするか?上記の 3 番目の部分は、「メソッドレンダリング」と呼ばれるレンダリング方法です。layui 公式 Web サイトが提供する 3 つのレンダリング方法については、ここでは説明しません。メソッドレンダリングの利点は、HTML ファイルから離れて、HTML ファイルに集中できることです。 JS自体について。特にプロジェクトの変更やリリースが頻繁に行われる場合には、利便性がより顕著になりますが、layuiのデフォルトURLは「get」リクエストですが、ここではpostリクエストとなっているため、postするには「method」属性を忘れずに追加してください。

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

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"}
                ]],
            });
            });

rrreee

この時点で、テーブルは一般的に表示されています。バックグラウンドで提供されるデータ形式は、layui で提供されるデータ形式と同じであることを忘れないでください。公式サイトにアクセスして見てください、説明はありません。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

WebStorm Mac版

便利なJavaScript開発ツール

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。