BootStrapTable的基础使用

BootStrapTable是通过表格对象进行增删改的,当我们对表格的数据进行了修改之后,需要将修改之后的数据保存到表格对象中,否则操作失效

HTML

<button id="addBtn" onclick="addRow()">新追加一行</button>
<table id="table" data-toggle="table" style="width: 1120px;">
    <thead>
        <tr>
            <!-- 
                data-visible="false": 指定该栏不可见
                class="readonly-column": 指定该列只读
             -->
            <th colspan="1" class="readonly-column" data-field="id" data-visible="false">id</th>
            <!-- data-field="titile1": 用于绑定数据 -->
            <th colspan="1" data-field="titile1" data-align="center" data-valign="middle"
                data-halign="center">标题checkbox</th>
            <!-- data-align="center" data-valign="middle" data-halign="center": 用于指定对齐位置 -->
            <th colspan="1" data-field="titile2" data-align="center" data-valign="middle" data-halign="center">标题测试</th>
            <th colspan="1" data-field="titile3" data-align="center" data-valign="middle"
                data-halign="center">文件上传</th>
            <th colspan="1" data-field="titile4" data-align="center" data-valign="middle"
                data-halign="center">标题4</th>
            <!-- 因为删除是一个按钮,所以并没有属性可以绑定,设置为空即可 -->
            <th colspan="1" data-field="" data-align="center" data-valign="middle"
                data-halign="center">删除</th>
        </tr>
    </thead>
</table>
<hr>
<button id="getDataFromTable" onclick="getAllDataFromTable()">获取表格中的数据</button>

JavaScript

// 初始化三条向表格中插入的空数据
const tableData = Array.from({length: 3}, (item, index) => ({
    id: index + 1,
    titile1: "",
    titile2: "",
    titile3: "",
    titile4: ""
}));
// 向表格中初始化数据
$('#table').bootstrapTable('load', tableData);

// 通过js对表格进行初始化
$('#table').bootstrapTable({
  // 指定当前表格每一行的唯一标识为id(表格中的每一行都有一个隐藏项目栏id)
  uniqueId: "id",
  // 指定表格的宽和高
  height: 300,
  width: 400,
  columns: [{
        // id,因为我们设置id为不可见,所以此处初始化一个空对象用来占位
    }, {
        // 标题checkbox
        width : 60,
        formatter: function(value, row, index) {
            /*
                1. 当value的值为1的时候,设置checkbox为选中状态,否则为非选中状态
                2. 当我们在勾选表格中的checkbox的时候,会触发onchange事件,将checkbox的选中状态保存到BootStrapTable对象中
                3. ${value === 1 ? checked='checked' : ''}的是必须的,
                   否则当我们新追加一行的时候,虽然BootStrapTable中的选中状态值不会丢失,但无法在画面上显示选中状态
            */
            `<input type="checkbox" name='titile1' ${value === 1 ? checked='checked' : ''} 
                οnchange='saveCheckBoxCondition(${index}, this)' />`;
        }
    }, {
        // 标题测试
        width : 150,
        formatter: function(value, row, index) {
            // ES6的新语法,当value的值为null或者undefined的时候,返回空字符串
            return value ?? "";
        }
    },{
        // 文件上传
        width : 180,
        formatter: function (value, row, index) {
            /*
                因为我们我们要从input对象中获取出上传的文件对象,因此给每一个input文件输入框都指定唯一的id
                通过该id来特定出唯一的input对象
            */
            return `<input id='file_${index}' type='file' οnchange='fileChange(${index});`
        }
    }, {
        // 标题4
        width: 150,
        formatter: function (value, row, index) {
            /*
                1. value="${value == null ? '' : value}"的设置是必须的,否则但我们新追加一行后,
                原先输入的值并不会显示在输入库中
                2. 当我们输入的时候,会触发onchange事件,从而将输入的数据保存到BootStrapTable对象中
            */
            return `
                <input type="text" name="titile4" maxLength="32" 
                    οnchange='saveContentToBTable(${index}, this)'
                    class="form-control" value="${value == null ? '' : value}" />
            `;
        }
    }, {
        // 删除
        width: 150,
        formatter: function (value, row, index) {
            // 我们为表格中的每一行都指定了唯一的id,因此可以通过row行对象进行获取
            return `
                <button type='button' οnclick='removeRow("${row.id}")'>删除</button>
            `;
        }
    }]
});

/*
    将checkbox的状态保存到BootstrapTable对象中
        index: 当前表格所在的行
        obj: 当前操作的input的DOM对象
*/
function saveCheckBoxCondition(index, obj) {
    // 获取出当前input的name属性值
    let name = $(obj).attr('name');
    // 根据index获取出当前表格的行对象
    let row = $(`#table`).bootstrapTable('getData')[index];
    // 将checkbox的选中状态保存到行对象中
    row[name] = $(obj).prop("checked") ? 1 : 0;
}

/*
    将文本输入框的输入值保存到BootstrapTable对象中
        index: 当前表格所在的行
        obj: 当前操作的input的DOM对象
*/
function saveContentToBTable(index, obj) {
    // 当前输入框输入的值
    let value = $(obj).val();
    // 当前输入框的name属性
    let name = $(obj).attr('name');
    // 根据index获取出当前表格的行对象
    let row = $("#table").bootstrapTable('getData')[index];
    // 将input的输入值保存到当前行对象中
    row[name] = value;
}

// 全局变量uniqueNo,用于记录当前行唯一的id
let uniqueNo = 3;

/*
    在表格中新追加一行
*/
function addRow() {
    $('#table').bootstrapTable('insertRow', {
        // 计算新增加行的index
        index : $('#table').bootstrapTable('getData').length + 1,
        row: {
            // 每增加一行,当前行的id都会 +1
            id : parseInt(uniqueNo) + 1,
            titile1: "",
            titile2: "",
            titile3: "",
            titile4: "",
        }
    });
    
    uniqueNo = uniqueNo + 1;
}

/*
    删除表格中的一行
*/
function removeRow(uniqueId) {
    // 我们为表格中的行指定了唯一的id,因此可以通过该唯一id进行删除
    $('#table').bootstrapTable('removeByUniqueId', uniqueId);
}

/*
    文件上传
*/
function fileChange() {

    // 获取出当前input的DOM对象
    const fileObj = document.getElementById(`file_${index}`);
    // 获取出当前上传的文件对象
    const file = fileObj.files[0];

    // 判断当前文件是否超过5M
    if (file.size > 5242880) {
        fileObj.files[0] = '';
        alert("上传的文件不能超过5M");
        return;
    }
    // 判断当前文件是否为空文件
    if (file.size == 0) {
        fileObj.files[0] = '';
        alert("要上传的文件的内容不能为空");
        return;
    }
    
    // 获取出上传的文件名
    const fileNameWithSuffix = file.name;
    // 获取文件的最后修改时间
    let date = new Date(file.lastModifiedDate);
    // 对最后修改时间进行格式化
    const formatDateStr = date;
    
    // 将上传的文件信息保存到表格的行对象中
    $('#table').bootstrapTable('updateRow', {
        index: index, 
        row: {
            fileData: file,
            fileName: fileNameWithSuffix,
            fileLastUpddateTime: formatDateStr,
        }
    });
}

/*
    获取表格中的所有数据
*/
function getAllDataFromTable() {
    // 获取表格对象中的所有数据
    const tableDataList = $('#table').bootstrapTable('getData');
    console.log(tableDataList);
}

翻页之后,滚动条移至顶部

// 监听表格的翻页事件
$('#表格对象ID').on('page-change.bs.table', function (e, number, size) {
     window.scrollTo(0,0);
});