zoukankan      html  css  js  c++  java
  • 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,
                auto true,
                colModel: [
                    { label: '主键', name: 'Id', index: "Id", hidden: true,  key: true,},
                    { label: '所属栏目', name: 'Name', index: "Name",  100 },
                    { label: '标题名称', name: 'Title', index: "Title",  320 },
                    //{label:'文章来源',name:'origin',index:'origin',100},
                    {
                        label: '置顶', name: 'IsTop', index: 'IsTop',  80
                    ,
                        formatter: function (cellvalue, options, rowObject) {
                            if (cellvalue == true) return "是";
                            if (cellvalue == false) return "否";
                        }
                    },
                    { label: '点击量', name: 'Hits', index: 'Hits',  80 },
                    {
                        label: '允许评论', name: 'IsComment', index: 'IsComment',  80
                    ,
                        formatter: function (cellvalue, options, rowObject) {
                            if (cellvalue == true) return "是";
                            if (cellvalue == false) return "否";
                        }
                    },
                    {
                        label: '审核', name: 'Audit', index: 'Audit',  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',  80 },
                    { label: '创建者', name: 'CreateUserName', index: 'CreateUserName',  80 },
                    {
                        label: '创建日期', name: 'CreateDate', index: 'CreateDate',  120,
                        formatter: function (cellvalue, options, rowObject) {
                            return formatDate(cellvalue, 'yyyy-MM-dd hh:mm');
                        }
                    },
                    { label: '修改者', name: 'ModifyUserName', index: 'ModifyUserName',  80 },
                        {
                            label: '修改日期', name: 'ModifyDate', index: 'ModifyDate',  120,
                        formatter: function (cellvalue, options, rowObject) {
                            return formatDate(cellvalue, 'yyyy-MM-dd hh:mm');
                        }
                        },
                    { label: '审核人', name: 'AuditUserName', index: 'AuditUserName',  80 },
                        {
                            label: '审核日期', name: 'AuditDate', index: 'AuditDate',  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);
            });
        }

    效果图如下:

  • 相关阅读:
    python中__init__和__call__的区别
    scrapy在start_requests中传入参数给parser
    crawl: error: Unrecognized output format 'json''
    判断一个点是否在多边形区域内部 / 判断一个给定位置是否位于某个城市内部
    scrapy爬取页面不完全的解决办法
    module 'tensorflow._api.v2.train' has no attribute 'rmspropoptimizer'
    tf.image.resize处理后的图片无法使用plt.imshow正常显示
    如何将tensor大于某个值为1,小于某个值为0
    Blas GEMV launch failed: m=3, n=10000
    sql 批量插入 insert
  • 原文地址:https://www.cnblogs.com/yechangzhong-826217795/p/5898883.html
Copyright © 2011-2022 走看看