个人中心
gpt4 book ai didi

javascript - 如何将单元格颜色设置为具有动态列的网格？

转载 作者：行者123 更新时间：2023-12-03 05:46:13 27 4
gpt4 key购买 nike

我正在为 K-9 血液测试创建测试结果网格。当宠物狗去看 vert 时， vert 会采集一些血液样本，就我而言， vert 会进行两类血液测试。

  1. JOK-5
  2. K9-DTR

在每次血液测试中， vert 都会测试OMG、PIGT、LBQ和BTR的数量。它们的数量以mg/l为单位。这些测试是在 2015 年 1 月 21 日和 2014 年 6 月 10 日两个不同的日子进行的。数量将被放置在单元格上，如图所示。数量值位于 data 变量中 json 数组的属性 MeasuredValue 中。

enter image description here

这是一个 React 组件，但不用担心 React，数据和网格生成的 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:异常}

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 的属性。当异常 == 1时，其“measureValue”的单元格必须为红色并带有下划线。当异常== 0时，单元格颜色必须设置为默认值并删除下划线。

ABF属性包含异常值

如何实现这一目标？

该组件的完整代码位于 jsfiddle-k9

最佳答案

我不确定我是否完全理解您的代码，但您似乎尝试实现数据透视表。我建议您使用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>"
    }
);

产生如下图所示的结果

enter image description here

如果我评论(或删除)该 block 

cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
    if (rawObject != null && rawObject.x5 === 1) {//x5 - Abnormal
        return ' class="ui-state-error"';
    }
}

并取消注释该 block 

rowattr: function (item) {
    if (item.x5 === 1) {
        return {"class": "ui-state-error"};
    }
}

我们得到的结果如下

enter image description here

参见another demo .

更新: One more demo显示了我刚刚实现的 jqPivot 的新可能性。它允许在 xDimension 中使用 additionalProperty: true 而不是 hidden: true、skipGrouping: true。最后一个演示使用

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 等中使用。请参阅the wiki artikle有关additionalProperties的更多信息。

关于javascript - 如何将单元格颜色设置为具有动态列的网格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40325841/

27 4 0
文章推荐： terminology - “BC break”是什么意思？
文章推荐： android - 在React Native项目运行期间停止下载Gradle
文章推荐： graph - 统一成本搜索和 Dijkstra 算法有什么区别？
文章推荐： android - 由于已弃用的 Jack 工具链，构建 TensorFlow Android 演示应用程序的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com