bootstrap table 中自定义新增操作

对table新增数据还是挺简单的，也不需要去操作table，只要将数据插入数据库，然后再将数据返给table就行了。而修改和删除则稍微麻烦一点，需要先获取到所选的行，然后再对数据进行更新。

效果图如下：

html代码，这里仅仅定义了三个按钮和一个table标签，其中table标签就是用来展示数据用的

<div class="panel panel-default">
<divclass="panel-body">
<divid="toolbar"class="btn-group">
<buttonid="btn_add"type="button"class="btn btn-default">
<spanclass="glyphicon glyphicon-plus"aria-hidden="true"></span>新增
</button>
<buttonid="btn_edit"type="button"class="btn btn-default"disabled="true">
<spanclass="glyphicon glyphicon-pencil"aria-hidden="true"></span>修改
</button>
<buttonid="btn_delete"type="button"class="btn btn-default"disabled="true">
<spanclass="glyphicon glyphicon-remove"aria-hidden="true"></span>删除
</button>
</div>
<tableid="data_info"></table>
</div>
</div>

新增模态框代码

<div class="modal fade"id="addModal"tabindex="-1"role="dialog"aria-labelledby="addModalLabel"data-backdrop="false">
<div class="modal-dialog"role="document"style="margin-top:10%;">
<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="addModalLabel">添加配置信息</h4>
</div>
<div class="modal-body">

<form id="add_form_modal"class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="add_interface_name">子系统名</label>
</div>

<div class="col-sm-9">
<input type="text"name="interface_name"class="form-control"id="add_interface_name">
</div>
<label class="err-info-modal"></label>
</div>

<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="add_port">端口号</label>
</div>

<div class="col-sm-9">
<input type="text"name="add_port"class="form-control"id="add_port">
</div>
</div>

<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="add_URL">URL</label>
</div>

<div class="col-sm-9">
<input type="text"name="add_URL"class="form-control"id="add_URL">
</div>
<label class="err-info-modal"></label>
</div>

<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="res_status">检测值</label>
</div>

<div class="col-sm-9">
<input type="text"name="res_status"class="form-control"id="res_status">
</div>
</div>

<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="add_alarm_interval">报警间隔</label>
</div>

<div class="col-sm-9">
<input type="text"name="add_alarm_interval"class="form-control"id="add_alarm_interval">
</div>
<div class="remarks"><p>单位：分钟</p></div>
</div>

<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="add_fail_times">失败次数</label>
</div>

<div class="col-sm-9">
<input type="text"name="add_fail_times"class="form-control"id="add_fail_times">
</div>
</div>

<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="contacts_email">报警联系人</label>
</div>

<div class="col-sm-9">
<input type="text"name="contacts_email"class="form-control"id="contacts_email">
</div>
<div class="remarks"><p>多个联系人邮箱请使用逗号(,)分隔</p></div>
</div>

<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="contacts_phone">报警电话</label>
</div>

<div class="col-sm-9">
<input type="text"name="contacts_phone"class="form-control"id="contacts_phone">
</div>
<div class="remarks"><p>多个报警电话请使用逗号(,)分隔</p></div>
</div>

<div class="form-group">
<div class="col-sm-3">
<label class="control-label"for="add_use_flag">状态</label>
</div>
<div class="col-sm-9">
<textarea name="add_use_flag"class="form-control"id="add_use_flag"></textarea>
</div>
<div class="remarks"><p>True：启用，False：禁用</p></div>
<label class="err-info-modal"></label>
</div>
</form>

<div class="modal-footer">
<button type="button"class="btn btn-default btn_reset_c"data-dismiss="modal"><span
class="glyphicon glyphicon-remove"aria-hidden="true"></span>取消
</button>

<button type="button"id="btn_add_reset"class="btn btn-default btn_reset_c">
<span class="glyphicon glyphicon-share-alt"aria-hidden="true"></span>重置
</button>

<button type="button"id="btn_add_submit"class="btn btn-primary"data-dismiss="modal"><span
class="glyphicon glyphicon-floppy-disk"aria-hidden="true"></span>保存
</button>
</div>
</div>
</div>
</div>
</div>

新增的js代码如下：

// 当点击【新增】按钮后，把模态框弹出来
$("#btn_add").on("click",function (){
$("#addModal").modal({
keyboard: true
});
clearForm("#add_form_modal");// 清除表单上一次的输入数据
});

// helper: 重置表单
functionclearForm(form) {
    $(form)[0].reset();
}

// 当点击【保存】按钮后，将表单中的数据提交到后台
$("#btn_add_submit").on("click",function (){

$.ajax({
type: "post",
url: "/dbmonitor/bigdataconfig/insert_interface/",
data: $("#add_form_modal").serializeArray(),              // 收集表单中的数据
dataType: "text",
success: function (d){
show_alert("操作结果", JSON.parse(d).result);
$.getJSON("/dbmonitor/bigdataconfig/bigdata_info/",function(data){
initDataTable("destroy", data);           // 接收到后台返回的数据后，重新渲染table，具体怎么初始化table见上一章
});
}
});
});