使用表格的時候，避免不了增刪改查，下面就把自己使用bootstrap-table editable的過程記錄一下
第一步，下載
bootstrap-editable.css v1.5.1
bootstrap-editable.min.js v1.5.1
bootstrap-table-editable.js
當然jquery和bootstrap的js和css都是必須的
第二步，html中添加引用
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/bootstrap-table.css">
<link rel="stylesheet" href="/static/css/bootstrap-editable.css">
<link rel="stylesheet" href="/static/css/jquery-ui.css">
<link rel="stylesheet" href="/static/css/select2.min.css">
<link rel="stylesheet" href="/static/css/style.css">
<!-- http://stackoverflow.com/questions/28566672/is-not-defined-in-firefox -->
<script type="text/javascript" src="/static/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui.js"></script>
<script type="text/javascript" src="/static/js/select2.full.js"></script>
<script type="text/javascript" src="/static/js/json2.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table-editable.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-table-export.js"></script>
<script type="text/javascript" src="/static/js/tableExport.js"></script>
</head>
<body>
<table id="show_product" class="table table-no-bordered">
</table>
</body>第三步，編寫js
$('#show_product').bootstrapTable({
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*）
pagination: false, //是否顯示分頁（*）
sortable: true, //是否啓用排序
sortOrder: "asc", //排序方式
sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
clickToSelect: false,
showExport: true, //是否顯示導出
exportDataType: "selected", //basic', 'all', 'selected'.
columns: [{ checkbox: true }, {
field: "id",
title: 'Id',
visible: false
}, {
field: "name",
title: '名稱'
}, {
field: "shortName",
title: '簡稱'
}, {
field: "barCode",
title: '一維碼',
editable: {
type: 'text',
mode: 'inline'//直接在所在行編輯，不彈出
},
sortable: true
}, {
field: "remark",
title: '備註'
}, ],
onEditableSave: function(field, row, oldValue, $el) {
var newValue = row[field];//不能使用row.field
if (!checkStrEqual(oldValue, newValue)) {
$.ajax({
type: "post",
url: "/edit",
data: {
'type': 'product',
'id': row.id,//獲得所在行指定列的值
'newValue': newValue,
'field': field,
'oldValue':oldValue
},
success: function(data, status) {
if (status == "success") {
alert("編輯成功");
}
},
error: function() {
alert("Error");
},
complete: function() {
}
});
}
}
});第四步，python後端
class UpdateHandler(BasicWithOperateDBHandler):
'''
編輯信息
'''
def post(self):
typee = self.get_argument("type")
tableId = self.get_argument("id")
field = self.get_argument("field")
oldValue = self.get_argument("oldValue")
newValue = self.get_argument("newValue")
try:
if typee == 'product':
self.odb.executeSql(allSQL.updateProduct % (field, newValue, tableId))
self.write({'status':'success'})
except:
traceback.print_exc()
self.write({'status':'failed'})引用的文章：
bootstrap-table editable例子：https://github.com/wenzhixin/bootstrap-table/blob/master/src/extensions/editable/README.md#events
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
http://www.cnblogs.com/landeanfen/p/5005367.html
https://windcoder.com/ziyongchajianzhenglizhibiaogebootstrap-table