閱讀652 返回首頁    go 技術社區[雲棲]

Bootstrap Table筆記——3

屬性：

rowStyle: function(row, index) {
	//這裏有5個取值代表5中顏色['active', 'success', 'info', 'warning', 'danger'];
	var strclass = "";
	if (Number(row.age) < 18) {
		strclass = 'success';
	} else {
		return {};
	}
	return { classes : strclass }
}
bootstrap table支持5中表格的行背景色，分別是'active', 'success', 'info', 'warning', 'danger'這五種，至於每種對應的背景顏色，將代碼運行起來就可看到。關於這個方法的返回值，按照bootstrap table的規則，必須返回一個json格式的對象型如： { classes : strclass} 。

（1）引入額外的js文件

（2）在cshtml頁麵定義表格時，添加兩個屬性

<table >
    <thead>
        <tr>
            <th data-field="Name" data-editable="true">部門名稱</th>
            <th data-field="ParentName">上級部門</th>
            <th data-field="Level" data-editable="true">部門級別</th>
            <th data-field="Desc" data-editable="true">描述</th>
        </tr>
    </thead>
</table>


columns: [{
        checkbox: true
    }, {
        field: 'id',
        title: 'ID',
		align: 'center'
    }, {
        field: 'age',
        title: 'AGE',
		editable: {
			type: 'text',
			title: 'AGE',
			validate: function (v) {
				if (!v) return '年齡不能為空';
				if (isNaN(v)) return '年齡必須是數字';
				var age = parseInt(v);
				if (age <= 0) return '年齡必須是正整數';
			}
		},
		align: 'center'
    }, {
        field: 'cupSize',
        title: 'CupSize',
		editable: true,
		align: 'center'
    } ]

（3）在js裏麵初始化表格的時候注冊編輯保存的事件

onEditableSave: function (field, row, oldValue, $el) {
	console.log(field);
	console.log(row);
	console.log(oldValue);
	console.log($el);
	console.log(JSON.stringify(row));
}

對應的方法裏麵需要自己處理保存的邏輯。四個參數field, row, oldValue, $el分別對應著當前列的名稱、當前行數據對象、更新前的值、編輯的當前單元格的jQuery對象。

