bootstrap-table的使用（5）--實現關聯數據庫的內容的刪除、修改等功能

關聯數據庫，在之前已經提過，不重複了。其實原理上還是一樣的，傳遞參數到servlet，然後執行數據庫查詢操作，然後將數據集整理成json，返回到表格中並顯示。
需要關注的幾個重點內容爲：
1、在表格中實現內容的鏈接，使點擊後能傳遞參數至servlet。
2、實現點擊表格中的某一處，實現彈框，並且將表格中該行內容顯示到彈框中。

一、表格中實現鏈接

重點關注bootstrap-table中的formatter: operateFormatter，這一參數設置，指定了該單元格內的內容通過operateFormatter函數實現。

	var TableInit=function(){
	    var oTableInit = new Object();
	    oTableInit.Init=function(){
			$('#reportTable').bootstrapTable({
				method: 'get',
				url: "<c:url value='/IP_IndexServlet?act="+state+"&&mIP="+mIP+"&&start="+StartSearch+"&&end="+EndSearch+"'/>", //獲取數據的Servlet地址
	            queryParams: function queryParams(params) {   //設置查詢參數              
	            	var param = {                    
	            		pageNumber: params.pageNumber,                    
	            		pageSize: params.pageSize,                              
	            		};                
	            return param;                            
	            },

				cache: false,
				//height: 750, 
				striped: true,
				pagination: true, 
				silent: true, //以靜默方式刷新數據
				toolbar:"#toolbar",
				locale:"zh-US", //表格漢化
				sidePagination: "client",
				pageSize: 10,
				pageNumber:1,
				pageList: [10, 14,15, 16, 18,20],
				search: true,
				showColumns: true,
				showRefresh: true,
				showExport: true,
				exportDataType: 'all', 
				clickToSelect: true,
				exportTypes:[ 'excel','xlsx','doc','csv', 'txt', 'sql' ],
                exportOptions:{  
                    //ignoreColumn: [12,14],            //忽略某一列的索引  
                    fileName: '數據導出',              //文件名稱設置  
                    worksheetName: 'Sheet1',          //表格工作區名稱  
                    tableName: 'IP數據表',  
                    excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],  
                    //onMsoNumberFormat: DoOnMsoNumberFormat  
                },
	            columns : [{
	                field : '序號',
	                title : '序號'
	            }, {
	                field : '類型',
	                title : '類型'
	            }, {
	                field : '品牌',
	                title : '品牌'
	            }, {
	                field : '操作系統',
	                title : '操作系統'
	            }, {
	                field : 'IP地址',
	                title : 'IP地址'
	            }, {
	                field : 'MAC地址',
	                title : 'MAC地址'
	            }, {
	                field : '責任單位',
	                title : '責任單位'
	            }, {
	                field : '責任人',
	                title : '責任人'
	            }, {
	                field : '用戶名',
	                title : '用戶名'
	            }, {
	                field : '密碼',
	                title : '密碼'
	            }, {
	                field : '接入地點',
	                title : '接入地點'
	            }, {
	                field : '最後修改時間',
	                title : '最後修改時間'
	            }, {
	                field : '是否分配',
	                title : '是否分配'
	            }, {
	                field : '備註',
	                title : '用途'
	            },{
	            	field: 'operate',
	            	title: '操作',
	            	align: 'center',
	            	events: operateEvents,//給按鈕註冊事件，
	            	formatter: operateFormatter
	            }],
                responseHandler: function (res) {
                    return{                            //return bootstrap-table能處理的數據格式
                        "total":res.total,
                        "rows":res.rows
                    }
                },
			});
			//隱藏正在加載
			//$('#reportTable').bootstrapTable('hideLoading');
	    };
	    oTableInit.destroy=function(){
	        $("#reportTable").bootstrapTable('destroy');
	    }
	    return oTableInit;
	}
	var oTable = new TableInit();
	oTable.destroy();
	oTable.Init();
	
	//單元格中的內容，顯示其中有兩個鏈接，一個id是edit，一個id是del，點擊del時，會跳轉到servlet，並攜帶相應參數，在servlet中實現指定主鍵值的數據的刪除操作。
	function operateFormatter(value, row, index) {
		return [
			        "<a id='edit' class='fa fa-edit' href='#'></a>",
			        "<a id='del' style='margin-left: 20px' class='fa fa-close ' href='IP_IndexServlet?act=del&&userid="+row.主鍵值+"' οnclick='javascript:return p_del()'></a>"
		     ].join('');
		 }

servlet中的內容我不加贅述，在前面已經提到過，至於數據庫的查詢內容，不是重點，也不多說。

二、點擊彈框，並自動填充內容

關注bootstrap-table中的events: operateEvents,參數，指定了一些點擊按鈕時的函數動作。

	window.operateEvents = {
			//點擊id爲edit的鏈接時，執行該函數，將表格行中指定的列名的內容，填充到彈出框中指定id的內容中去。
	        'click #edit': function (e, value, row, index) {
		           $("#userid").attr("value",row.序號); 
		           $("#LX").attr("value",row.類型);
		           $("#PP").attr("value",row.品牌);
		           $("#CZXT").attr("value",row.操作系統);
		           $("#mIP").attr("value",row.IP地址);
		           $("#MACDZ").attr("value",row.MAC地址);
		           $("#ZRDW").attr("value",row.責任單位);
		           $("#ZRR").attr("value",row.責任人);
		           $("#YHM").attr("value",row.用戶名);
		           $("#MM").attr("value",row.密碼);
		           $("#JRDD").attr("value",row.接入地點);
		           $("#ZHXGSJ").attr("value",row.最後修改時間);
		           $("#SFFP").val(row.是否分配);
		           $("#BZ").attr("value",row.備註);
		           
		           $('#mod_IP_Info').modal('show');
	         }
	       };