bootstrap-table 分頁增刪改查之一（增長 刪除）

先上效果圖

1. 引入js文件 

   <!--js jquery -->
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.0.min.js"></script>
   <!--js bootstrap -->
   <script src="${pageContext.request.contextPath}/bootstrapJs/bootstrap.min.js"></script>
   <!-- js bootstrap-table 分頁插件 --> 
   <script type="text/javascript"src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
   <script src="${pageContext.request.contextPath}/bootstrapJs/table/bootstrap-table-zh-CN.js"></script>
   <!-- js bootstrap-datetimepicker 時間插件 -->
   <script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.min.js"></script>  
   <script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
   <!-- js knockout 增刪改查 插件 --> 
   <script src="https://cdn.bootcss.com/knockout/3.4.0/knockout-min.js"></script>  //必須
   <script src="${pageContext.request.contextPath}/bootstrapJs/knockout/knockout.mapping-latest.js"></script>//必須
   <!-- css -->
   <link href="${pageContext.request.contextPath}/css/bootstrap-table.css"rel="stylesheet" type="text/css" />
   <link href="${pageContext.request.contextPath}/bootstrapCss/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" /> //必須　　

　　2：  有的是彈出一個頁面  有的是彈出在本頁面定義的標籤  看你本身了  我使用的是在本頁面定義  

 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="myModalLabel">收入類目增長</h4>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <label for="txt_departmentname">收入類目名稱</label>
                            <input type="text" name="txt_departmentname" data-bind="value:Name" class="form-control" id="txt_departmentname" placeholder="類目名稱">
                        </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>關閉</button>
                        <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                    </div>
                </div>
            </div>
        </div>
        </div>

　　3： js文件

$(function() {
	//初始化
	operate.operateInit();
});
// 操做
var operate = {
	// 初始化按鈕事件
	operateInit : function() {
		this.operateAdd();
		this.operateUpdate();
		this.operateDelete();
		this.DepartmentModel = {
			id : ko.observable(),  //和標籤中的data-bind  對應
			Name : ko.observable(),
			Level : ko.observable(),
			Des : ko.observable(),
			CreateTime : ko.observable()
		};
	},
	// 新增
	operateAdd : function() {
		$('#btn_add').on(
				"click",
				function() {
					$("#myModal").modal().on(
							"shown.bs.modal",
							function() {
								var oEmptyModel = {
									id : ko.observable(),
									Name : ko.observable(),
									Level : ko.observable(),
									Des : ko.observable(),
									CreateTime : ko.observable()
								};
								ko.utils.extend(operate.DepartmentModel,
										oEmptyModel);
								ko.applyBindings(operate.DepartmentModel,
										document.getElementById("myModal"));
								operate.operateSave();
							}).on('hidden.bs.modal', function() {
						ko.cleanNode(document.getElementById("myModal"));
					});
				});
	},
	// 編輯  修改這裏我沒有作  若是須要的話  把彈出頁面中input中的data-bind中value:name 換成value:你後臺傳來的變量名稱                   
	operateUpdate : function() {
		$('#btn_edit').on(
				"click",
				function() {
					$("#myModal").modal().on(
							"shown.bs.modal",
							function() {
								var arrselectedData = tableInit.myViewModel
										.getSelections();
								if (!operate.operateCheck(arrselectedData)) {
									return;
								}
								// 將選中該行數據有數據Model經過Mapping組件轉換爲viewmodel
								ko.utils.extend(operate.DepartmentModel,
										ko.mapping.fromJS(arrselectedData[0]));
								ko.applyBindings(operate.DepartmentModel,
										document.getElementById("myModal"));
								operate.operateSave();
							}).on('hidden.bs.modal', function() {
						// 關閉彈出框的時候清除綁定(這個清空包括清空綁定和清空註冊事件)
						ko.cleanNode(document.getElementById("myModal"));
					});
				});
	},
	// 刪除
	operateDelete : function() {  //當點擊刪除的時候  會進入這個方法
		$('#btn_delete').on(
				"click",
				function() {
					var arrselectedData = $("#tb_departments").bootstrapTable(
							'getSelections');
					if (arrselectedData.length <= 0) {
						alert("請選中一行");
					} else {
						var b = JSON.stringify(arrselectedData);
						$.ajax({
							url : "/billMaven/categoryDelect",
							type : "post",
							data : {
								"name" : b  //傳輸到後臺的是 json對象 後臺接收後須要轉換成list  而後循環獲取id刪除
							},
							success : function(status) {
								alert(status);
								$("#tb_departments").bootstrapTable('refresh');
							}
						});
					}
				});
	},
	// 保存數據
	operateSave : function() {  //當點擊保存的時候回跳到這個方法
		$('#btn_submit').on("click", function() { 
			// 取到當前的viewmodel
			var oViewModel = operate.DepartmentModel;
			// 將Viewmodel轉換爲數據model
			var oDataModel = ko.toJS(oViewModel);
			if (oDataModel.Name == undefined || oDataModel.Name.trim() == "") {
				alert("類目不能爲空");
			} else {
				var span = $("#span").html();
				$.ajax({
					url : "/billMaven/categorysave",  //url
					type : "post",
					data : {   //參數
						"name" : oDataModel.Name,
						"state" : span
					},
					success : function(status) {
						alert(status);
						$("#tb_departments").bootstrapTable('refresh');
					}
				});
			}
		});
	},
	// 數據校驗
	operateCheck : function(arr) {
		if (arr.length <= 0) {
			alert("請至少選擇一行數據");
			return false;
		}
		if (arr.length > 1) {
			alert("只能編輯一行數據");
			return false;
		}
		return true;
	}
}

　　

引用  http://www.cnblogs.com/landeanfen/p/4976838.html  若是須要看理論的話  能夠去他的博客看一下