BootStrap 初始化表格时实现特定行改变背景颜色

由于初识bootstrap非常感谢这篇https://blog.csdn.net/u011498933/article/details/70228357博文给我的提示.第一篇博文,写的不好希望理解.

需求: 

将已批准行的数据改变背景颜色区分未批准行

js代码:

 //初始化表格
    function initTable(id) {
        //先销毁表格
        $('#cusTable').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#cusTable").bootstrapTable({
            method: "get",  //使用get请求到服务器获取数据
            contentType: "application/x-www-form-urlencoded",
            url: "<%=basePath%>/xxxx/getxxxxList.do?",
            striped: true,  //表格显示条纹
            pagination: true, //启动分页
            toolbar: "#toolbar",
            showRefresh: true,
            pageSize: 10,  //每页显示的记录数
            pageNumber: 1, //当前第几页
            exportDataType: "all",
            clickToSelect: true,
            //search:true,
            columns: [{
                field: 'fid',
                title: '',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    var html = "";
                    return html;
                }
            },
                {
                    field: 'reportcode',
                    title: '编号',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'ce_name',
                    title: '单位',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'unitman',
                    title: '送检人',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'sjtime',
                    title: '日期',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        if (value == null || value == '' || value == 'null') {
                            return "-";
                        } else {
                            var sj = parseInt(value.toString().replace(/\D/igm, ""));
                            var rq = new Date(sj);
                            return rq.toLocaleDateString();
                        }
                    }
                },
                
                {
                    field: 'isshouqun',
                    title: '状态',
                    align: 'center',
                    valign: 'middle',
                    formatter: function operateFormatter(value, row, index) {
                        if (value == 2 || value == "2") {
                            return "已批准";
                        } else {
                            return "未批准";
                        }
                    }
                },
           
            ],
            sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumber,pageSize,searchText,sortName,sortOrder
//设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "limit",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    limit: params.limit,
                    offset: params.offset,
                    unId: id,
                };
                return param;
            },
            onLoadSuccess: function () {  //加载成功时执行
                getTdValue();
            },
            onLoadError: function () {  //加载失败时执行

            }
        });
    }

    //将已批准的数据改变背景颜色
    function getTdValue(){
        var tableId = document.getElementById("cusTable");
          
        for(var i = 1;i < tableId.rows.length;i++) {
                
            if(tableId.rows[i].cells[x].innerHTML.indexOf("已批准") != -1 ){
                tableId.rows[i].setAttribute("style","background: #bfbfff;");
                
            }
        }
    }
        /**
     * 初始化
     */
    $(document).ready(function () {
        //调用函数,初始化表格
        initTable();
        $(".modal-content").draggable({cursor: "move"});//为模态对话框添加拖拽
        $("button[title='刷新']").hide();
        $(".close").click(function () {
            resetForm();
        })

    });

PS: 调用getTdValue();函数的时候,不能在初始化表格initTable();之后调用.而应在 onLoadSuccess 加载成功时调用.

你可能感兴趣的:(js)