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

在描述网格的列时，是否可以在列中添加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;
            }
        }
    }
}
},

---

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

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

或

上面的例子不起作用。因此，在

列

属性中，您必须使用一个属性：

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

是的，您必须自己设置按钮html。（事实上，这是一种耻辱）

您可以检查

模板的工作方式

那么您的列项目应该是：

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

试试看，告诉我发生了什么。
希望这个dojo就是您想要的：

（我使用了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; 
              }

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

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

任何问题都让我知道
 
这是剑道网格代码
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; 
                            }

{字段：“标记”，标题：“标记”，宽度：“160px”，
模板：函数（数据项）{
var marks=dataItem.marks；
var retString=''；
如果（标记！==null&&marks！==未定义）
{
如果（标记长度>40）
{
marks1=marks.substring（0,40）+’…”；
retString1=''+marks1+''；
retString=retString1+“标记”；
}
其他的
{
retString=''+标记+''；
}
}否则
{
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>


谢谢你的回复。它起作用了。但我有一个问题。我在一个指令中输入了这段代码，并且从两个不同的屏幕调用了它。在一个屏幕上，它工作正常，但在另一个屏幕上，弹出窗口没有显示出来。不确定为什么？另一个屏幕是一个模型弹出窗口，我们在其中有一个网格I部分正在启动..，没有弹出窗口，但按钮正在显示。如果我们从某个模式弹出窗口启动，那么它将不起作用？或者需要做其他事情？很高兴它对您起作用。如果您能提供一个代码示例，我将非常乐意帮助解决此问题。在没有代码的情况下测试有点困难。我已添加了您的代码into更新的dojo什么是addlRemarks，因为它似乎没有在代码示例中列出，第二段代码是如何连接的？我猜您使用的是Angular（我对Angular知之甚少，所以这将有助于我的工作）是的，我正在使用AngularJs，这也是它对我工作的方式….，只是想问一下，如果表格是在模式弹出窗口中启动的，那么它的行为就不符合预期….，弹出窗口不出现了，那么你在模式中有网格吗？我已经更新了dojo，显示弹出窗口在模式中工作。只需检查你是否正在为popov设置容器当弹出框显示在网格后面而不是网格中时，弹出框将显示在窗口而不是主体上。
 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; 
              }

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

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

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