Question

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

这是我的代码

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 });
                  }

然后我将数据绑定事件连接到网格，然后将事件功能附加到＆＃34;弹出＆＃34;在我的样本中

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

任何问题都让我知道。

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>

如何在kendo网格中的列下放置if条件

3 个答案: