很多時候使用行內編輯會該操作者帶來更清爽的體驗

實現bootstrapTable行內編輯：

首先匯入相關依賴：

<!--引用BootStrap的JavaScript外掛-->
<script src="#(basePath)/page/js/jquery.min.js"></script>
<script src="#(basePath)/page/js/bootstrap.min.js"></script>
<script src="#(basePath)/page/js/bootstrap-table.js"></script>
<script src="#(basePath)/page/js/bootstrap-table-zh-CN.js"></script>
<!-- 行內編輯  -->
<script src="#(basePath)/page/js/bootstrap-editable.js"></script>
<script src="#(basePath)/page/js/bootstrap-table-editable.js"></script>

 

HTML部分：

<table class="table table-hover table-bordered" id="tb_user">  </table>

js部分：

//初始化表格
function initTable() {
	//先銷燬表格  
	$('#tb_user').bootstrapTable('destroy');
	//初始化表格,動態從伺服器載入資料  
	$("#tb_user").bootstrapTable({
			url : '#(basePath)/admin/manageUser', //請求後臺的URL（*）
			method : 'post', //請求方式（*）
			contentType: "application/x-www-form-urlencoded",//一種編碼。好像在post請求的時候需要用到。這裡用的get請求，註釋掉這句話也能拿到資料
			striped : true, //是否顯示行間隔色
			dataField: "rows",//這是返回的json陣列的key.預設好像是"rows".這裡只有前後端約定好就行
			cache : true, //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
			pagination : true, //是否顯示分頁（*）
			sortable : true, //是否啟用排序
			sidePagination : "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
			pageNumber : 1, //初始化載入第一頁，預設第一頁
			pageSize : 50, //每頁的記錄行數（*）
			pageList : [ 50, 100 ], //可供選擇的每頁的行數（*）
			search : false, //是否顯示錶格搜尋，此搜尋是客戶端搜尋，不會進服務端，所以，個人感覺意義不大
			strictSearch : false,
			paginationPreText:'上一頁',
            paginationNextText:'下一頁',
			//showColumns : true, //是否顯示所有的列
			//showRefresh : true, //是否顯示重新整理按鈕
			minimumCountColumns : 2, //最少允許的列數
			clickToSelect : true, //是否啟用點選選中行
			uniqueId : "user_id", //每一行的唯一標識，一般為主鍵列
			//showToggle : true, //是否顯示詳細檢視和列表檢視的切換按鈕
			cardView : false, //是否顯示詳細檢視
			detailView : false, //是否顯示父子表
			queryParams:queryParams,//請求伺服器時所傳的引數
			responseHandler:responseHandler,//請求資料成功後，渲染表格前的方法
			rowStyle: function (row, index) {
                //這裡有5個取值代表5中顏色['active', 'success', 'info', 'warning', 'danger'];
                var strclass;
                if (row.integral_num < 150) {
                    strclass = 'danger';
                }else if (row.integral_num > 400) {
                    strclass = 'info';
                }
                else {
                	strclass = '';
                }
                return { classes: strclass }
            },
	 	    onEditableSave: function (field, row, oldValue, $el) {
		    	layer.msg(row.integral_num);
                $.ajax({
                    type: "post",
                    url: "#(basePath)/admin/giftIntegral",
                    data: { 
                    	userId:row.user_id,
                    	integral:row.integral_num
                    },
                    success: function (data, status) {
                        if (status == "success") {
                            layer.msg("編輯成功");
                        }
                    },
                    error: function () {
                        layer.msg("Error");
                    },
                    complete: function () {
						layer.msg("完成")
                    }
                });
 

            }, 
			columns : [
					{
						field : 'user_id',
						align : 'center',
						title : '編號',
						valign: 'middle'
					},{
						field : 'tel',
						align : 'center',
						title : '電話',
						valign: 'middle'
					},
					{
						field : 'user_name',
						align : 'center',
						title : '使用者名稱',
						valign: 'middle'
					},{
						field : 'integral_num',
						align : 'center',
						title : '積分',
						valign: 'middle',
						editable: {
	                        type: 'text',
	                        title: '年齡',
	                        validate: function (v) {
	                           if (isNaN(v)) return '年齡必須是數字';
	                           var age = parseInt(v);
	                           if (age <= 0) return '年齡必須是正整數';
	                       }
	                   }
 

					},{
						field : 'register_time',
						align : 'center',
						title : '註冊時間',
						valign: 'middle'
					},{
						title : '操作',
						field : 'user_id',
						align : 'center',
						formatter : function(value, row, index) {
							var e = '<button class="btn btn-default" onclick="edit(\''+ index + '\')">獎勵積分</button>';
							return e ;
						},
						valign: 'middle'
					} ],
				formatLoadingMessage: function () {  
				    return "請稍等，正在載入中...";  
				}, 
				formatNoMatches: function () {  //沒有匹配的結果  
				    return '<img style="width:100px" src="#(basePath)/page/img/noContent.png">';  
				},
				onLoadError: function (data) {  
				    $('#tb_user').bootstrapTable('removeAll');  
				},  
		});
	}
	//請求服務資料時所傳引數
	function queryParams(params){
	    return {
	        pageSize : params.limit, //每一頁的資料行數，預設是上面設定的10(pageSize)
	        pageIndex : params.offset/params.limit+1, //當前頁面,預設是上面設定的1(pageNumber)
	        condition : $("#condition").val(),//條件輸入框的條件
	        //param : "Your Param" //這裡是其他的引數，根據自己的需求定義，可以是多個
	    }
	}
	
	//請求成功方法
	function responseHandler(result){
	    //如果沒有錯誤則返回資料，渲染表格
	    return {
	        total : result.totalRow, //總頁數,前面的key必須為"total"
	        rows : result.list //行資料，前面的key要與之前設定的dataField的值一致.
	    };
	}