Question

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

CODE

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具有绝对另一个语义之后，我才改变了我的风格 for JavaScript programs 并且一切都变好了。

返回您的代码。你写了声明

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代码。

我严格建议您使用以下简单规则：如果您需要在另一条线上继续使用该语句，则应使用符号部分（如+或{或其他任何其他内容结束该行这不能作为陈述的最后一个符号。你不应该完全知道所有自动插入分号的规则。这些规则永远不会适用于这种情况。

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

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 {1}}。因此==的使用可以轻松打破主要的数学规则。

我建议您做的更简单和非关键的更改是使用rowObject.UserRoleID而不是rowObject["UserRoleID"]。您应该仅对变量使用["..."]语法，或者如果您使用包含rowObject["User.Role.ID"]或rowObject["User Role ID"]等特殊字符的属性，或者属性名称是某些JavaScript方言中的保留字，例如{{ 1}}或rowObject["class"]。

下一条评论：您应该验证字符串rowObject["if"]和"中的引号（'... title="Has Role";"></span>'）。部分'... title="Already Requested";"></span>';应该可以被删除。

最后，特别针对jqGrid的小评论。首先，我建议您从;"中删除不需要的index属性。删除colModel后，您将获得相同的结果，但您的代码将更短且易于阅读。下一条建议：如果index包含唯一值，则应考虑将key: true添加到列RoleID。它通知jqGrid将值用作rowid（id元素的<tr>属性的值）。

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

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。

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

1 个答案: