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

本文介绍了如何使用Bootstrap实现表格初始化时,根据数据状态改变行的背景颜色,以区分已批准和未批准的行。在加载表格成功后调用js函数getTdValue()来实现这一功能。

由于初识bootstrap非常感谢这篇https://blog.youkuaiyun.com/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: '<input class="checkbox_" type="checkbox"/>',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    var html = "<input class='checkbox" + index + "' type='checkbox' name='checkbox' value='" + row.fid + "," + row.isshouqun + "'/>";
                    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 "<span style='color:green;'>已批准</span>";
                        } else {
                            return "<span style='color:red;'>未批准</span>";
                        }
                    }
                },
           
            ],
            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();
        })

    });
</script>

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值