var name = row.name;//取得名称单元格的值
if(reason === 'save') {
var $td = $el.closest('tr').children();
var dataIndex = $($td[0]).find("input").attr("data-index");
//根据名称从数据库中查询已有的介质信息,自动填充到此行后面的单元格中（特殊需求功能，可以不要，但是方便）
name && queryFunction(name, dataIndex);
// $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动
} else if(reason === 'nochange') {
$el.closest('tr').next().find('.editable').editable('show');
data: [],
columns: [
{ field:"checked", checkbox : true },
field: 'name',
title: '名称',
editable: {
type: 'text',
onblur:"submit",
showbuttons:false,
// display: function(value) {
// $(this).text(value + '$');
// },
validate: function (value) {
if ($.trim(value) == '') {
return '名称不能为空!';
},{field: 'direct', title: '带入/带出', editable: {
onblur:"submit", //表示鼠标离开输入框即进行提交保存操作
showbuttons:false, //不显示每个单元格后面的操作按钮
type: 'select',pk: 1,source: [{value: 1, text: '带入'},{value: 2, text: '带出'}],
noeditFormatter: function (value,row,index) {
var result={filed:"direct",value:'带入',class:"badge",
style:"background:#333;padding:5px 10px;"};
return result;
field: 'count',
title: '数量',
editable: {
type: 'text',
onblur:"submit",
showbuttons:false,
noeditFormatter: function (value,row,index) {
var result={filed:"count",value:1};
return result;
validate: function (value) {
if ($.trim(value) == '') {
return '数量不能为空!';
if (!checkNumber(value)) {
return '请输入正整数!';
//根据名称从数据库中查询已有的介质信息
function queryFunction(name, $index){
var params ={
name : name
$.ajax({
url : url,
type : "POST",
data : JSON.stringify(params),
dataType : "json",
contentType : "application/json; charset=UTF-8",
async : true,
success: function (result) {
if(result && result.length > 0) {
var item = result[0];
var data = {checked:'',name: name ? name : '',direct: item.direct ,count: item.count,id:item.id};
$('#mediumTable').bootstrapTable('updateRow',{
index: $index,
row: data
error: function (XMLHttpRequest, errorInfo, exception) {
alert("获取介质失败！");
//添加行按钮操作
$('#addMyMediums').click(function(){
$('#mediumTable').bootstrapTable('selectPage', 1); //跳至第一行
var data = {checked:'', name: '',direct: 1,count: 1}; //按顺序定义新的一行，值为空或者赋默认值
$('#mediumTable').bootstrapTable('prepend', data); //此方法必须定义所有字段。
//删除行按钮操作
$('#delMyMediums').click(function(){
var ids = $.map($('#mediumTable').bootstrapTable('getSelections'),function(row){
return row.checked; //选择以复选框为标识，进行删除
if(ids.length == 0){
alert("请选择要删除的行");
$('#mediumTable').bootstrapTable('remove',{ field : 'checked', values : ids });});
var mediumsData = $('#mediumTable').bootstrapTable('getData');//获取介质表格的所有内容
var trLength = $('#mediumTable').bootstrapTable('getOptions').data.length; //获取介质表格的总行数
由于公司内部项目需要，后台管理系统用的BootstrapTable，但是需求是可以新增列表并且行内编辑，删除，最后做保存提交，网上搜了很多的教程，但是有很多的坑：
1.新增列表或者删除列表的时候会清空所有填过的数据，而且删除或多或少会有问题
2.很多教程都只有简单的ipnut，项目需求是有select选择框的
所以自己结合了网上的教程加上自己的实践，实现了这一效果，下面贴上自己的代码
1.HTML
<div class="table-box" style="margin: 20px;">
一、问题描述：bootstrap table中每行有一个input框，要对每个input进行检查数值是否在1~10之间（可保留小数点后一位）的数值，每次bind事件之前没有解绑事件，造成点击alert事件次数逐次递增，最后死循环
二、解决方案：每次绑定事件之前进行解绑
//判断输入值为1与10之间，可保留小数点一位
$("input[name='Self...
BootStrap作为目前比较流行的一款前端框架，平时开发中也用到的很多，之前在写项目页面用的Bootstrap，数据展示用的BootStrap Table。因为项目需求，需要对表格中某些字段可以直接在表格中编辑保存。
对于BootStrap Table表格内编辑这里整理了两种方法。想了解BootStrap Table的小伙伴可以移步到Bootstrap Table数据表格的使用指南。
第一种方法
通过contenteditable属性设置元素的内容是可编辑。
优点：简单，代码量少。
缺点：由于BootSt
@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes,
一。有框线 table-bordered
<div class="col-sm-12 select-table table-bordered">
<table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap;"></table>
</div&...
bootStrapTable增删改查方法
一：（查）获取表中数据：
var row = $(’#newCustomApplyTable’).bootstrapTable(‘getSelections’);
常用参数：
getData 获取表中所有数据
getSelections 获取表中所有选中数据
getOptions 获取当前表格而非数据，使用rows.data属性值...
要使bootstrap-table实现可编辑，需要配合使用x-editable插件。先在页面上导入必要的css和js文件bootstrap-table demo$(function(){$('#table').bootstrapTable({url:'data.json',columns:[{field: 'id',title: 'ID'},{field: 'name',tit...
