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"><spanaria-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"><spanclass="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"><spanclass="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见上一章});}});});