Spring MVC下bootstraptable的表格之行数据编辑及删除-2

上一篇讲了表格怎么展示数据，这一篇讲述下怎么编辑行数据及删除行数据，本文中实现的不是每一行数据后边跟着操作按钮，而是选择哪一行编辑哪一行，下面是工具栏的展示，工具栏的展示在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" οnclick="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" οnsubmit="">
	    <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" οnclick="editSave()">保存信息</button>
	                <!--  <button type="button" class="btn btn-default" data-dismiss="modal" οnclick="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;
}
	

本文中只展示修改的例子，删除也是同样的道理。