bootstrap-table給每一行數據添加按鈕,並綁定事件

給每一行數據添加按鈕,並綁定事件

$table.bootstrapTable({
		//url: 'json/dev.json',
		data: wcssdata,
		toolbar: '#toolbar', //工具按鈕用哪個容器
		//striped: true, //是否顯示行間隔色
		cache: false, //是否使用緩存,默認爲true,所以一般情況下需要設置一下這個屬性(*)
		pagination: true, //是否顯示分頁
		sortable: true, //是否啓用排序
		sortOrder: "asc", //排序方式
		//queryParams: postQueryParams,//傳遞參數(*)
		//sidePagination: "server",      //分頁方式:client客戶端分頁,server服務端分頁(*)
		pageSize: 20, //每頁的記錄行數(*)
		pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*)
		strictSearch: true,
		//height: table_h, //行高,如果沒有設置height屬性,表格自動根據記錄條數覺得表格高度,設置了行高後編輯時標頭寬度不會隨着下面的行改變,且顏色也不會改變????
		uniqueId: "id", //每一行的唯一標識,一般爲主鍵列
		cardView: false, //是否顯示詳細視圖
		detailView: false, //是否顯示父子表
		paginationHAlign: "left",
		singleSelect: true,
		//search:true,               //是否顯示錶格搜索,此搜索是客戶端搜索,不會進服務端
		//strictSearch: true,
		//showColumns: true, //是否顯示所有的列
		//showRefresh: true, //是否顯示刷新按鈕
		clickToSelect: true, //是否啓用點擊選中行
		paginationPreText: "<<",
		paginationNextText: ">>",
		columns: [{
			checkbox: true,
		}, {
			field: 'id',
			title: '序號',
			width: "75px",
		}, {
			field: 'seq_no',
			title: '編號',
		}, {
			field: 'type',
			title: '類型',
		}, {
			field: 'position',
			title: '位置',
		}, {
			field: 'status',
			title: '設備狀態',
		}, {
			field: 'fault',
			title: '故障現象',
		}, {
			field: 'purchase_time',
			title: '採購時間',
		}, {
			field: 'quality_time',
			title: '出保時間',
		}, {
			field: 'maintain_unit',
			title: '維護單位',
		}, {
			field: 'inputer',
			title: '錄入者',
		}, {
			field: 'operate',
			title: '操作',
			width: '80px',
			events: operateEvents1,
			formatter: operateFormatter
		}, ],
		/*處理json數據需要配置此項
		 * 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 [
			'<button id="btn_detail" type="button" class="RoleOfA btn-default bt-select">詳情</button>',
		].join('');
	}




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章