javascript - 剑道网格 : Display collapsible data inside Grid cells

Question

我正在尝试在 Kendo UI 网格的单元格内显示可折叠数据。在我的 Kendo 网格中，有一列价格，每行，该价格列可能有多个值。为了显示特定单元格内的所有价格，我尝试了下面的模板。

 template : "<button type='button' class='btn btn-info' data-toggle='collapse' data-target='#demo'>Price</button>"
            + "<div id='demo' class='collapse'>"
            + "<ul>"
            + "#if (competitorPrice!=null){#"
            + " #for (var i=0,len=competitorPrice.length; i<len; i++){#"
            + " <li><b>#:competitorPrice[i].competitorName #:</b> #: kendo.toString(competitorPrice[i].price, 'n2')  #</li>"
            + "# } #"
            + "#}#"
            + "</ul>"
            + "</div>"

我只想折叠网格单元内的数据。我正在使用 bootstrap3 和 angularjs。

上面的代码在控制台中给出了以下错误消息。

angular.js:9778 Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td  role='gridcell'>#= kendo.toString(kendo.parseDate(date, 'yyyy-MM-dd'), 'dd-MM-yyyy') #</td><td  role='gridcell'>#:data.salesCount==null?'':data.salesCount#</td><td  role='gridcell'><button type='button' class='btn btn-info' data-toggle='collapse' data-target='#demo'></button><div id='demo' class='collapse'><ul>#if (competitorPrice!=null){# #for (var i=0,len=competitorPrice.length; i<len; i++){# <li><b>#:competitorPrice[i].competitorName #:</b> #: kendo.toString(competitorPrice[i].price, 'n2')  #</li># } ##}#</ul></div></td><td  role='gridcell'>#:data.availability==null?'':data.availability#</td><td  role='gridcell'>#:data.searchCount==null?'':data.searchCount#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr data-uid="'+(data.uid)+'" role=\'row\'><td  role=\'gridcell\'>'+( kendo.toString(kendo.parseDate(date, 'yyyy-MM-dd'), 'dd-MM-yyyy') )+'</td><td  role=\'gridcell\'>'+$kendoHtmlEncode(data.salesCount==null?'':data.salesCount)+'</td><td  role=\'gridcell\'><button type=\'button\' class=\'btn btn-info\' data-toggle=\'collapse\' data-target=\'';demo'></button><div id='demo' class='collapse'><ul>;$kendoOutput+='if (competitorPrice!=null){'; ;$kendoOutput+='for (var i=0,len=competitorPrice.length; i<len; i++){'; <li><b>;$kendoOutput+=':competitorPrice[i].competitorName '+$kendoHtmlEncode(</b> )+': kendo.toString(competitorPrice[i].price, \'n2\')  ';</li>;$kendoOutput+=' } ';;$kendoOutput+='}';</ul></div></td><td  role='gridcell'>;$kendoOutput+=':data.availability==null?\'\':data.availability';</td><td  role='gridcell'>;$kendoOutput+=':data.searchCount==null?\'\':data.searchCount';</td></tr>;$kendoOutput+=;}return $kendoOutput;'
at Error (native)
at Object.compile (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:25:7802)
at Object.d [as template] (http://kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js:2:3856)
at init._tmpl (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:50:16130)
at init._templates (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:50:17717)
at new init (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:48:16763)
at HTMLDivElement.<anonymous> (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:26:4091)
at Function.each (http://kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js:2:2881)
at n.each (http://kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js:2:846)
at n.e.fn.(anonymous function) [as kendoGrid] (http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js:26:4068)

如有任何建议，我们将不胜感激。

谢谢

Answer 1

您忘记在 data-target='#demo' 中转义特殊字符 # 只需在 # 个字符前面添加\反斜杠即可。