jqgrid单元格显示html,JQGrid:如何根据内容设置单元格样式

我想根据单元格的内容设置单元格的背景颜色。JQGrid:如何根据内容设置单元格样式

我的第一个问题:有没有一种方法可以从xml数据中设置单元格的背景颜色?

如果不是,这是我网格的定义:

$("#grid_sites").jqGrid({

url:"getgridxmlsites.php?detailid=" + $('#hdnStudyDetailId').val(),

datatype: "local",

height: 160,

width: 832,

shrinkToFit: true,

caption:"",

colNames :["Site","Name","PI","Location","Phone","Status"],

colModel :[

{name:"sitenumber", index:"sitenumber", width:50, align:"right"},

{name:"name", index:"name", width:120},

{name:"location", index:"location", width:100},

{name:"phone", index:"phone", width:100},

{name:"status", index:"status", width:70}

],

pager:"pager_sites",

scroll: 1,

viewrecords:true,

sortable:true,

sortname: "sitenumber",

autowidth: true,

pgbuttons: false,

loadonce: true,

gridview: true

});

我想改变基于其内容的状态单元格的背景颜色。 我知道我应该在状态栏上使用一个格式化程序,但是我不确定代码只是改变那个单元格的背景颜色。

{name:"status", index:"status", width:70, formatter: statusFormatter}

function statusFormatter(cellvalue, options, rowObject)

{

What exactly would go here for something like this:

if (cellValue == 'Pending') change the cell's background color to yellow

else if (cellValue == 'Approved') change the cells's background color to green;

}

谢谢!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过自定义 formatter 函数来实现在 jqGrid单元格显示按钮开关。具体步骤如下: 1. 在 colModel 中定义需要显示开关的列,设置其 formatter 为自定义的函数名,如: ``` { name: 'is_active', index: 'is_active', width: 70, align: 'center', formatter: switchFormatter } ``` 2. 编写自定义的 formatter 函数 switchFormatter,该函数接收四个参数:cellvalue、options、rowObject、action。其中 cellvalue 表示当前单元格的值,options 表示该列的配置选项,rowObject 表示当前行的数据对象,action 表示当前操作的类型。在 switchFormatter 函数中,可以根据参数 cellvalue 来判断当前单元格应该显示开还是关,然后返回对应的 HTML 代码来实现按钮开关的显示。例如: ``` function switchFormatter(cellvalue, options, rowObject, action) { var checked = cellvalue == '1' ? 'checked' : ''; return '<label class="switch"><input type="checkbox" ' + checked + '><span class="slider"></span></label>'; } ``` 3. 在 HTML 中引入必要的 CSS 和 JS 文件,如: ``` <link rel="stylesheet" href="/path/to/jquery-ui.css"> <link rel="stylesheet" href="/path/to/jquery.jqGrid.css"> <link rel="stylesheet" href="/path/to/switch.css"> <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery-ui.js"></script> <script src="/path/to/jquery.jqGrid.js"></script> <script src="/path/to/switch.js"></script> ``` 其中 switch.css 和 switch.js 是用于实现按钮开关样式的 CSS 和 JS 文件,可以从网上下载并引入。 4. 初始化 jqGrid,如: ``` $('#grid').jqGrid({ url: '/path/to/data.json', datatype: 'json', colModel: [ { name: 'id', index: 'id', width: 50, align: 'center' }, { name: 'name', index: 'name', width: 150 }, { name: 'is_active', index: 'is_active', width: 70, align: 'center', formatter: switchFormatter } ], ... }); ``` 通过以上步骤,即可实现在 jqGrid单元格显示按钮开关。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值