前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >python测试开发django-163.bootstrap-table 表格单元格行内编辑

python测试开发django-163.bootstrap-table 表格单元格行内编辑

作者头像
上海-悠悠
发布2021-11-05 10:11:26
2K0
发布2021-11-05 10:11:26
举报
文章被收录于专栏:从零开始学自动化测试

前言

bootstrap-table 表格行内编辑网上很多资料都是用第三方bootstrap-table-editable.js和x-editable.js实现,不喜欢折腾的用插件实现最快。 我想要的需求其实很简单,直接点击表格编辑就行,不需要太多复杂的功能,官方文档上给的资料少的可怜,这方面的资料网上查阅了很多,总结来说很乱,没注释,代码不全,并且还有一些BUG。 于是花了3个晚上,头发掉了一大串,现在终于弄清楚了,整个的实现方式。

table表格

html代码很简单,点个添加一行的按钮,一个提交按钮

代码语言:javascript
复制
<div>
  <div>
      <input onclick="add_row('table')" type="button" class="btn btn-info" value="+ 添加">
  </div>
  <table id="table" class="table"></table>
  <div>
      <input id="save" type="button" class="btn btn-info" value="点我提交">
  </div>
</div>

bootstrap-table 表格初始化

代码语言:javascript
复制
<script>
// 操作事件在前面设置
window.operateEvents = {
    'click #rowDel': function (e, value, row, index) {
        $('#table').bootstrapTable('remove', {
            field: 'id',
            values: [row.id]
        });
    }
};
// 设置列
var columns = [
        {
            checkbox: true,
            visible: true               //是否显示复选框
        },
        {
            field: 'key',
            title: 'Key',
            formatter: function (value, row, index) {
                        return '<input style="font-size:24px; line-height:33px; height: 100%; width:100%; overflow: hidden; border: none" type="text" id="key' +index + '" value="'+value+ '" >';
                    },
            // 设置表格样式,输入文本很长的时候隐藏前面的
            cellStyle: function (value, row, index) {
                        return {
                            css: {
                                "min-width": "100px",
                                "white-space": "nowrap",
                                "text-overflow": "ellipsis",
                                "overflow": "hidden",
                                "max-width": "100px",
                                'padding': '0px'
                            }
                        }
                    }
        },
        {
            field: 'value',
            title: 'Value',
            formatter: function (value, row, index) {
                        return '<input style="font-size:24px; line-height:33px; height: 100%; width:100%; overflow: hidden; border: none" type="text" id="value' +index + '" value="'+value+ '">';
                    },
            cellStyle: function (value, row, index) {
                        return {
                            css: {
                                "min-width": "100px",
                                "white-space": "nowrap",
                                "text-overflow": "ellipsis",
                                "overflow": "hidden",
                                "max-width": "100px",
                                'padding': '0px'
                            }
                        }
                    }
        },
         {
            field: 'button',
            title: '操作',
            width: '20%',
            events: operateEvents,  // 操作事件
            formatter: operateFormatter
        }

];
// 默认显示第一行,空数据
data = [
    {'id': 0, 'key': '', 'value': ''}
];
// table表格配置
$("#table").bootstrapTable({
    cache: false,
    classes: "table table-bordered table-condensed",
    columns: columns,                 //列参数
    data: data,
    onClickCell: function(field, value, row, $element) {
            console.log('000000000000000--------接收点击事件------');
            let index = $element.parent().data('index');    // 获取单元格cell的index
            var cell_id = '#' + field+index;
            console.log(cell_id);
            $cell = $element.find(cell_id);
            console.log('111111111获取焦点-');
            $cell.blur(function(){
                // 输入框失去焦点,保存表格数据
                console.log('失去焦点22222222222222-')
                let newValue = $element.find(cell_id).val();
                console.log('新数据:'+newValue)
                // 更新表格数据到row
                row[field] = newValue
                });
        }
});

再接着定义添加/删除/提交数据功能

代码语言:javascript
复制
// 定义 add_row
function add_row(table_name){
    var tab = '#'+table_name;
    var count = $(tab).bootstrapTable('getData').length;
    // 新增一行数据
    $(tab).bootstrapTable('insertRow',{index:count,row:{'id':count, 'key':'', 'value':''}});
}

// 添加一个删除按钮
function operateFormatter(value, row, index) {
    return [
        '<button type="button" style="margin: 6px;" class="btn btn-xs btn-danger" id="rowDel">删除</button>'
    ].join('');
}

// 点击保存
$('#save').click(function(){
    rows = $("#table").bootstrapTable('getData')
    alert(JSON.stringify(rows))
})

页面效果

实现思路和遇到的坑

最关键代码是onClickCell,单元格的点击事件,点击单元格后,可以给单元格可编辑的属性:$element.attr('contenteditable', true) 代码如下:

代码语言:javascript
复制
onClickCell: function(field, value, row, $element) {
            $element.attr('contenteditable', true);
            $element.blur(function() {
                let index = $element.parent().data('index');
                let tdValue = $element.html();
                $("#table").bootstrapTable('updateCell', {
                    index: index,       //行索引
                    field: field,       //列名
                    value: tdValue        //cell值
                })
            })
        }

这样虽然也实现了单元格可以编辑,但是操作上非常不方便,往往需要点击2-3次单元格才能编辑,这是不能忍的。 于是想到给单元格添加input标签,在输入框编辑,这样实现就方便多了,在columns设置列属性的时候,自定义返回input标签,给每个input标签加一个id属性和value属性

代码语言:javascript
复制
{
            field: 'key',
            title: 'Key',
            formatter: function (value, row, index) {
                        return '<input style="font-size:24px; line-height:33px; height: 100%; width:100%; overflow: hidden; border: none" type="text" id="key' +index + '" value="'+value+ '" >';
                    }

输入框的问题解决了,接下来是保存数据,也是在onClickCell 里面实现,当输入框失去焦点的时候保存:$element.blur

代码语言:javascript
复制
 onClickCell: function(field, value, row, $element) {
            console.log('000000000000000--------接收点击事件------');
            let index = $element.parent().data('index');
            var cell_id = '#' + field+index;
            $cell = $element.find(cell_id);
            console.log('111111111获取焦点-');
            $cell.blur(function(){
            // 输入框失去焦点,保存表格数据
                console.log('失去焦点22222222222222-')
                let newValue = $element.find(cell_id).val();
                console.log('新数据:'+newValue)
                $('#table').bootstrapTable('updateCell', {
                        index: index,
                        field: field,
                        value: newValue
                    });
                });
        }

大部分实现报告更新是 用的上面方式: bootstrapTable('updateCell', )

代码语言:javascript
复制
$('#table').bootstrapTable('updateCell', {
                        index: index,
                        field: field,
                        value: newValue
                    });

在实际测试过程中,会发现在表格内切换编辑的时候,会漏洞一些数据,主要原因在于bootstrapTable('updateCell', )更新数据后, 点击事件没生效,导致从一个表格点到另外一个报告时候,不会有接收点击事件,这样数据就无法正常保存。 于是想到不更新表格,直接更新row的数据,既方便又实用

代码语言:javascript
复制
                // 更新表格数据到row
                row[field] = newValue
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-10-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 从零开始学自动化测试 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • table表格
  • 实现思路和遇到的坑
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档