bootStrap 表格刷新后，保持复选框勾选状态

bootStrap 表格刷新后，保持复选框勾选状态

项目前端用的bootStrap封装的框架。现有需求对表格中一列进行动态的进度条展示，需要用到表格列的数据。实现：给表格新增一列，并添加了定时刷新，进度条有了：
1.表格定时刷新

 <div class="col-sm-12 select-table table-striped table-responsive" style="overflow: scroll">
 <!-- data-auto-refresh设置true为启用自动刷新插件 
			         data-auto-refresh-interval为每次自动刷新发生的时间（以秒为单位）默认60。
				     data-auto-refresh-silent设置为true可以自动无提示刷新。默认： true
				     data-auto-refresh-status 设置true为启用自动刷新。这是表加载时自动刷新的状态。单击按钮切换此属性。这只是自动刷新的默认状态，因为用户始终可以通过单击按钮来更改它。 默认： true  -->
    <table id="bootstrap-table" data-auto-refresh="true" data-auto-refresh-interval="5" style="min-width: 1500px" class="table text-nowrap" ></table>
 </div>

2.进度条

 {
                    title: '摇摆进度',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var endDate  = new Date();
                        // 摇摆开始时间或再次摇摆开始时间
                        var begin = row.swingEndTime == null ? row.swingStartTime : row.swingStartAlignTime;
                        var res = 0;
                        if (begin != null){
                            var beginDate = new Date(begin);
                            // 当前时间 - 摇摆开始时间
                            var diff = (endDate.getTime() - beginDate.getTime())/1000;
                            // 配方最低摇摆时间 单位分钟
                            var qualified = row.minimumSwingTime;
                            if(qualified==0){
                                res=100;
                            }else{
                                res = 100 * (diff / (qualified * 60));
                            }

                        }
                        if (row.swingEndAlignTime != null){
                            res = 0;
                        }
						// 返回进度条样式
                        return ["<div style='height: 20px;overflow: hidden;background-color: #ed5565;border-radius: 4px;'> <div class='progress-bar' role='progressbar' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100' style='width:"+res.toFixed(2)+"%'>"+res.toFixed(2)+"%</div> </div>"];
                    }
                },

但是刷新表格后发现，之前勾选的记录被刷新没了。后来利用框架的一些方法，结合localStorage解决了问题。
1).给表格添加单击，取消，全选，全选取消事件

$(function () {
        var options = {
            url: prefix + "/listOne",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            showSearch: false,
            showRefresh: true,
            showToggle: false,
            showColumns: false,
            modalName: "摇摆列",
            clickToSelect:true,
            onCheck:onCheck,
            onUncheck:onUncheck,
            onCheckAll:onCheckAll,
            onUncheckAll:onUncheckAll,

2).当触发事件时，把选中的某列唯一值储存到localStorage

 // 供刷新保持选中用
    function onCheck(row, $element){
        window.localStorage.setItem(row.bottleLabel, row.bottleLabel);
    }

    function onUncheck(row, $element){
        window.localStorage.removeItem(row.bottleLabel);
    }
    // 全选和取消全选 处理勾选状态
    function onCheckAll(rowsAfter,rowsBefore){
        for (let rowsAfterElement of rowsAfter) {
            window.localStorage.setItem(rowsAfterElement.bottleLabel, rowsAfterElement.bottleLabel);
        }
    }
    function onUncheckAll(rowsAfter,rowsBefore){
        for (let rowsAfterElement of rowsBefore) {
            console.log(rowsAfterElement.bottleLabel);
            window.localStorage.removeItem(rowsAfterElement.bottleLabel);
        }
    }

3).当渲染表格时，从localStorage取值，处理一下checkbox

 columns: [{
                checkbox: true,
                formatter: function (value, row, index) {
                    // 刷新保持勾选框选中
                    var data = window.localStorage.getItem(row.bottleLabel);
                    if (data !== null) {
                        //console.log(data)
                        return { checked : true}
                    }else {
                        return { checked : false}
                    }
                }
            },
                {
                    field: 'bottleLabel',
                    title: 'xxxxx'
                },

只是一种解决方案，问题算是解决了。。。