文档章节

十五、bootstrap-table editable

ssshen
 ssshen
发布于 2017/09/20 16:26
字数 570
阅读 33
收藏 0

使用表格的时候,避免不了增删改查,下面就把自己使用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

© 著作权归作者所有

ssshen
粉丝 2
博文 34
码字总数 12481
作品 0
海淀
程序员
私信 提问
纯前端页面的周报

前言背景 领导的需求是随机的,周报的格式是也是多变的,自己抽时间拼拼凑凑一个自己填写的html模板,然后生成excel表格 因为不是前端人员,所以页面的内容也是网上搜索的现成的框架来完成,...

HelloEric
2016/09/21
246
0
前台报错Uncaught TypeError: Cannot read property 'template' of undefined,是我少引用哪个包了么?

Document insertRow getTableData 这个是少了包了么?

爱好
2018/11/22
14
0
bootstrap-table教程演示

Bootstrap Admin 效果展示 Table of contents Create Remove Update Export Tree Create 相关插件 bootstrap-validator 演示 Remove 相关插件 bootstrap-multiselect bootstrap-table 演示 ......

seltonzyf
2018/06/21
0
0
可考虑在你下一个项目中使用的 50 个 Bootstrap 插件

可考虑在你下一个项目中使用的 50 个 Bootstrap 插件 作者 jopen 2014-11-12 09:54:16 阅读目录 1. Bootstrap Multiselect 2. Bootstrap Dialog 3. Bootstrap Confirmation 4. Bootstrap Ta......

~少司命~
2015/08/17
0
0
50 个 Bootstrap 插件

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 本文向你推荐 50...

老朱教授
2017/10/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

进程命令pstree

命令pstree 源软件: psmisc 名称缩写: processes tree 用途: 显示进程树 语法: ]# pstree [选项] 选项: -a, --arguments 显示每个程序的完整指令,包含路径,参数或是常驻服...

迷失De挣扎
12分钟前
0
0
微服务高可用方案

微服务高可用方案 一、微服务的高可用 在注册中心、配置中心高可用方案之前,了解一下注册中心的工作原理,下面分为两个部分来解释,一是注册中心和各个微服务的注册表的获取与同步,二是注册...

遗失的拂晓
24分钟前
0
0
聊聊spring cloud的CachingSpringLoadBalancerFactory

序 本文主要研究一下spring cloud的CachingSpringLoadBalancerFactory CachingSpringLoadBalancerFactory spring-cloud-openfeign-core-2.2.0.M1-sources.jar!/org/springframework/cloud/o......

go4it
29分钟前
0
0
一篇文章搞定——JDK8中新增的StampedLock

一、StampedLock类简介 StampedLock类,在JDK1.8时引入,是对读写锁ReentrantReadWriteLock的增强,该类提供了一些功能,优化了读锁、写锁的访问,同时使读写锁之间可以互相转换,更细粒度控...

须臾之余
30分钟前
1
0
Android Camera原理之CameraDeviceCallbacks回调模块

在讲解《Android Camera原理之openCamera模块(二)》一文的时候提到了CameraDeviceCallbacks回调,当时没有详细展开,本文我们详细展开讲解一下。 CameraDeviceCallbacks生成过程: 《Android...

天王盖地虎626
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部