如何将单元格颜色设置为具有动态列的网格？
我正在为K-9血液测试创建测试结果网格。当一只宠物狗去看兽医时，兽医会采取一些血液样本，而对于我的情况，兽医会进行两类血液检查。
- JOK-5
- K9-DTR
在每次血液检查中，兽医检测 OMG，PIGT，LBQ 和 BTR 的数量。它们的数量为 mg / l 单位。这些测试分别在2015年1月21日和2014年6月10日两天内进行。数量将放在单元格上，如图所示。数量值位于MeasuredValue变量中json数组的属性data中。
这是一个反应组件但不担心反应，数据和网格生成的ajax在getData（）函数中完成。
在getData（）中将数据分配给局部变量，并使用以下代码将数据分配给行。
for(var n=0;n<arrayForRecords.length;n++){
jQuery("#list483").jqGrid('addRowData', n + 1, arrayForRecords[n]);
}
在网格函数gridComplete（）中我执行以下过程将数据放在每行的每个单元格中
gridComplete:function(){
//array consists of old rows and new row
var dataArray = $('#list483').jqGrid('getGridParam', 'data');
////////////////////////////////////////////////////////////////////////////
//
// get catName and ShortName combination for the newly added row then search arrayForRecords
// and get their labdates array then place the MeasuredValues on the matching cells.
////////////////////////////////////////////////////////////////////////////
if(dataArray.length>0){
var lastrow=dataArray[dataArray.length-1];
var catName = lastrow.CatName;
var shortName=lastrow.ShortName;
var myLabDates =[];
$(arrayForRecords).each(function(index,item){
if(item.CatName==catName & item.ShortName==shortName){
//get labDates collection
myLabDates= item.LabDatesandValues;
}
});
console.log(JSON.stringify(myLabDates));
//iterate through the labdates and values and set the values in the matching cell.
$(myLabDates).each(function(index,item){
if(catName=="Immunization Questions"){
//I did not want to check ChoiceText becuase it can be only 'Yes/No/Dont know'
$('#list483').jqGrid('setCell', dataArray.length, item.LB, item.CT);
}
else if(catName=="Onsite Testing"){
//when choice text empty put MeasureValue as value in cell
if(item.CT==''){
//put measure value
$('#list483').jqGrid('setCell', dataArray.length, item.LB, item.MV);
}
else{//when Choice Text has a value put ChoiceText value in cell
$('#list483').jqGrid('setCell', dataArray.length, item.LB, item.CT);
}
}
else{//for all the other values
//If binary anser is 'POS/NEG' place POS/NEG as value in cell based on MV=1/0
if(item.BA=='POS/NEG'){
if(item.MV==1){
$('#list483').jqGrid('setCell', dataArray.length, item.LB, 'POS');
}
else{
$('#list483').jqGrid('setCell', dataArray.length, item.LB, 'NEG');
}
}//some other values also must insert Yes/No in cell these values are in 'prevention screens'
else if(item.BA=='Yes/No'){
if(item.MV==1){
$('#list483').jqGrid('setCell', dataArray.length, item.LB, 'Yes');
}
else{
$('#list483').jqGrid('setCell', dataArray.length, item.LB, 'No');
}
}
else{//for all the others place measurevalue directly on cell
$('#list483').jqGrid('setCell', dataArray.length, item.LB, item.MV);
}
}
})
}
//this places teh contents on cell row by row: add dates from setCell method.
$(dataArray).each(function (index){
});
}
json中的本地数据将被重新格式化为符合网格结构的数据结构及其在此代码中的完成:(网格结构的重新格式化数据位于数组arrayForRecords）
重新格式化的数据结构如下：
aRecord = {CategoryId:catID, CatName:foundCatName, ShortName:foundShortName, ReferenceMax:reference,Units:uom, LabDatesandValues:datesArray};
LabDatesandValues具有以下结构：
{LB:item.LabDate, MV:measureValOperator, CT:item.ChoiceText, BA:trimmedBAValue, ABF: Abnormal}
LB, MV, CT, BA, ABF属性分配了来自data变量中原始数组的属性。 ABF包含异常值
重新格式化的代码如下：
success: function(data){
//data from client:the url call is a dummy one.
var data = [{"CategoryId":63,"CatName":"K9-DTR","ShortName":"LBQ","ReferenceMax":null,"ReferenceMin":null,"RefRangeMax":null,"RefRangeMin":null,"LevelsID":null,"Label":null,"Min":null,"Max":null,"Points":null,"NewPoints":0,"Abnormal":1,"AbnormalFlag":null,"LDescription":null,"MDescription":null,"Email":"test@test.com","Units":"mg/l","BinaryAnswer":null,"MeasuresId":2286,"MeasuredValue":23.77,"LabDate":"01/21/2015","Operator":"","SortOrder":null,"AnswersQCID":null,"AnswersAuthorID":90889,"LabCorpID":"180062","NumOfDupes":0,"SortCat":0,"SortMeas1":null,"SortAnsLabDate":"\/Date(1421778600000)\/","ChoiceText":null},{"CategoryId":63,"CatName":"K9-DTR","ShortName":"BTR","ReferenceMax":null,"ReferenceMin":null,"RefRangeMax":null,"RefRangeMin":null,"LevelsID":null,"Label":null,"Min":null,"Max":null,"Points":null,"NewPoints":0,"Abnormal":0,"AbnormalFlag":null,"LDescription":null,"MDescription":null,"Email":"test@test.com","Units":"mg/l","BinaryAnswer":null,"MeasuresId":2286,"MeasuredValue":3.44,"LabDate":"10/06/2014","Operator":"","SortOrder":null,"AnswersQCID":null,"AnswersAuthorID":90889,"LabCorpID":"180062","NumOfDupes":0,"SortCat":0,"SortMeas1":null,"SortAnsLabDate":"\/Date(1412533800000)\/","ChoiceText":null},{"CategoryId":64,"CatName":"JOK-45","ShortName":"OMG","ReferenceMax":null,"ReferenceMin":null,"RefRangeMax":null,"RefRangeMin":null,"LevelsID":null,"Label":null,"Min":null,"Max":null,"Points":null,"NewPoints":0,"Abnormal":1,"AbnormalFlag":null,"LDescription":null,"MDescription":null,"Email":"test@test.com","Units":"mg/l","BinaryAnswer":null,"MeasuresId":2286,"MeasuredValue":0.9999,"LabDate":"10/06/2014","Operator":"","SortOrder":null,"AnswersQCID":null,"AnswersAuthorID":90889,"LabCorpID":"180062","NumOfDupes":0,"SortCat":0,"SortMeas1":null,"SortAnsLabDate":"\/Date(1412533800000)\/","ChoiceText":null},{"CategoryId":64,"CatName":"JOK-45","ShortName":"PIGT","ReferenceMax":null,"ReferenceMin":null,"RefRangeMax":null,"RefRangeMin":null,"LevelsID":null,"Label":null,"Min":null,"Max":null,"Points":null,"NewPoints":0,"Abnormal":0,"AbnormalFlag":null,"LDescription":null,"MDescription":null,"Email":"test@test.com","Units":"mg/l","BinaryAnswer":null,"MeasuresId":2286,"MeasuredValue":23.3,"LabDate":"10/06/2014","Operator":"","SortOrder":null,"AnswersQCID":null,"AnswersAuthorID":90889,"LabCorpID":"180062","NumOfDupes":0,"SortCat":0,"SortMeas1":null,"SortAnsLabDate":"\/Date(1412533800000)\/","ChoiceText":null}];
//////////////////// this has unique set of dates //////////////////
$(data).each(function(index,item){
tmpLabDates[index]=item.LabDate;
//tmpLabDates[index]=mon+'/'+dt+'/'+year;
})
$(data).each(function(index,item){
allShortNames[index]=item.ShortName;
})
$(data).each(function(index,item){
alldupGroups[index]=item.CatName;
});
allunqGroups=alldupGroups.filter(onlyUnique);
//remove redundencies
unqLabDates = tmpLabDates.filter( onlyUnique );
allunqShortNames=allShortNames.filter(onlyUnique);
var catID='';
var reference='';
var uom='';
var aRecord='';
//added:10/26/2016
//add an empty to unqLabDates so it generates a column on Lab dates side.this will prevent
//overllaping of from/to datepickers boxes with static column headers.
if(data.length==0){
unqLabDates.push('');
}
//manually reconstructing the data from DB with each row to have its own labdates collection
for(var i=0;i<allunqGroups.length;i++){
for(var j=0;j<allunqShortNames.length;j++){
$(data).each(function(index,item){
if(allunqGroups[i]==item.CatName)
{
if(allunqShortNames[j]==item.ShortName)
{
//prints catId accurately
catID=item.CategoryId;
//settting the Reference column value based on ReferenceMin and ReferecenMax
if( (item.ReferenceMin == null) | item.ReferenceMax==null){
reference='-';
// alert('hello');
}
else
{
reference = item.ReferenceMin.toString()+'-'+item.ReferenceMax.toString();
}
//reference= item.ReferenceMax; //if RefernceMax and Min not null concat min-max value for reference
uom=item.Units;
//this will add measure value with its operator symbol
var measureValOperator = item.Operator + item.MeasuredValue.toString();
if(item.BinaryAnswer!=null){
var trimmedBAValue=item.BinaryAnswer.trim();
}
else{
var trimmedBAValue=item.BinaryAnswer;
}
var labDateAndMeasureValue = {LB:item.LabDate, MV:measureValOperator, CT:item.ChoiceText, BA:trimmedBAValue, ABF: Abnormal};
//var labDateAndMeasureValue = {LB:mon+'/'+dt+'/'+year, MV:item.MeasuredValue};
//repeated ones are the dates:store all labdates for teh current matching combination.
datesArray.push(labDateAndMeasureValue);
}
}
});
var foundCatName=allunqGroups[i];
var foundShortName=allunqShortNames[j];
//this condition prevents adding blank arrays for labdates. also this stops the short name repeat in a catname
if(datesArray.length >0){
//'ReferenceMax' property here is string concatenation of ReferenceMin and ReferenceMax (see above).
aRecord = {CategoryId:catID, CatName:foundCatName, ShortName:foundShortName, ReferenceMax:reference,Units:uom, LabDatesandValues:datesArray};
//add object to the unqiue objects array
arrayForRecords.push(aRecord);
//clear the labdates array for the labdates of the next set of CatName and ShortName
datesArray=[];
}
}
}
//code to configure grid after this
}
网格将measureValue放在匹配的单元格中。
我需要做的是json数组中有一个名为Abnormal的属性。当Abnormal == 1时，其'measureValue'的单元格必须在red和underlined中着色。当Abnormal == 0时，必须将单元格颜色设置为默认值并删除下划线。
ABF属性包含异常值
如何实现这一目标？
以下是该组件的完整代码位于jsfiddle-k9
1 个答案:
答案 0 :(得分：1)
我不确定我是否完全理解您的代码，但似乎您尝试实现数据透视表。我建议你使用jqPivot方法。它在旧版本的jqGrid中有所描述（参见here），但旧的实现包含许多错误。因为我完全重写了自由jqGrid中的代码，试图保持向后兼容性。我添加了the wiki article中描述的许多新功能。它允许使用以下代码减少用于创建the demo的代码
$("#list483").jqGrid("jqPivot",
data,
{
frozenStaticCols: true,
xDimension: [
{/*x0*/ dataName: "CatName", width: 200, label: "Lab Test" },
{/*x1*/ dataName: "ShortName", skipGrouping: true },
{/*x2*/ dataName: "ReferenceMin", hidden: true, skipGrouping: true },
{/*x3*/ dataName: "ReferenceMax", width: 80, align: "center",
label: "Reference", skipGrouping: true,
formatter: function (cellvalue, options, rowObject) {
// x2 - ReferenceMin, x3 - ReferenceMax
return rowObject.x2 === null || rowObject.x3 === null ?
"-" :
String(rowObject.x2) + "-" + String(cellvalue);
}
},
{/*x4*/ dataName: "Units", width: 50, align: "center", skipGrouping: true },
{/*x5*/ dataName: "Abnormal", hidden: true, skipGrouping: true }
],
yDimension: [{
dataName: "LabDate",
sorttype: "date"
}],
aggregates: [{
member: "MeasuredValue",
cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
if (rawObject != null && rawObject.x5 === 1) {//x5 - Abnormal
return ' class="ui-state-error"';
}
},
aggregator: "max"
}]
},
// grid options
{
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true, width: 90 },
shrinkToFit: false,
useUnformattedDataForCellAttr: false,
//autoresizeOnLoad: true,
autoResizing: { compact: true },
/*rowattr: function (item) {
if (item.x5 === 1) {
return {"class": "ui-state-error"};
}
},*/
groupingView: {
groupField: ["x1"],
groupColumnShow: [false],
groupText: ['<b>{0}</b>']
},
width: 450,
pager: true,
rowNum: 20,
rowList: [5, 10, 20, 100, "10000:All"],
caption: "<b>K-9 Test Results</b>"
}
);
产生如下图所示的结果
如果我用
评论（或删除）该块cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
if (rawObject != null && rawObject.x5 === 1) {//x5 - Abnormal
return ' class="ui-state-error"';
}
}
取消注释块
rowattr: function (item) {
if (item.x5 === 1) {
return {"class": "ui-state-error"};
}
}
我们得到的结果如
请参阅another demo。
更新： One more demo显示我刚刚实施的jqPivot的新可能性。它允许在additionalProperty: true中使用hidden: true, skipGrouping: true代替xDimension。最后一个演示使用
xDimension: [
{/*x0*/ dataName: "CatName", width: 200, label: "Lab Test" },
{/*x1*/ dataName: "ShortName", skipGrouping: true },
{/*x2*/ dataName: "ReferenceMin", additionalProperty: true },
{/*x3*/ dataName: "ReferenceMax", width: 80, align: "center",
label: "Reference", skipGrouping: true,
formatter: function (cellvalue, options, rowObject) {
// x2 - ReferenceMin, x3 - ReferenceMax
return rowObject.x2 === null || rowObject.x3 === null ?
"-" :
String(rowObject.x2) + "-" + String(cellvalue);
}
},
{/*x4*/ dataName: "Units", width: 50, align: "center", skipGrouping: true },
{/*x5*/ dataName: "Abnormal", additionalProperty: true }
]
这样做的主要优点是：从网格的DOM中删除不需要的隐藏列。相应的属性将保存在本地数据中，并可用于自定义格式化程序cellattr或rowattr。有关additionalProperties。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？