上一篇講了表格怎麼展示資料，這一篇講述下怎麼編輯行資料及刪除行資料，本文中實現的不是每一行資料後邊跟著操作按鈕，而是選擇哪一行編輯哪一行，下面是工具欄的展示，工具欄的展示在table上方，例子中的工具按鈕採用模態彈框，彈框分別為#edit及#create，btn_edit新增onclick事件的原因是可以把列表的資料帶到彈框上，便於修改。

<div class="panel-body" style="padding-bottom:0px;">
<!--  例子中使用的是client分頁   -->
    <div id="toolbar" class="btn-group">
        <button id="btn_edit" type="button" class="btn btn-default" data-toggle="modal" data-target="#edit" onclick="edit()" >
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default" data-toggle="modal">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
        </button>
        <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#create" >新增資訊</button>
    </div>
    <table id="table" data-sortable="true"></table> 
</div>
 

<!--  修改開始-->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<form id="postUrlForm"method="post" action='<c:url value="/license/edit"/>' class="pageForm required-validate" onsubmit="">
	    <div id="edit" class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	                <h4 class="modal-title" id="myModalLabel">標題</h4>
	            </div>
	            <div style="padding: 100px 100px 1px;">
	            	<div class="input-group">
			            <span class="input-group-addon">id：</span>
			            <input id="idE" type="text" disabled="disabled" class="form-control" >
			        </div>
			        <br>
		            <div class="input-group">
			            <span class="input-group-addon">專案名稱：</span>
			            <input id="projectNameE" type="text" disabled="disabled" class="form-control" >
			        </div>
			        <br>
			         <div class="input-group">
			            <span class="input-group-addon">建立者：</span>
			            <input id="authorE" type="text" class="form-control" >
			        </div>
			        <br>	        
			    </div><!-- style input group-->
	            
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default"  data-dismiss="modal" onclick="editSave()">儲存資訊</button>
	                <!--  <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.close()">關閉</button>-->
	            </div>
	            <span class="input-group-addon"></span>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
    </form>
</div>
 

function edit(){
	var row = $.map($('#table').bootstrapTable('getSelections'),function(row){return row;});//獲取勾選的資料的值
	$("#idE").val(row[0].id);
	$("#projectNameE").val(row[0].projectName);
	$("#authorE").val(row[0].author);
}//function的作用是獲取勾選的那一行的資料中的資料的值，idE、projectNameE、authorE對應修改彈框上的值

//editSave會將修改的資料post到後臺，後臺進行資料的查詢判斷
function editSave(){
    $.ajax({
    		url:"license/edit",
		    type:"POST",
		    data:{
		        	id:$("#idE").val(),	
		    		projectName:$("#projectNameE").val(),
		        	author:$("#authorE").val(),
		        	},
		     dataType:"json"
    }).done(function(data){ 
    	alert(JSON.stringify(data));
    	if(JSON.stringify(data)=="{\"警告\":\"修改成功\"}"){
    		$("#idE").val()
        	$("#projectNameE").val("");
        	$("#authorE").val("");
    	} //收到伺服器的返回修改成功的json資料後，清除input中的資料
    }
    );
}
 

後臺接收程式碼如下，收到的資料將通過updateLicense(entity),呼叫mapper存入資料庫，此處的entity是封裝了一個要存的資訊的類，類中有set和get方法：

@RequestMapping(value = "/license/edit",method = RequestMethod.POST)
@ResponseBody
public JSONObject editLicense(HttpServletRequest request){

    String id = request.getParameter("id");
    String projectName = request.getParameter("projectName");
    String author = request.getParameter("author");
    LicenseEntity entity = new LicenseEntity();
    entity.setId(id);
    entity.setProjectName(projectName);
    entity.setAuthor(author);
    result = "修改成功".toString();
    licenseService.updateLicense(entity);
    String data = "{\"警告\":\""+result+"\"}";
    //json必須符合格式{"dd":"dd"}
    System.err.println(data);
    JSONObject json = JSONObject.parseObject(data); 
    return json;
}