jqGrid设置指定行的背景色

1.在页面中加样式

<style type="text/css">
        .SelectBG{
            background-color:#AAAAAA;
            }
    </style>

2.在js中

  gridComplete:function(){
             var ids = $("#gridTable").getDataIDs();
             for(var i=0;i<ids.length;i++){
                 var rowData = $("#gridTable").getRowData(ids[i]);
                 if(rowData.overdueDays==0){//如果天数等于0,则背景色置灰显示
                     $(‘#‘+ids[i]).find("td").addClass("SelectBG");
                 }
             }
         }

案例:

 shrinkToFit: true,//此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
 multiselect: true, multiboxonly: true,//只有当multiselect = true.起作用,当multiboxonly 为ture时只有选择checkbox才会起作用
gridComplete: function () {
                var ids = $("#gridTable").getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    var rowData = $("#gridTable").getRowData(ids[i]);
                    if (rowData.Audit == "不通过") {//如果审核不通过,则背景色置于红色
                        $(‘#‘ + ids[i]).find("td").addClass("SelectBG");
                    }
                }

                $("#" + this.id).jqGrid(‘setSelection‘, SelectRowIndx);
            }
    //加载表格
    function GetGrid() {
        var SelectRowIndx;
        $("#gridTable").jqGrid({
            url: "@Url.Content("~/School/SitesDetails/GridPageListJson")",
            datatype: "json",
            height: $(window).height() - 178,
            autowidth: true,
            colModel: [
                { label: ‘主键‘, name: ‘Id‘, index: "Id", hidden: true,  key: true,},
                { label: ‘所属栏目‘, name: ‘Name‘, index: "Name", width: 100 },
                { label: ‘标题名称‘, name: ‘Title‘, index: "Title", width: 320 },
                //{label:‘文章来源‘,name:‘origin‘,index:‘origin‘,width:100},
                {
                    label: ‘置顶‘, name: ‘IsTop‘, index: ‘IsTop‘, width: 80
                ,
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == true) return "是";
                        if (cellvalue == false) return "否";
                    }
                },
                { label: ‘点击量‘, name: ‘Hits‘, index: ‘Hits‘, width: 80 },
                {
                    label: ‘允许评论‘, name: ‘IsComment‘, index: ‘IsComment‘, width: 80
                ,
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == true) return "是";
                        if (cellvalue == false) return "否";
                    }
                },
                {
                    label: ‘审核‘, name: ‘Audit‘, index: ‘Audit‘, width: 80
                ,
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == "1") return "<font color=‘blue‘>等待审核</font>";
                        if (cellvalue == "2") return "<font color=‘green‘>通过审核</font>";
                        //if (cellvalue == "3") return "<font color=‘red‘>不通过</font>";
                        if (cellvalue == "3") return "不通过";
                    }
                },
                { label: ‘文章标签‘, name: ‘ArticleFlag‘, index: ‘ArticleFlag‘, width: 80 },
                { label: ‘创建者‘, name: ‘CreateUserName‘, index: ‘CreateUserName‘, width: 80 },
                {
                    label: ‘创建日期‘, name: ‘CreateDate‘, index: ‘CreateDate‘, width: 120,
                    formatter: function (cellvalue, options, rowObject) {
                        return formatDate(cellvalue, ‘yyyy-MM-dd hh:mm‘);
                    }
                },
                { label: ‘修改者‘, name: ‘ModifyUserName‘, index: ‘ModifyUserName‘, width: 80 },
                    {
                        label: ‘修改日期‘, name: ‘ModifyDate‘, index: ‘ModifyDate‘, width: 120,
                    formatter: function (cellvalue, options, rowObject) {
                        return formatDate(cellvalue, ‘yyyy-MM-dd hh:mm‘);
                    }
                    },
                { label: ‘审核人‘, name: ‘AuditUserName‘, index: ‘AuditUserName‘, width: 80 },
                    {
                        label: ‘审核日期‘, name: ‘AuditDate‘, index: ‘AuditDate‘, width: 120,
                        formatter: function (cellvalue, options, rowObject) {
                            return formatDate(cellvalue, ‘yyyy-MM-dd hh:mm‘);
                        }
                    }
            ],
            viewrecords: true,
            rowNum: 30,
            rowList: [30, 50, 100, 500, 1000],
            pager: "#gridPager",
            sortname: ‘CreateDate‘,
            sortorder: ‘Desc‘,
            rownumbers: true,
            shrinkToFit: true,//此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
            multiselect: true,
            multiboxonly: true,//只有当multiselect = true.起作用,当multiboxonly 为ture时只有选择checkbox才会起作用
            ondblClickRow: function (rowid) {
                var KeyValue = rowid;
                if (IsChecked(KeyValue)) {
                    var url = "/School/SitesDetails/Form?KeyValue=" + KeyValue;
                    openDialog(url, "Form", "编辑文章", 900, 450, function (iframe) {
                        top.frames[iframe].AcceptClick();
                    });
                }
            },
            onSelectRow: function () {
                SelectRowIndx = GetJqGridRowIndx("#" + this.id);
            },
            gridComplete: function () {
                var ids = $("#gridTable").getDataIDs();
                for (var i = 0; i < ids.length; i++) {
                    var rowData = $("#gridTable").getRowData(ids[i]);
                    if (rowData.Audit == "不通过") {//如果审核不通过,则背景色置于红色
                        $(‘#‘ + ids[i]).find("td").addClass("SelectBG");
                    }
                }

                $("#" + this.id).jqGrid(‘setSelection‘, SelectRowIndx);
            }
        });
        columnModelData("#gridTable");
        //自应高度
        $(window).resize(function () {
            $("#gridTable").setGridHeight($(window).height() - 178);
        });
    }

