Lauiuiデータテーブルの自動マージを実現する方法(コード)
この記事の内容は、layuiデータテーブルの自動マージ(コード)を実現する方法についてです。必要な友人が参考になれば幸いです。
要件の説明:
データテーブルでは、特定のカテゴリに従ってデータを表示するために、カテゴリの下に複数の細分化されたネストされた下位区分(州や都市のニックネームなど)があり、州の下に複数の都市があり、複数の都市の下に複数のエリアがあり、エリアの下にニックネームがあり、行をまたいで統合する必要があり、操作ボタンがカテゴリに分かれています(つまり、操作ボタンをカテゴリごとに統合する必要があります)。
要件分析:
操作列を除き、左列は行間結合の基本単位として使用されます。現在のセル結合数
元のページ:
処理中のページ:
メソッド:
var execRowspan = function(fieldName,index,flag){ // 1为不冻结的情况,左侧列为冻结的情况 let fixedNode = index=="1"?$(".layui-table-body")[index - 1]:(index=="3"?$(".layui-table-fixed-r"):$(".layui-table-fixed-l")); // 左侧导航栏不冻结的情况 let child = $(fixedNode).find("td"); let childFilterArr = []; // 获取data-field属性为fieldName的td for(let i = 0; i < child.length; i++){ if(child[i].getAttribute("data-field") == fieldName){ childFilterArr.push(child[i]); } } // 获取td的个数和种类 let childFilterTextObj = {}; for(let i = 0; i < childFilterArr.length; i++){ let childText = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent; if(childFilterTextObj[childText] == undefined){ childFilterTextObj[childText] = 1; }else{ let num = childFilterTextObj[childText]; childFilterTextObj[childText] = num*1 + 1; } } let canRowspan = true; let maxNum = 9999; for(let i = 0; i < childFilterArr.length; i++){ maxNum = $(childFilterArr[i]).prev().attr("rowspan")&&fieldName!="8"?$(childFilterArr[i]).prev().attr("rowspan"):maxNum; let key = flag?childFilterArr[i].innerHTML:childFilterArr[i].textContent; let tdNum = childFilterTextObj[key]; let curNum = maxNum<tdNum?maxNum:tdNum; let nextKey; for(let j =1;j<curNum&&(i+j<childFilterArr.length);j++){ nextKey = flag?childFilterArr[i+j].innerHTML:childFilterArr[i+j].textContent; if(key!=nextKey&&curNum>1){ canRowspan = true; curNum = j; } } if(canRowspan){ childFilterArr[i].setAttribute("rowspan",curNum); if($(childFilterArr[i]).find("p.rowspan").length>0){//设置td内的p.rowspan高度适应合并后的高度 $(childFilterArr[i]).find("p.rowspan").parent("p.layui-table-cell").addClass("rowspanParent"); $(childFilterArr[i]).find("p.layui-table-cell")[0].style.height= curNum*38-10 +"px"; } canRowspan = false; }else{ childFilterArr[i].style.display = "none"; } if(maxNum){ maxNum--; } if(--childFilterTextObj[key]==0||maxNum==0||(nextKey!=undefined&&key!=nextKey)){ canRowspan = true; } } } //合并数据表格行 var layuiRowspan = function(fieldNameTmp,index,flag){ let fieldName = []; if(typeof fieldNameTmp == "string"){ fieldName.push(fieldNameTmp); }else{ fieldName = fieldName.concat(fieldNameTmp); } for(let i = 0;i<fieldName.length;i++){ execRowspan(fieldName[i],index,flag); } }
使用方法:
HTML:
<p class="box"> <table class="layui-table" id="test" lay-data="{page:true,limit:50}" lay-filter="test"> <thead> <tr> <th lay-data="{field:'province', width:200}">省</th> <th lay-data="{field:'city', width:200}">市</th> <th lay-data="{field:'zone', width:200}">区</th> <th lay-data="{field:'username', width:200}">昵称</th> <th lay-data="{field:'joinTime', width:150}">加入时间</th> <th lay-data="{field:'sign', minWidth: 180}">签名</th> <th lay-data="{field:'8',align:'right'}">基本操作</th> </tr> </thead> <tbody> <tr> <td>浙江</td> <td>杭州</td> <td>西湖区</td> <td>贤心1</td> <td>2016-11-28</td> <td>人生就像是一场修行 A</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>浙江</td> <td>这个</td> <td>西湖区</td> <td>贤心2</td> <td>2016-11-29</td> <td>人生就像是一场修行 B</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>浙江</td> <td>丽水</td> <td>莲都区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 C</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>浙江</td> <td>丽水</td> <td>莲都区</td> <td>贤心3</td> <td>2016-19-30</td> <td>人生就像是一场修行 C</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>浙江</td> <td>位置</td> <td>莲都区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 C</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>位置</td> <td>莲都区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 C</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 C</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 C</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心3</td> <td>2016-11-30</td> <td>人生就像是一场修行 B</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心</td> <td>2016-11-30</td> <td>人生就像是一场修行 B</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心</td> <td>2016-11-30</td> <td>人生就像是一场修行 C</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> <tr> <td>湖北</td> <td>这个</td> <td>1区</td> <td>贤心</td> <td>2016-11-30</td> <td>人生就像是一场修行 D</td> <td> <p class="layui-btn-group" style="overflow:visible;"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> </p> </td> </tr> </tbody> </table> </p>
layui.use('table', function(){ var table = layui.table; table.init('test',{done:function(res,curr,count){ layuiRowspan('province',1); layuiRowspan(['city','zone','username','joinTime','sign'],1);//支持数组 layuiRowspan("8",1,true); } });})
関連する推奨事項: 動的を実装するための
layui静的データテーブルのページング以上がLauiuiデータテーブルの自動マージを実現する方法(コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









Layui ログインページジャンプ設定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲット ページ アドレスです。

layui は、フォームのすべてのフィールド データを直接取得する、単一のフォーム要素の値を取得する、formAPI.getVal() メソッドを使用して指定されたフィールド値を取得する、フォーム データをシリアル化するなど、フォーム データを取得するためのさまざまなメソッドを提供します。これを AJAX リクエスト パラメータとして使用し、フォーム送信イベントをリッスンしてデータを取得します。

layui を使用してデータを送信する方法は次のとおりです。 Ajax を使用する: リクエスト オブジェクトを作成し、リクエスト パラメーター (URL、メソッド、データ) を設定し、レスポンスを処理します。組み込みメソッドを使用する: $.post、$.get、$.postJSON、$.getJSON などの組み込みメソッドを使用してデータ転送を簡素化します。

アダプティブ レイアウトは、layui フレームワークのレスポンシブ レイアウト機能を使用して実現できます。手順には以下が含まれます:layui フレームワークを参照する。アダプティブ レイアウト コンテナを定義し、layui-container クラスを設定します。レスポンシブ ブレークポイント (xs/sm/md/lg) を使用して、特定のブレークポイントの下にある要素を非表示にします。グリッド システム (layui-col-) を使用して要素の幅を指定します。オフセット (layui-offset-) によって間隔を作成します。応答性の高いユーティリティ (layui-invisible/show/block/inline) を使用して、要素の可視性とその表示方法を制御します。

Lauiui と Vue の違いは主に機能と懸念事項に反映されます。 Layui は UI 要素の迅速な開発に重点を置き、ページ構築を簡素化するプレハブ コンポーネントを提供します。Vue は、データ バインディング、コンポーネント開発、および状態管理に重点を置いたフルスタック フレームワークで、複雑なアプリケーションの構築により適しています。 Layui は学習が簡単で、ページをすばやく作成するのに適しています。Vue は学習曲線が急ですが、スケーラブルで保守が簡単なアプリケーションの構築に役立ちます。プロジェクトのニーズと開発者のスキル レベルに応じて、適切なフレームワークを選択できます。

layui を実行するには、次の手順を実行します: 1.layui スクリプトをインポートします; 2.layui を初期化します; 3.layui コンポーネントを使用します; 4.layui スタイルをインポートします (オプション); 5. スクリプトの互換性を確認し、その他の考慮事項に注意してください。これらの手順により、layui の機能を使用して Web アプリケーションを構築できます。

layui フレームワークは、開発者が応答性の高い Web アプリケーションを迅速に構築できるようにする、使いやすい UI コンポーネントとツールのセットを提供する JavaScript ベースのフロントエンド フレームワークです。その機能には、モジュール式、軽量、応答性が高く、完全なドキュメントとコミュニティ サポートが含まれます。 layui は、管理バックエンド システム、電子商取引 Web サイト、モバイル アプリケーションの開発で広く使用されています。利点は迅速な起動、効率の向上、メンテナンスの容易さですが、欠点はカスタマイズの貧弱さと技術の更新の遅さです。

layui は、開発者が最新の応答性の高いインタラクティブな Web アプリケーションを迅速に構築できるように、豊富な UI コンポーネント、ツール、機能を提供するフロントエンド UI フレームワークです。その機能には、柔軟で軽量、モジュール式の設計、豊富なコンポーネント、強力なツール、簡単な機能が含まれます。カスタマイズ。管理システム、電子商取引プラットフォーム、コンテンツ管理システム、ソーシャル ネットワーク、モバイル アプリケーションなど、さまざまな Web アプリケーションの開発に広く使用されています。
