如何在剑道网格的列下放置if条件

Question

我们可以在描述网格列的同时在列内添加 if 条件吗？这段代码有什么问题
如果文本长度超过 40char，我想在一列下的网格中显示一个按钮。 如果内容/数据小于 40 字符，我试图设置一个 if 条件，然后显示内容，否则显示一个按钮，单击按钮打开一个弹出窗口以显示该弹出窗口内的完整内容？ 我们如何才能有条件地放置命令来显示按钮？

这是我的代码

columns: [{
    field: "id",
    title: "ID",
    width: "100px"
}, // fields in  the grid
{
    field: "name",
    title: "Name",
    width: "100px"
}, {
    field: "remarks",
    title: "Remarks",
    width: "160px", // under this column button will be displayed in each
    var length = 40;
    if (data.remarks.length > length) { //here this condition seems to be wrong, is there any other way to display the button for this condition
        command: {
            name: "remarks",
            text: "Remarks",
            click: function (e) {
                var tr = $(e.target).closest("tr");
                var data = this.dataItem(tr);
                var win = $('#remarksWindow');
                win.html(data.remarks);
                if (!win.data('kendoWindow')) {
                    win.kendoWindow({
                        width: '600px',
                        height: '200px',
                        title: 'Remarks',
                        actions: ['Close']
                    });
                }
                win.parent().css({
                    top: e.pageY - 50,
                    left: e.clientX - 640,
                    width: '600px',
                    height: '200px'
                });
                win.data('kendoWindow').open(); // open the pop-up which contains the data
                return false;
            }
        }
    }
}
},

Answer 1

首先，您在 JavaScript 中有一个语法错误。请注意，您不能在对象的属性之间放置语句或声明：

var obj = {
    a: 1,
    if (true) {
        b: 2;
    }
}

或者

var obj = {
    a: 1,
    var b = 1;
}

上面的例子不起作用。因此，在您的 column 属性中，您必须使用 template 属性：

{
    field: "remarks",
    title: "Remarks",
    width: "160px", 
    template: "" // <- here goes your logic
}

所以一个简单的template可以设置为一个字符串，其中包含带有JavaScript逻辑的html，例如：

# if (remarks.length > 40) { # <input type='button' class='btn-remarks' /> # } #

是的，您必须自己设置按钮 html。 There is no way to add a condition to a command button（实际上，这很可惜）。

^{您可以查看template 的工作原理here。}

那么你的列项应该是：

{
    field: "remarks",
    title: "Remarks",
    width: "160px", 
    template: "# if (remarks.length > 40) { # <input type='button' class='remarks' /> # } #"
}

然后你必须为所有按钮设置事件（可能在dataBound事件中）：

$("#yourGrid").on("click", ".btn-remarks", function() 
{
    // all your click logic here
});

试一试，告诉我会发生什么。

Answer 2

希望这个道场是您正在寻找的：http://dojo.telerik.com/ETora

（我使用了 Telerik 的一个网格演示并进行了修改以向您展示原理）

您正在寻找的功能可以通过两种方式实现：

1) 将客户端模板应用到列

2) 添加一个绑定按钮的数据绑定事件

 columns:[ {
              field: "CompanyName",
              title: "Company Name", 
              template: "#= displayTextorButton(data.CompanyName) #"
         }]


 function displayTextorButton(data){
                var retString = ''; 
                console.log(data); 
                if(data !== null && data !== undefined)
                {
                  if(data.length > 20)
                  {
                    retString =  ' <button type="button" class="btn btn-xs btn-primary"' +
                    'data-toggle="popover" data-placement="auto right" data-container="body" ' +
                'data-content="' + kendo.htmlEncode(data) + '"' +
                'data-title="Running Log Information"  data-trigger="click" data-role-me="content-popover" > <span class="glyphicons glyphicons-pencil"></span> View</button>'; 
                  }
                  else 
                  {
                    retString = '<span>' + data + '</span>';
                  }
                }else 
                {
                  retString = '<span> - </span>'; 
                }

                return retString; 
              }

所以我所做的第一件事是在公司名称列中添加一个模板，检查名称是否超过 20 个字符，如果是，那么它将显示一个按钮，如果不是，那么它将显示文本为普通的。

 function(e){
             $('button[data-role-me="content-popover"]').popover({ trigger: "focus", html: true });
                  }

然后我将数据绑定事件连接到网格，然后将事件功能附加到示例中的“弹出窗口”

另外请注意，我加入了引导功能只是为了让演示更容易一些。所以这是使用他们的弹出功能。您可以修改此代码以使用您的窗口。

任何问题让我知道。

Answer 3

This is the kendo grid code

    { field: "marks", title: "marks",width: "160px",
                            template: function(dataItem) {
                                var marks = dataItem.marks;
                                var retString = ''; 
                                if(marks !== null && marks !== undefined)
                                {
                                  if(marks.length > 40)
                                  {
                                   marks1 = marks.substring(0, 40)+'...';
                                    retString1 ='<span>'+ marks1 +'</span>';
                                    retString =  retString1 + ' <button id="marksButton" type="button"' +
                                    'data-toggle="popover" data-placement="auto right" data-container="body" ' +
                                    'data-content="' + kendo.htmlEncode(addlRemarks) + '"' +
                                    'data-title="marks" data-trigger="click" data-role-me="content-popover" > marks</button>';
                                  }
                                  else 
                                  {
                                    retString = '<span>' + marks + '</span>';
                                  }
                                }else 
                                {
                                  retString = '<span> - </span>'; 
                                }
                                return retString; 
                            }

它是从 HTMl 调用的

<div class="panel-body" ng-show="accOpen[$index]">
                                    <!-- Marks TABLE -->
                                    <div marks-table="" 
                                        accordion-flag="accOpen[$index]"
                                        name="name"
                                        id="id"
                                        >
                                    </div>
                                </div>