[社区版pycharm+Django+bootstrap-table]行内表格实现编辑

1.表格数据初始化。因为业务需求且暂时还没链接数据库，就导入了静态数据。

导入静态json数据方法很简单：

方法1：先写好一个json文件，因为社区版pycharm不能添加新的json文件，我就用vscode写了文件导入到django项目文件--静态文件（staic）中

目录如下：

把locaodata.js通过script导入到所需要的html文件中

<script type="text/javascript" src="static/js/localdata.js"></script>

在table里面直接使用静态数据即可

$('#tableid').bootstrapTable({
   url:'static/js/localdata.js',
    cache: false,
    clickEdit: true,//可编辑
    columns: [
        { field: 'stage',align: 'center', title: '生产阶段数目',edit:'text'},
        { field: 'melt', align: 'center',title: '炉次总数' },
        { field: 'LAmax', align: 'center',title: '中间包最大寿命' }
    ]

)}

方法2 ：在表格渲染时，直接给data赋值一组json数据（这种方法仅用于数据量比较小，功能简单），如下：

$('#tabid').bootstrapTable({
    columns: [
        { field: 'id1',align: 'center', title: 'id1'},
        { field: 'id2',align: 'center', title: 'id2'},
        { field: 'id3',align: 'center', title: 'id3'},
        { field: 'id4',align: 'center', title: 'id4'}
    ],
    data:[{"id1": 20, "id2":20, "id3": 0.8,"id4":0.4}]'
})

 

2.在$table的函数中使用bootstrap-table中的行内编辑功能

 onClickCell: function(field, value, row, $element) {
            $element.attr('contenteditable', true);
            $element.blur(function() {
                let index = $element.parent().data('index');
                let tdValue = $element.html();

              //更新 行内数据

               $("#tableid").bootstrapTable('updateCell',

                { index: index, //行索引

                  field: field, //列名

                  value: tdValue //cell值 })

            })
        }

实现原理是：通过bootstrap table自带的 onClickCell 方法，点击 td 添加 contenteditable 属性(ps: 使元素可编辑),于是 td 元素具有了类似于文本框的 focus 和 blur 事件，用户点击 td 获取焦点，编辑完内容失去焦点后，调用 updateCell方法更新单元格数据。

如果需要获取表格内所有数据，则可使用

var data =$('#tableid').bootstrapTable('getData')