BootstrapTable 行内编辑解决方案

最新推荐文章于 2025-06-03 09:10:05 发布

原创最新推荐文章于 2025-06-03 09:10:05 发布 · 1.7k 阅读

6 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用BootstrapTable插件实现数据表格的编辑和新增功能，包括通过点击行进行编辑，利用模态框添加数据，以及如何通过JavaScript操作表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般来说，采用bootstrap table，添加和修改数据都是通过弹出模态框来实现的，

但是现在遇见了一个点击行来实现编辑和新增的需求

html代码：

<div class="panel-body" style="padding-bottom: 0px;">

<div id="toolbar" style="margin-left: 15px;">
           <button id="button" class="btn btn-default">insertRow</button>//插入一行
           <button id="getTableData" class="btn btn-default">getTableData</button>//获取全部数据
       </div>
       <table id="getzxsjsz" data-mobile-responsive="false"></table>//表格展示
   </div>

js代码：

var name = '';// 登陆用户姓名

window.onload = PageReady;
function PageReady() {

    // 1.初始化Table
    var oTable = new TableInit();
    oTable.Init()；

   //定义
    let $table = $('#getzxsjsz');
    let $button = $('#button');
    let $getTableData = $('#getTableData');

    $button.click(function() {
        $('#getzxsjsz').bootstrapTable('insertRow', {
            index: 0,
            row: {
                zxlx: '',
                sbsj: '',
                xbsj: '',
                wxkssj: '',
                wxjssj: '',
                cz:''
            }
        });
    });

    $getTableData.click(function() {
        alert(JSON.stringify($table.bootstrapTable('getData')));
    });

}

// 查询作息时间
var TableInit = function() {
    var oTableInit = new Object();
    // 初始化Table
    oTableInit.Init = function() {
        getCqlData();
    };

    // 得到查询的参数
    oTableInit.queryParams = function(params) {
        var temp = { // 这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit : params.limit, // 页面大小
            offset : params.offset, // 页码
        };
        return temp;
    };
    return oTableInit;
};

// 获取数据
function getCqlData(){
    $('#getzxsjsz')
    .bootstrapTable(
            {
                url : '../ajaxjsp/zxsjsz_json.jsp?type=getzxsjsz', // 请求后台的URL（*）
                toolbar : '#toolbar', // 工具按钮用哪个容器
                striped : true, // 是否显示行间隔色
                cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination : true, // 是否显示分页（*）
                sortable : false, // 是否启用排序
                sortOrder : "asc", // 排序方式
                // queryParams : oTableInit.queryParams,// 传递参数（*）
                sidePagination : "client", // 分页方式：client客户端分页，server服务端分页（*）
                pageNumber : 1, // 初始化加载第一页，默认第一页
                pageSize : 10, // 每页的记录行数（*）
                pageList : [ 10, 25, 50, 100 ], // 可供选择的每页的行数（*）
                search : false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch : true,
                showExport: true,   // 是否显示导出
                // exportTypes:['excel','xlsx'], //导出类型
                exportOptions : {
                    fileName : document.title
                },
                exportDataType: "all",              // basic', 'all',
                                                    // 'selected'.
                showColumns : true, // 是否显示所有的列
                showRefresh : true, // 是否显示刷新按钮
                minimumCountColumns : 2, // 最少允许的列数
                clickToSelect : false, // 是否启用点击选中行
                height : '', // 行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId : "", // 每一行的唯一标识，一般为主键列
                showToggle : true, // 是否显示详细视图和列表视图的切换按钮
                cardView : false, // 是否显示详细视图
                detailView : false, // 是否显示父子表
                //fixedColumns : true,
                //fixedNumber : 1,//固定列数
                columns :     [/*{
                    field : 'zxlx',
                    title : '作息类型',
                    align: 'center',
                    width: 180
                }, */{
                    field : 'sbsj',
                    title : '上班时间',
                    align: 'center'
                }, {
                    field : 'xbsj',
                    title : '下班时间',
                    align: 'center'
                }, {
                    field : 'wxkssj',
                    title : '午休开始时间',
                    align: 'center'
                }, {
                    field : 'wxjssj',
                    title : '午休结束时间',
                    align: 'center'
                }] ,

//双击单元格修改数据
                  onClickCell: function(field, value, row, $element) {
                        $element.attr('contenteditable', true);
                        $element.blur(function() {
                            let index = $element.parent().data('index');
                            let tdValue = $element.html();
                          // alert(row.zxlx);
                            saveData(index, field, tdValue , row.zxlx);
                        })
                    }
            });

}

//保存数据
function saveData(index, field, value, zxlx) {
    //刷新页面数据
    $('#getzxsjsz').bootstrapTable('updateCell', {
        index: index,       //行索引
        field: field,       //列名
        value: value        //cell值
    });
    var allTableData = $('#getzxsjsz').bootstrapTable('getData');
//后台处理
    loginData({
        type : "UpdateZxsj",
        zxlx : encodeURI(zxlx),
        field : encodeURI(field),
        value : encodeURI(value),
        callback : "backfillData"
    }, false, "/zxsjsz_json.jsp");
}

function backfillData(data){
    if(data>0){ //表示修改成功
        Search(); //刷新列表
    }
}

// 查询
function Search() {
    var param = {
            url : '../ajaxjsp/zxsjsz_json.jsp?type=getzxsjsz'
         }
    $('#getzxsjsz').bootstrapTable('refresh',param);
}