【问题标题】:JSGrid add icon instead of text based on true or false valueJSGrid根据真假值添加图标而不是文本
【发布时间】:2017-08-04 14:44:00
【问题描述】:

我正在尝试根据 JSGrid 中的值是真还是假来添加图标(锁)。

我有一个名为 SoftLock 的变量,如果这是真的,我想在网格上插入一个锁定图标。

我有以下字段,但不确定如何继续:

var fields = [
                        { name: 'ID', type: 'text', visible: false },
//THIS FIELD BELOW
                        { name: 'SoftLock', type: 'text', title: 'Locked', formatter : function () {return "<span class='fa fa-lock'><i class='fa fa-lock' aria-hidden='true'></i></span>"} },
//THIS FIELD ABOVE
                        { name: 'Status', type: 'select', items: MatterStatusEnum.List, valueField: 'Id', textField: 'Name', width: 70, title: 'Account Status' },
                        { name: 'AttorneyRef', type: 'text', title: 'Reference' },
                        { name: 'Investors', type: 'text', title: 'Investor/s' },
                        { name: 'AccountNumber', type: 'text', width: 70, title: 'Account Number' },
                        { name: 'IntermediaryName', type: 'text', title: 'Intermediary Name' },
                        { name: 'CreatedBy', type: 'text', title: 'Captured By' },
                        { name: 'RequestedDate', type: 'date', title: 'Requested Date'}
                ];

我使用格式化程序没有运气。另外,如果为真,如何显示图标,如果为假,则不显示。

任何帮助将不胜感激。

【问题讨论】:

    标签: javascript grid jsgrid


    【解决方案1】:

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

    { 
    name: 'SoftLock', type: 'text', title: 'Locked', width: 30, 
    itemTemplate : function (value, item) {
        var iconClass = "";
        if (value == true) {
            iconClass = "fa fa-lock"; //this is my class with an icon
        } 
        return $("<span>").attr("class", iconClass);
    }
    

    就这么简单:)

    【讨论】:

      【解决方案2】:

      稍后再尝试以下方法

      { 
          type: "control", 
          editButton: true
      }
      

      在正式文档中更好地描述了答案。

      http://js-grid.com/docs/#control

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2013-02-14
        • 2014-06-21
        • 2011-09-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多