bootstrapTable 修改单元格

yzhSWJ

已于 2023-01-27 14:01:11 修改

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 服务器开发语言

于 2022-06-19 11:17:35 首次发布

本文链接：https://blog.youkuaiyun.com/yuzheh521/article/details/125355919

js 专栏收录该内容

57 篇文章

订阅专栏

这段代码展示了如何在网页中使用BootstrapTable插件来加载、分页和编辑表格数据。通过设置不同的参数，如method、pagination、onClickCell等，实现了与服务器的交互和单元格内容的编辑功能。点击单元格时，内容变为可编辑，并在失去焦点时调用resetAmount函数更新单元格值。

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

bootstrap table load加载数据到表格的方法 - itxst.com

function load() {
    $('#exampleTable')
        .bootstrapTable(
            {
                method: 'get', // 服务器数据的请求方式 get or post
                data: [], // 服务器数据的加载地址
                //	showRefresh : true,
                //	showToggle : true,
                //	showColumns : true,
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                // dataType: "json", // 服务器返回的数据类型
                pagination: true, // 设置为true会在底部显示分页条
                // queryParamsType : "limit",
                // //设置为limit则会发送符合RESTFull格式的参数
                singleSelect: false, // 设置为true将禁止多选
                // contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageSize: 10, // 如果设置了分页，每页数据条数
                pageNumber: 1, // 如果设置了分布，首页页码
                //search : true, // 是否显示搜索框
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                sidePagination: "client", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                queryParams: function (params) {
                    return {
                        //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        limit: params.limit,
                        offset: params.offset,
                        // name:$('#searchName').val(),
                        // username:$('#searchName').val()
                    };
                },
              
                onClickCell: function (field, value, row, $element) {
                    //修改单元格
                    $element.attr('contenteditable', true);
                    $element.blur(function () {
                        let index = $element.parent().data('index');
                        let tdValue = $element.html();
                        resetAmount(index, field, tdValue)
                        // saveData(index, field, tdValue);
                    })
                },

                // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                // queryParamsType = 'limit' ,返回参数必须包含
                // limit, offset, search, sort, order 否则, 需要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false将会终止请求
                columns: [

                   
                ]
            });
}


function resetAmount(index, field, tdValue) {
    //更新单元格
    $('#exampleTable').bootstrapTable('updateCell', {
        index: index,
        field: field,
        value: tdValue
    })
   


}