十五、bootstrap-table editable
2017-09-17 15:32
525 查看
使用表格的时候,避免不了增删改查,下面就把自己使用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中添加引用
第三步,编写js
第四步,python后端
引用的文章:
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
第一步,下载
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
相关文章推荐
- 十五、bootstrap-table editable
- Laravel与bootstrap-editable实现table的行内编辑
- Boostrap-table.js+bootstrap-editable.js增删改查完整案例
- bootstrap-table-editable 小结
- bootstrap-table 中columns中editable type为select默认使用本列数据
- bootstrap--table,select2及x-editable的使用小结
- bootstrap table x-editable select2——带图标的选择
- bootstrapTable editable select empty
- Boostrap-table.js的表格数据可视化 集成bootstrap-editable.js
- JS表格组件BootstrapTable行内编辑解决方案x-editable
- bootstrap-table+spring MVC 入门教程
- JS表格组件神器bootstrap table详解(基础版)
- bootstrap-table的一些基本使用及表内编辑的实现
- ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表
- dul无法加载bootstrap实现unload table/user恢复
- Bootstrap-table 表格计算列的和----总计
- Bootstrap(十五)
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)
- bootstrap editable 动态改变列的编辑状态
- bootstrap-table 搜索框 中文乱码问题解决