jqGrid设置指定行的背景色

时间:2022-12-12 13:39:52

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);
});
}

效果图如下:

jqGrid设置指定行的背景色

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

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

    原创:如何实现在Excel通过循环语句设置指定行的格式 一.需求: 想让excel的某些行(比如3的倍数的行)字体变成5号字 如何整: 二.实现: Sub code() To Range(" ...

  2. DevExpress&period;XtraGrid&period;Views 设置指定行的背景颜色 &period;

    如需要将指定行的背景设置颜色,可参考以下示例 1.事件:CustomDrawCell 2.示例: private void gridView1_CustomDrawCell(object sender ...

  3. 使用layui框架根据字段来设置tr行的背景色

    问题来源:最近在写公司项目时使用layui遇见的问题,老板要求根据td字段来设置整行tr的背景色. 解决:一开始数据比较少的时候只是直接在页面根据js动态判断字段然后来更改背景色,结果能够成功,但是后 ...

  4. JQuery EasyUI DataGrid根据条件设置表格行样式&lpar;背景色&rpar;

    1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...

  5. 设置datalist指定行的背景色

    前台: <div class="table-responsive" > <table class="table table-bordered table ...

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

    有时,需要对编辑行中的某列的内容通过选择来完成,以保证数据的一致性.规范性. 可设置colModel的label的属性 edittype: "select",同时指定 editop ...

  7. Android Material适配 为控件设置指定背景色和点击波纹效果

    Android Material适配 为控件设置指定背景色和点击波纹效果,有需要的朋友可以参考下. 大部分时候,我们都需要为控件设置指定背景色和点击效果 4.x以下可以使用selector,5.0以上 ...

  8. WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画

    原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同 ...

  9. 设置listContrl中指定行的颜色

    在MFC中 自己通过手动拖放CListCtrl控件来制作自己的表格: 目的: 将指定item的行更该颜色: 步骤: 1,在窗口中拖放CListCtrl控件, 单击右键 创建控件对象: CListCtr ...

随机推荐

  1. 实践&colon;Backbone作前端&comma;Django&plus;Tastypie作后端的简单Web在线聊天室

    一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间 三.前端制作 这里没有用到Bac ...

  2. codeforces 645 E&period; Intellectual Inquiry

    一个字符串,由前k个字母组成,长度为m + n,其中前m个字符已经确定,后面n个由你*选择, 使得这个串的不同的子序列的个数最多,空串也算一个子序列. 1 <= m <= 10^6,0 ...

  3. linux系统编程:进程间通信-mmap

    进程间通信-mmap #include <sys/mman.h> void *mmap(void *addr, size_t length, int prot, int flags, in ...

  4. 执行命令行并等待完成(使用WaitForSingleObject达到目的)

    function TDMDb.WaitExeFinish(const sCmdName: string):boolean; var StartupInfo: TStartupInfo; Process ...

  5. Python 日志处理(二) 使用正则表达式处理Nginx 日志

    使用正则表达式来处理Nginx 日志 一. 先对单行的日志进行分组正则匹配,返回匹配后的结果(字典格式): from datetime import datetime import re #单行日志 ...

  6. 选择性搜索(SS)算法

    一.目标检测和目标识别 目标识别(object recognition)是要指明一张图像中包含哪类目标.输入是图像,输出是图像中的目标属于的类别(class probability).目标检测是识别出 ...

  7. Image 图片

    随机矩阵画图 这一节我们讲解怎样在matplotlib中打印出图像.这里打印出的是纯粹的数字,而非自然图像.下面用 3x3 的 2D-array 来表示点的颜色,每一个点就是一个pixel. impo ...

  8. Servlet案例7:jsp技术及案例

    jsp运行原理: 根据jsp文件创建java文件(servlet),并编译运行 第一次访问时会被翻译成servlet后执行 jsp三个指令: 1.page指令:页面翻译运行的属性的配置(通常使用默认) ...

  9. JavaEE编程实验 实验1 Java常用工具类编程(未完成)

    1.使用String类分割split将字符串“Solutions to selected exercises can be found in the electronic document The T ...

  10. Redis高可用之集群配置(六)

    0.Redis目录结构 1)Redis介绍及部署在CentOS7上(一) 2)Redis指令与数据结构(二) 3)Redis客户端连接以及持久化数据(三) 4)Redis高可用之主从复制实践(四) 5 ...