完整代碼（1+2）：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>BootStrap Table使用</title>
		<!--Jquery組件引用-->
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

		<!--bootstrap組件引用-->
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />

		<!--bootstrap table組件以及中文包的引用-->
		<script type="text/javascript" src="js/bootstrap-table.js"></script>
		<link rel="stylesheet" href="css/bootstrap-table.css" />
		<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

		<!--頁麵js文件的引用-->
		<script type="text/javascript" src="js/main.js"></script>

		<!--bootstrap table editable組件引用-->
		<link rel="stylesheet" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
		<script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
		<script src="js/extensions/editable/bootstrap-editable.js"></script>
		<script src="js/extensions/editable/bootstrap-table-editable.js"></script>

	</head>

	<body>
		<div  >
			<div >
				<div >查詢條件</div>
				<div >
					<form  >
						<div  >
							<label  for="txt_search_departmentname">部門名稱</label>
							<div >
								<input type="text"  >
							</div>
							<label  for="txt_search_statu">狀態</label>
							<div >
								<input type="text"  >
							</div>
							<div  >
								<button type="button"   >查詢</button>
							</div>
						</div>
					</form>
				</div>
			</div>

			<div  >
	            <button  type="button"  data-toggle="modal" data-target="#insertModal">
	                <span  aria-hidden="true"></span>新增
	            </button>
	            <button  type="button" >
	                <span  aria-hidden="true"></span>修改
	            </button>
	            <button  type="button" >
	                <span  aria-hidden="true"></span>刪除
	            </button>
	        </div>

			<!-- 模態框（Modal） -->
			<div   tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div >
					<div >
						<div >
							<button type="button"  data-dismiss="modal" aria-hidden="true">
								×
							</button>
							<h4  >
								添加商品
							</h4>
						</div>
						<div >
							<select >
								<option value="0">0</option>
								<option value="1">1</option>
								<option value="2">2</option>
							</select>
						</div>
						<div >
							<button type="button"  data-dismiss="modal">
								關閉
							</button>
							<button type="button"  data-dismiss="modal">
								確認
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>

			<table ></table>
		</div>
	</body>

	<script type="text/javascript">
		$(function () {

		    //1.初始化Table
		    var oTable = new TableInit();
		    oTable.Init();
		
		    //2.初始化Button的點擊事件
		    var oButtonInit = new ButtonInit();
		    oButtonInit.Init();
		
		});


		var TableInit = function () {
		    var oTableInit = new Object();
		    //初始化Table
		    oTableInit.Init = function () {
		        $('#tb_departments').bootstrapTable({
		            url: '/girl/lS',         				//請求後台的URL（*）
		            method: 'post',                       	//請求方式（*）
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",						//數據類型
		            toolbar: '#toolbar',               	//工具按鈕用哪個容器
		            striped: false,                      	//是否顯示行間隔色
		            cache: false,                       	//是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
		            pagination: true,                   	//是否顯示分頁（*）
		            sortable: false,                    	//是否啟用排序
		            sortOrder: "asc",                   	//排序方式
					queryParamsType: '',
		            queryParams: oTableInit.queryParams, 	//傳遞參數（*）
		            sidePagination: "server",           	//分頁方式：client客戶端分頁，server服務端分頁（*）
		            pageNumber: 1,                       	//初始化加載第一頁，默認第一頁
		            pageSize: 10,                       	//每頁的記錄行數（*）
		            pageList: [10, 25, 50, 100],        	//可供選擇的每頁的行數（*）
		            search: true,                       	//是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大
		            strictSearch: true,						//啟用全匹配搜索，否則為模煳搜索
					searchOnEnterKey: false,				//按回車觸發搜索方法，否則自動觸發搜索方法
		            showColumns: true,                  	//是否顯示所有的列
		            showRefresh: true,                  	//是否顯示刷新按鈕
		            minimumCountColumns: 2,             	//最少允許的列數
		            clickToSelect: true,                	//是否啟用點擊選中行
		            //height: 500,                        	//行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度
		            uniqueId: "ID",                     	//每一行的唯一標識，一般為主鍵列
		            showToggle:true,                    	//是否顯示詳細視圖和列表視圖的切換按鈕
		            cardView: false,                    	//是否顯示詳細視圖
		            detailView: true,                  		//是否顯示父子表
					rowStyle: function(row, index) {
						//這裏有5個取值代表5中顏色['active', 'success', 'info', 'warning', 'danger'];
						var strclass = "";
						if (Number(row.age) < 18) {
							strclass = 'success';
						} else {
							return {};
						}
						return { classes : strclass }
					},
		            columns: [{
		                checkbox: true
		            }, {
		                field: 'id',
		                title: 'ID',
						align: 'center'
		            }, {
		                field: 'age',
		                title: 'AGE',
						editable: {
							type: 'text',
							title: 'AGE',
							validate: function (v) {
								if (!v) return '年齡不能為空';
								if (isNaN(v)) return '年齡必須是數字';
								var age = parseInt(v);
								if (age <= 0) return '年齡必須是正整數';
							}
						},
						align: 'center'
		            }, {
		                field: 'cupSize',
		                title: 'CupSize',
						editable: true,
						align: 'center'
		            } ],
					onClickRow: function (row, $element) {
						curRow = row;
					},
					//注冊加載子表的事件。注意下這裏的三個參數！
					onExpandRow: function (index, row, $detail) {
						oInit.InitSubTable(index, row, $detail);
					},
					onEditableSave: function (field, row, oldValue, $el) {
						console.log(field);
						console.log(row);
						console.log(oldValue);
						console.log($el);
						console.log(JSON.stringify(row));
					}
		        });
		    };

		    //得到查詢的參數
		    oTableInit.queryParams = function (params) {
		        var temp = {   //這裏的鍵的名字和控製器的變量名必須一直，這邊改動，控製器也需要改成一樣的
//		            limit: params.limit,   //頁麵大小
//		            offset: params.offset,  //頁碼
					pageNumber: params.pageNumber,
					pageSize: params.pageSize,
//		            departmentname: $("#txt_search_departmentname").val(),
//		            statu: $("#txt_search_statu").val(),
					search: params.search
		        };
		        return temp;
		    };

			//初始化子表格(無線循環)
			var oInit = new Object();
			oInit.InitSubTable = function (index, row, $detail) {
				var parentid = row.id;
				var cur_table = $detail.html('<table></table>').find('table');
				$(cur_table).bootstrapTable({
					url: '/girl/sub/lC',
					method: 'post',
					contentType: "application/x-www-form-urlencoded",
					dataType: "json",						//數據類型
					queryParams: { strParentID: parentid },
					ajaxOptions: { strParentID: parentid },
					clickToSelect: true,
					detailView: true,//父子表
					uniqueId: "subId",
					pageSize: 10,
					pageList: [10, 25],
					columns: [{
						checkbox: true
					}, {
						field: 'subId',
						title: 'SubId'
					}, {
						field: 'grade',
						title: 'Grade'
					}, {
						field: 'name',
						title: 'Name'
					} ],
					//無線循環取子表，直到子表裏麵沒有記錄
					onExpandRow: function (index, row, $Subdetail) {
						oInit.InitSubTable(index, row, $Subdetail);
					}
				});
			};

		    return oTableInit;
		};


		var ButtonInit = function () {
		    var oInit = new Object();
		    var postdata = {};
		
		    oInit.Init = function () {
		        //初始化頁麵上麵的按鈕事件
		    };

		    return oInit;
		};
	</script>

</html>

3.表格行列合並

rowspan colspan

columns: [
	[
		{
			checkbox: true,
			rowspan: 2,
			align: 'center',
			valign: 'middle'
		}, {
			field: 'id',
			title: 'ID',
			rowspan: 2,
			align: 'center',
			valign: 'middle',
		},{
			title: 'Detail',
			colspan: 2,
			align: 'center'
		}
	],
	[
		{
			field: 'age',
			title: 'AGE',
			editable: {
				type: 'text',
				title: 'AGE',
				validate: function (v) {
					if (!v) return '年齡不能為空';
					if (isNaN(v)) return '年齡必須是數字';
					var age = parseInt(v);
					if (age <= 0) return '年齡必須是正整數';
				}
			},
			align: 'center'
		}, {
			field: 'cupSize',
			title: 'CupSize',
			editable: true,
			align: 'center'
		}
	]
]

4.表格數據導出

最後更新：2017-07-09 15:03:41

  上一篇：go  阿裏雲ecs幸運券領取 阿裏雲服務器幸運券領取
  下一篇：go  Python 快速入門