序文今日は、古典的なフロントエンドフレームワーク layui と JQuery を組み合わせてセル内のデータを動的に編集する、動的なテーブルデータ操作をいくつか紹介したいと思います。困っている人のお役に立てれば幸いです。さあ、お互いに励まし合いましょう! スタイル機能説明初期化コードLayui 開発ドキュメントによると、組み込みコンポーネントをロードし、テーブル データを動的に入力する次のコードを簡単に記述できます。 layui.use(関数() { レイヤーをlayui.layerとします。 要素 = layui.element、 テーブル = layui.table、 フォーム = layui.form; //編集フィールドを指定します const field = ['typeName']; // テーブルデータの読み込み table.render({ 要素: "#newsTypeTable", 高さ: 522, url: serverBase + "newsType/all"、 parseData: 関数 (res) { 戻る { "コード": res.code, 「データ」:res.data.types、 "カウント": res.data.count }; }, // ページングを有効にする page: true, リクエスト: { ページ名: 'オフセット', 制限名: 'ページサイズ' }, ツールバー: ` <div> {{# if(checkPermission(1, null)){ }} <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="追加"> <i class="layui-icon layui-icon-addition"></i> </ボタン> {{# }} {{# if(checkPermission(3, null)){ }} <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="batchDel"> <i class="layui-icon layui-icon-subtraction"></i> </ボタン> {{# }} </div> `、 デフォルトツールバー: [], 列: [ [ {タイプ: 'チェックボックス'、固定: '左'}, {フィールド: 'id'、タイトル: 'ID'、並べ替え: true、配置: 'center'}, {フィールド: 'typeName'、タイトル: 'ニュースカテゴリ'、位置揃え: 'center'}, {title: '操作'、fixed: 'right'、width: 200、align: 'center'、toolbar: '#myBar'} ] ]、 文章: { none: 「寂しさを表わしてる~」 } }); }); 例示する まず、バックエンド データを要求し、データ解析を通じて要求されたデータを割り当てます。注: ページングが有効になっている場合、バックエンドは表示されるアイテムの合計数を渡す必要があります。ページが開かれると、送信されるデフォルトのページング要求は...?page=1&limit=10 です。要求属性を通じて渡されるパラメーター名を変更します。たとえば、ページング要求は...all?offset=1&pageSize=10 に変更されます。 ツールバーを開くと、右側にデフォルトのヘッダーツールバーが開きます。必要ない場合は、defaultToolbar 属性値を空に設定する必要があります。また、ツールバーをカスタマイズする場合は、HTML タグ要素を div タグ内に配置して有効にする必要があります。これはルールです。 Toobar は Layui テンプレート構文を使用して、現在の管理者の権限を確認します。権限が利用できない場合は、権限は表示されません。 {type: 'checkbox', fixed: 'left'} でチェックボックスを有効にし、表の左端の位置に固定します。 アクションバーで、IDで外部カスタムツールバーを導入する <script type="text/html" id="myBar"> <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="編集"> <i class="layui-icon layui-icon-edit"></i> </ボタン> <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del"> <i class="layui-icon layui-icon-delete"></i> </ボタン> </スクリプト> イベントリスナーの追加リスナーツールバーtable.on('toolbar(newsTypeList)', 関数(obj) { checkStatus を table.checkStatus(obj.config.id); とします。 // 選択された行データ let selectedData = checkStatus.data; if(obj.event === 'add') { // ニュース タイプ追加ページにジャンプします window.open('addNewsType.html', 'mainFrame'); }それ以外の場合、obj.event === 'batchDel') { 選択されたデータの長さが0より大きい場合 ids = [] とします。 選択されたデータ.forEach((ターゲット行) => { ids.push(ターゲット行のid) }); layer.confirm(`ID[${ids}]を削除してもよろしいですか?`, {title: '警告', icon: 0}, 関数 (インデックス) { $.ajax({ タイプ: "DELETE"、 コンテンツタイプ: "application/json;charset=UTF-8", url: serverBase + "newsType/del"、 データ: JSON.stringify(ids)、 データ型: 'json', 成功: 関数 (res) { レスポンスデータを処理する場合は、res、レイヤーを指定します。 // 削除が成功したら、ページをリロードします setTimeout(function () { location.href = 'newsTypeList.html'; }, 遅延時間); } } }); レイヤーを閉じます(インデックス); } ); }それ以外 { layer.msg('少なくとも 1 行を選択してください', {icon: 3}); } } }); パブリック js ファイルは、serverBase (リクエスト バックエンド ベース アドレス)、delayTime (メッセージ ポップアップの遅延時間)、および返されたデータ処理をカプセル化する handleResponseData 関数を定義します。 ここまででヘッダーツールバーの2つの機能が実現できました。比較的簡単ですよね? モニターテーブル行ツールバーtable.on('tool(newsTypeList)', 関数(obj) { // lay-event に対応する値 (またはヘッダー内のイベント パラメータに対応する値) を取得します。 var layEvent = obj.event; // 行データ オブジェクトを取得します。var data = obj.data; スイッチ(レイイベント){ ケース '編集': 定数行 = obj.tr; const field_td = row.find(`[データフィールド$=${field[0]}]`); field_td.data('編集', true); 行[0].onclick = 関数() { setTimeout(関数() { field_td[0].lastChild.onblur = 関数 () { row.find('[data-field$=typeName]').data('edit', false); } }, 10); }; 壊す; ケース 'del': ids = [] とします。 ids.push(データid); layer.confirm(`ID => ${ids[0]} がある行を削除してもよろしいですか?`, function(index) { //削除コマンドをサーバーに送信します$.ajax({ タイプ: "DELETE"、 コンテンツタイプ: "application/json;charset=UTF-8", url: serverBase + "newsType/del"、 データ: JSON.stringify(ids)、 データ型: 'json', 成功: 関数 (res) { レスポンスデータを処理する場合は、res、レイヤーを指定します。 setTimeout(関数() { // 対応する行 (tr) の DOM 構造を削除し、キャッシュを更新します。obj.del(); }, 遅延時間); } } }); レイヤーを閉じます(インデックス); }); 壊す; } }); 行の削除は非常に簡単です。行をクリックして削除するオブジェクトの ID を取得し、それをバックエンドに渡して対応する行のデータを削除するだけです。 行内の編集ボタンをクリックして編集を実装するのは少し難しいです。まず、ボタンをクリックした後、同意したフィールドの編集を開く必要があります。つまり、クリックすると入力ボックスが表示され、それを変更および更新できます。入力ボックスがフォーカスを失ったら、今すぐ編集の入り口を閉じる必要があります。つまり、もう一度クリックしても入力ボックスは再び表示されません。 // 指定されたフィールドの編集を有効にします。同様に、無効にするには、パラメーターとして false を渡します。obj.tr.find(`[data-field$=${field[0]}]`).data('edit', true); このうち、field は、cols 属性の field 属性値と一致する編集フィールド名を指定します。 //編集フィールドを指定します const field = ['typeName']; JQuery の find 関数を使用してセルに対応するラベルを見つけ、次に data 関数を使用して edit 属性を追加し、それを true 値に初期化します。これは、{field: 'typeName'、title: 'News Category'、align: 'center'、edit: true} と同等です。 入力ボックスは対応するセルをクリックすると表示されるため、セルに対してクリックイベントが登録されます。ただし、クリックイベント後すぐに入力ボックスを取得できるわけではありません。DOM構造の更新に遅延があり、取得を遅らせる時間が必要です。 ブラウザのデバッグにより、セル td の親要素の最後の子要素が入力されていることがわかりました。フォーカス喪失イベントを追加します。トリガーされると、編集入口が閉じられ、開くにはボタンをもう一度押す必要があります。 行[0].onclick = 関数() { setTimeout(関数() { field_td[0].lastChild.onblur = 関数 () { row.find('[data-field$=typeName]').data('edit', false); } }, 10); }; リスニングセルtable.on('edit(newsTypeList)', function(obj) { let value = obj.value // 変更された値を取得します。 data = obj.data // 行内のすべてのキー値を取得します。 field = obj.field; // 変更されたフィールドを取得します。 let modifiedData = {id: data.id}; modifiedData[フィールド] = 値; $.ajax({ タイプ: "POST", コンテンツタイプ: "application/json;charset=UTF-8", url: serverBase + 'newsType/update', データ: JSON.stringify(modifiedData)、 データ型: 'json', 成功: function(res) { if(!handleResponseData(res, レイヤー)) { setTimeout(関数() { location.href = 'newsTypeList.html'; }, 遅延時間); } } }); }); 最後に、変更されたオブジェクトが渡され、更新リクエストが送信されます。変更された値はバックグラウンドで検証できます。変更が失敗した場合は、現在のページが更新されます。 結論Layui テーブル行のデータの動的編集に関するこの記事はこれで終わりです。Layui テーブルの動的編集に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: BT Baota Panel php7.3 および php7.4 が ZipArchive をサポートしない問題の解決方法
目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...
<br /> テキスト、シンボル、リンクの 3 つの側面に焦点を当て、主に中国語で、私の...
目次1. WeChatパブリックプラットフォームからWeChat開発者ツールをダウンロードする2. ...
序文Linux が完全にセットアップされると、クローン機能を使用して短時間で複数の Linux を作...
目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....
目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...
各テーブルの行数をカウントするために使用される MySQL count() 関数は、誰もがよく知って...
目次概要1. グローバル登録2. 現地登録3. モジュールシステムへのローカル登録概要コンポーネント...
3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイ...
目次道具:ログインシナリオ:練習する:シナリオ1: 思考と実践シナリオ2: 思考と実践要約する道具:...
Linux での Hadoop インストール チュートリアルはインターネットや書籍に多数ありますが、...
yum install mysql-serverと入力します。続行するにはYを押してくださいインスト...
大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...
この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...
以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...