效果图如下:

时间: 2024-08-10 19:02:14

jqGrid设置指定行的背景色的相关文章

原创:如何实现在Excel通过循环语句设置指定行的格式

原创:如何实现在Excel通过循环语句设置指定行的格式 一.需求: 想让excel的某些行(比如3的倍数的行)字体变成5号字 如何整: 二.实现: Sub code() For i = 1 To Range("A65536").End(xlUp).Row Rows(3 * i & ":" & 3 * i).Select Selection.Font.Size = 5 '将5更改为你需要的字号大小即可 Selection.Font.Bold = Tru

DevExpress.XtraGrid.Views 设置指定行的背景颜色 .

如需要将指定行的背景设置颜色,可参考以下示例 1.事件:CustomDrawCell 2.示例: private void gridView1_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e)        {            if (gridView1.GetRow(e.RowHandle) == null)            {            

JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRowBgColor(index, row) { if (row.ERROR_INFO != null && row.ERROR_INFO != "") { return 'background-color:yellow;color:black;'; } } </scrip

jqgrid 设置编辑行中的某列为下拉选择项

有时,需要对编辑行中的某列的内容通过选择来完成,以保证数据的一致性.规范性. 可设置colModel的label的属性 edittype: "select",同时指定 editoptions 属性值 colModel: [ { label: '是否筛选', name: 'IsSearch', width: 80, editable: true, edittype: "select", editoptions: {value: "false:否;true:是

WPF 根据绑定值设置DataGrid行背景色

实现这个功能可以使用类型转换器 1建立一个类BGConverter.cs该类需要继承IValueConverter接口,并实现接口的Convert与ConvertBack方法.注意在Class上需要加上一句话, [ValueConversion(typeof(int),typeof(Brushes))] 前一个type是源类型,后一个是目标类型 [ValueConversion(typeof(int),typeof(Brushes))] class BGConverter:IValueConve

C# DataGridView 对指定行文字加粗实现阅读标记

在使用DataGridView控件放置通知等信息时,会遇到标记"已读"."未读"的问题.通过SQL语句查询出的结果中,"已读"."未读"会被放在一个专门的字段(DataGridView的列)中用来标记这个 条目的阅读情况.本文的目标就是要做到在显示上区分当前用户已读和未读的条目. 1.准备工作 建立一个C#窗体应用程序,里面放置一个Dock属性设置为Full的DataGridView 2.程序代码 在Load函数中,模拟生成了

Java如何实现按指定行读取文件

最近在开发实战中,遇到了一个这样的技术情景: 把log4j生成的日志文件定时刷进MySQL数据库,比如三个小时刷一次,那么每次刷数据的时候,如何控制文件读取是从上一次文件读取结束的地方开始继续读取的?并且本次要读取到文件结尾处.在网上各种搜索提问后,找到了一个叫RandomAccessFile Java类解决了问题. 先上代码: static int size=1;//主要是为了控制循环的次数,因为是定时刷,每次刷的文件行数可能不一样 static long chars=0;//chars指的是

Swift设置自动行高

1 // 设置行高自适应 2 tableView.rowHeight = UITableViewAutomaticDimension 3 4 // 设置预估行高 5 tableView.estimatedRowHeight = 200 1 // 底部的toolBar 2 toolBar.snp_makeConstraints { (make) in 3 make.top.equalTo(originalView.snp_bottom) 4 make.leading.trailing.equalT

css3实现超出文本指定行数(指定文本长度)用省略号代替

测试代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta http-equiv="Content-Type" content=&qu