如何将css类添加到jsGrid中的最后一行

时间:2017-09-15 13:41:07

标签: css jsgrid

我想在网格的最后一行添加一些样式。我不知道行号是什么,因为可能有任意数量的行。我怎么能这样做?我见过rowClass和rowRenderer但不是一个有效的例子。这是我的代码:

var displayData = function (itemViewModelList) {
                var fields = [
                        {
                            name: 'ConsultantName', type: 'text', width: 100, title: 'Consultant Name'
                        },
                        {
                            name: 'BranchName', type: 'text', width: 100, title: 'Branch Name', css: "red"
                        },
                        { name: 'NumberOfInvestments', type: 'text', title: 'Number Of Investments' },
                        {
                            name: 'ValueOfInvestments', type: 'money', width: 150, title: 'Value Of Investments',
                            itemTemplate: function (value) {
                                return tisCommon.formatForMoney(value);
                            }
                        },
                        {
                            name: 'AverageValueOfInvestments', type: 'money', width: 150, title: 'Average Value Of Investments',
                            itemTemplate: function (value) {
                                return tisCommon.formatForMoney(value);
                            }
                        },
                        {
                            name: 'Month', type: 'text', width: 100, title: 'Month',
                            itemTemplate: function (value) {
                                return moment(value, 'M').format('MMMM');;
                            }
                        },
                ];

            var options = {
                inserting: false,
                editing: false,
                pageSize: 20,
                fields: fields,
                rowHeaders: false,
                colHeaders: false,

                data: itemViewModelList,
                controller: controller = {
                    loadData: function () {                        
                    },
                },
            };
            $('#investment-grid').tisGrid('', options);

            if (itemViewModelList[0].ConsultantName != null) {
                $("#investment-grid").jsGrid("fieldOption", "BranchName", "visible", false);
            } else {
                $("#investment-grid").jsGrid("fieldOption", "ConsultantName", "visible", false);
            }
        };

我的数据被传递" itemViewModelList"是一个对象数组

1 个答案:

答案 0 :(得分:2)

我通过使用rowClass解决了这个问题,如下所示:

controller: controller = 
{
    loadData: function () {}, 
},
rowClass: function (item, itemIndex) //item is the data in a row, index is the row number.
{
     if ((item.ConsultantName == "Totals") || (item.BranchName == "Totals"))
     {
         return "totalItem highlight";
     }
}

我有我的if语句,根据我的条件在最后一行找到该项目。满足它们后,我将自定义CSS类添加到该行。