十五、bootstrap-table editable
发布时间：2020-12-17 20:54:09 所属栏目：安全 来源：网络整理
导读：使用表格的时候，避免不了增删改查，下面就把自己使用bootstrap-table editable的过程记录一下 第一步，下载 bootstrap-editable.css v1.5.1 bootstrap-editable.min.js v1.5.1 bootstrap-table-editable.js 当然jquery和bootstrap的js和css都是必须的 第二
|
使用表格的时候，避免不了增删改查，下面就把自己使用bootstrap-table editable的过程记录一下 第二步，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'})
引用的文章： （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |