十五、bootstrap-table editable

最新推荐文章于 2024-05-25 15:25:44 发布

ssshen14

最新推荐文章于 2024-05-25 15:25:44 发布

阅读量1k

点赞数

分类专栏： python建个网站文章标签： bootstrap bootstrap-table editable

本文链接：https://blog.csdn.net/ssshen14/article/details/78010537

版权

python建个网站专栏收录该内容

20 篇文章 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

ssshen14

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
十五、bootstrap-table editable

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

扫一扫

专栏目录