bootstrap-table は、データの各行にボタンを追加し、イベントをバインドします。
2022-02-18 17:32:55
データの各行にボタンを追加し、イベントをバインドする
$table.bootstrapTable({
//url: 'json/dev.json',
data: wcssdata,
toolbar: '#toolbar', //which container to use for tool buttons
//striped: true, //whether to show line spacing color
cache: false, //whether to use cache or not, default is true, so usually need to set this property (*)
pagination: true, //whether to show pagination
sortable: true, //whether to enable sorting
sortOrder: "asc", //sorting method
//queryParams: postQueryParams,//pass parameters (*)
//sidePagination: "server", //pagination method: client client pagination, server server pagination (*)
pageSize: 20, //number of rows per page (*)
pageList: [10, 25, 50, 100], //number of rows per page to choose from (*)
strictSearch: true,
//height: table_h, //line height, if not set height property, the table automatically according to the number of records feel the height of the table, set the line height after editing the header width will not change with the following line, and the color will not change ????
uniqueId: "id", //a unique identifier for each row, generally the primary key column
cardView: false, //whether to show detail view
detailView: false, //whether to show parent-child table
paginationHAlign: "left",
singleSelect: true,
//search:true, //whether to show table search, this search is client-side search, will not enter the server
//strictSearch: true,
//showColumns: true, //whether to show all columns
//showRefresh: true, //whether to show refresh button
clickToSelect: true, //whether to enable click on selected rows
paginationPreText: "<<",
paginationNextText: ">>",
columns: [{
checkbox: true,
}, {
field: 'id',
title: 'serial number',
width: "75px",
}, {
field: 'seq_no',
title: 'number',
}, {
field: 'type',
title: 'type',
}, {
field: 'position',
title: 'position',
}, {
field: 'status',
title: 'Device status',
}, {
field: 'fault',
title: 'fault',
}, {
field: 'purchase_time',
title: 'purchase time',
}, {
field: 'quality_time',
title: 'time out of warranty',
}, {
field: 'maintain_unit',
title: 'maintenance_unit',
}, {
field: 'inputer',
title: 'Entered by',
}, {
field: 'operator',
title: 'operation',
width: '80px',
events: operateEvents1,
formatter: operateFormatter
}, ],
/* This is required to process json data
* responseHandler: function (res) {
return res.rows;
}*/
});
対応するセルの書式とイベント
window.operateEvents1 = {
'click .RoleOfA': function(e, value, row, index) {
detailmodal.open();
$("#dev_id").val(row.id);
$("#seq_no").val(row.seq_no);
$("#dev_pos").val(row.position);
$("#dev_type1").val(row.type);
$("#dev_status").val(row.status);
$("#fault").val(row.fault);
$("#buy_time").val(row.purchase_time);
$("#quality_time").val(row.quality_time);
$("#inputer").val(row.inputer);
$("#maintain_unit").val(row.maintain_unit);
for(var i in row) console.log(i);
}
};
function operateFormatter(value, row, index) {
return [
'
',
].join('');
}
関連
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み] moment.jsで日付をISO 8601のようにフォーマットするにはどうしたらいいですか?
-
[解決済み] AngularJSでiframeのsrc属性を変数から設定する方法
-
[解決済み] JS - null のプロパティ 'setAttribute' を読み取ることができません [重複]。
-
[解決済み] ReactのuseEffectでローディング関数を1回だけ呼び出す方法
-
[解決済み] Cypress を使用して、要素にカーソルを合わせてからクリックするにはどうすればよいですか?
-
[解決済み] 純粋なjavascriptで単語が等値線であるかどうかをチェックします。
-
[解決済み] ReactGA.initializeを最初に呼び出す必要があります。
-
[解決済み] テキストファイルの内容をJavaScriptに取り込むには?[重複]する
-
Uncaught TypeError: Node' の 'appendChild' 実行に失敗:パラメータ 1 は 'Node' 型でない 解決方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み】 \u003C とは何ですか?
-
[解決済み] imgタグの付いたdivを画像に変換する方法
-
[解決済み] crypto-jsでMalformed UTF-8 dataエラーが発生するのですが?
-
[解決済み] Javascriptで時間経過を測定するには?[重複しています]
-
[解決済み] ng-classを使用したAngularJSのトグルクラス
-
[解決済み] jQueryの子要素を数える
-
[解決済み] TypeError: null のプロパティ 'textContent' を設定できない [重複] 。
-
[解決済み] javascriptで配列の逆順にmap()を使用する方法はありますか?