1. ホーム
  2. javascript

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('');
	}