如何重命名jsGrid按钮类

Question

我想重命名在jsGrid原型中设置的以下css按钮类：

modeOnButtonClass，searchModeButtonClass，insertModeButtonClass，editButtonClass，deleteButtonClass，searchButtonClass，clearFilterButtonClass，insertButtonClass，updateButtonClass，cancelEditButtonClass

我不想在主jsgrid.js文件中这样做，而是希望在应用程序的js文件中这样做。

jsGrid的开发人员建议我在网格初始化之前重新定义jsGrid原型上的值：

jsGrid.Grid.prototype.headerRowClass = "my-custom-class";

我的网格是在函数内部创建的(如下面所示)，我不知道该在哪里插入重命名代码，以及它的编写方式是否与开发人员的建议不同？

    function populateUsersGrid() {
        var grid = $("#users_grid").jsGrid({
            height: "auto",
            width: "100%",
            autoload: true,
            sorting: true,
            editing: true,
            selecting: false,
            noDataContent: "",
            deleteConfirm: function (item) {
                return "The User, \"" + item.first_name + ' ' + item.last_name + "\" , will be removed from the Users table. Are you sure?";
            },
            controller: {
                loadData: function () {
                    var d = $.Deferred();
                    $.post("assets/php/get_users.php", {}, function (data) {
                        d.resolve(data);
                    });
                    return d.promise();
                }
                ,
                updateItem: function(item) {
                    return $.ajax({
                        type: "POST",
                        url: "assets/php/update_user.php",
                        data: {
                            'user_id': item.id,
                            'role_id': item.role_id
                        },
                        success: function (data) {
                            $("#users_grid").jsGrid("render");
                        }
                    });
                },
                deleteItem: function(item) {
                    return $.ajax({
                        type: "POST",
                        url: "assets/php/delete_user.php",
                        data: {
                            'user_id': item.id
                        },
                        success: function (data) {
                            $("#users_grid").jsGrid("render");
                        }
                    });
                }
            },
            fields: [
                {
                    title: "Last Name",
                    name: "last_name",
                    editing: false,
                    type: "text",
                    align: "left",
                    width: "20%"
                },
                {
                    title: "First Name",
                    name: "first_name",
                    editing: false,
                    type: "text",
                    align: "left",
                    width: "20%"
                },
                {
                    title: "Email Address",
                    name: "email",
                    editing: false,
                    type: "text",
                    align: "left",
                    width: "30%"
                },
                {
                    title: "Role",
                    name: "role_name",
                    type: "text",
                    align: "left",
                    width: "20%"
                },
                { 
                    type: "control"
                }
            ]
        });
    }

另一个问题是，当我检查控制台中的“prototype”时，我上面列出的prototype值不会出现。

任何帮助都将不胜感激。

Answer 1

由于我要重命名ControlField原型，所以代码需要如下：

jsGrid.ControlField.prototype.editButtonClass = "my-button-class";

我将这些代码行放在$(function () {}代码块中的主JS文件的顶部。

CSS类已成功重命名。