如何在 jsGrid 的最后一行添加 css class

Question

我想在网格的最后一行添加一些样式。我不知道行号是多少，因为可能有任意数量的行。我该怎么做？我见过 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"是一个对象数组

Answer 1

我使用 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 类添加到该行。

如何在 jsGrid 的最后一行添加 css class

How to add a css class to the last row in jsGrid

css

jsgrid