如何在jqGrid Formatter中添加带有图标的按钮

Question

我尝试在 jqGrid 列中添加一个带有图标的按钮 - 但它以 undefined 的形式出现。这样做的正确方法是什么？

代码

colModel: [
    { name: 'RoleID', index: 'RoleID', width: 100 },
    { name: 'RoleName', index: 'RoleName', width: 250 },
    { name: 'RoleRequestedDate', index: 'RoleRequestedDate', formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }, width: 125 },
    { name: 'RoleApprovedDate', index: 'RoleApprovedDate', formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }, width: 125 },

    {
        name: 'Request', index: 'RoleID', width: 120,
        formatter: function (cellvalue, options, rowObject) {
            //return '<span class="ui-icon ui-icon-circle-plus app-custom-button-create"  title="Create";"></span>';
            if (rowObject["UserRoleID"] == "0") {
                if (rowObject["RoleRequestID"] == "0") {
                    //return '<span class="ui-icon ui-icon-circle-plus app-custom-button-request"  title="Request";"></span>';
                    //return '<button id="btnRequest" class="ui-icon ui-icon-circle-plus app-custom-button-request"  type="submit" return false;>Request</button>';

                    return 
                            '<button class="ui-button ui-widget ui-state-default">' +
                            '<span class="ui-button-icon-primary ui-icon ui-icon-star">Request</span>' +
                            '</button>';

                }
                else {
                    return '<span class="ui-icon ui-icon-folder-collapsed"  title="Already Requested";"></span>';
                }

            }
            else {
                return '<span class="ui-icon ui-icon-check"  title="Has Role";"></span>';
            }
        }
    }

],

Answer 1

看起来您的主要计算机语言是 C#，并且您尝试以与编写 C# 程序相同的风格使用 JavaScript。这是一个重要的错误！您以看起来正确的代码的方式创建，但它以错误的方式工作。我在 C/C++/C# 和许多其他非 C 语言的代码之前开发了很多年。所以我犯了和你一样的错误。只有在了解 JavaScript 绝对是另一种语义之后，我才改变了我的风格为 JavaScript 程序，一切都变得很好。

回到您的代码。你写的声明

return 
    '<button class="ui-button ui-widget ui-state-default">' +
    '<span class="ui-button-icon-primary ui-icon ui-icon-star">Request</span>' +
    '</button>';

看起来正确，在 C# 中也是正确的，但在 JavaScript 中会被解释为：

return;
'<button class="ui-button ui-widget ui-state-default">' +
'<span class="ui-button-icon-primary ui-icon ui-icon-star">Request</span>' +
'</button>';

因此，由于分号的自动插入，您有 两个语句。第一行返回undefined，第二行将永远不会执行，它将被删除，您将最小化您的 JavaScript 代码。

我强烈建议您使用以下简单规则：如果您需要在另一行继续执行该语句，您应该以 + 或 { 之类的符号部分结束该行或任何其他不能be 作为语句的最后一个符号。您不应该完全了解自动插入分号的所有规则。在这种情况下，规则永远不会起作用。

在你的情况下，你只需要写

return '<button class="ui-button ui-widget ui-state-default">' +
    '<span class="ui-button-icon-primary ui-icon ui-icon-star">Request</span>' +
    '</button>';

顺便说一句，我个人更喜欢在字符串中使用"，在字符串中使用'。该规则稍微好一点，因为相同的规则包含大多数 JavaScript 框架/库。

您的代码中的下一个示例：您使用该行

if (rowObject["UserRoleID"] == "0") {
    ...

这里的主要问题是使用相等运算符 ==，典型的C#，而不是严格相等运算符 ===，强烈建议在JavaScript。问题是使用== 的代码看起来不像现实中的那样。 JavaScript 在== 使用时使用类型转换，这会产生非常奇怪的效果。例如 0 == "0" 是 true 和 false == "0" 是真的。在大多数情况下，这不是人们想要的。说明操作员== 有多危险的经典示例：0 == '' 是true，0 == '0' 是true，但'' == '0' 是原因false。所以==的使用很容易打破主要的数学规则。

我建议您做的更简单和非关键的更改是使用rowObject.UserRoleID 而不是rowObject["UserRoleID"]。您应该只对变量使用["..."] 语法，或者如果您使用包含特殊字符（如rowObject["User.Role.ID"] 或rowObject["User Role ID"]）的属性，或者属性名称是某些JavaScript 方言中的保留字，如@9​​87654352@ 或rowObject["if"]。

下一句：您应该验证字符串'... title="Has Role";"></span>' 和'... title="Already Requested";"></span>'; 中的引号（"）。 ;" 部分应该被删除。

最后，针对 jqGrid 的一些小说明。首先，我建议您从colModel 中删除不需要的index 属性。删除index 后您将获得相同的结果，但您的代码将更短且易于阅读。下一条建议：如果 key: true 包含 unique 值，您应该考虑将其添加到列 RoleID。它通知 jqGrid 使用这些值作为 rowids（<tr> 元素的 id 属性的值）。

最后一句话：你应该相信使用列模板。以最简单的形式，您可以定义对象

var myDateTemplate = { formatter: 'date',
        formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }, width: 125 };

在创建 jqGrid 并定义 RoleRequestedDate 和 RoleApprovedDate 的代码上方的某处

{ name: 'RoleRequestedDate', template: myDateTemplate },
{ name: 'RoleApprovedDate', template: myDateTemplate },

它减少了您的代码，使其更具可读性和易于维护。有关列模板的更多信息，请参阅 here 或 here。