时间戳

首页 > 解决方案 > Syncfusion 无法从数据源呈现 Grid 行模板表达式值

javascript - Syncfusion 无法从数据源呈现 Grid 行模板表达式值

问题描述

嗨，我正在使用 Syncfusion Essential JS2 for JavaScript(ES5)，并尝试使用 Grid 组件来呈现来自该 testdata 数组的数据：

var testdata = [{firstName: 'Tony', lastName: 'Stark'}, {//some other objects}];

我像这样创建了网格对象：

var grid = new ej.grids.Grid({
    dataSource: testdata,
    rowTemplate: '#row-template',
    columns: [
        {field: 'firstName', headerText: 'First Name'},
        {field: 'lastName', headerText: 'Last Name'}
    ],
});
grid.appendTo('#grid');

我的jsp中的实际模板脚本如下所示：

<script id="row-template" type="text/x-template">
    <tr>
        <td>${firstName}</td> <!-- should render 'Tony' -->
        <td>${lastName}</td> <!-- should render 'Stark' -->
    </tr>
</script>

当我运行它时，td 标签是空白的。看起来 '${}' 语法不起作用，然后我尝试将硬编码值放入 td 标签中，

<td>Test First Name</td>
<td>Test Last Name</td>

果然，硬编码值被成功渲染。但我需要从'testdata'数组中获取值..

我希望这里有人以前使用过网格组件。请帮我。以下是我使用的技术：

Syncfusion Essential JS(ES5)、JSP、Spring、

谢谢你。

标签： javascriptsyncfusion

解决方案

我终于解决了这个问题。问题在于 Syncfusion 的模板引擎和 JSTL (JSP) 模板引擎具有相同的语法：

${expression}

因此，这个脚本：

<script id="row-template" type="text/x-template">
<tr>
    <td>${firstName}</td> <!-- should render 'Tony' -->
    <td>${lastName}</td> <!-- should render 'Stark' -->
</tr>

因为它是写在 jsp 文件中的，所以 ${firstName} 和 ${lastName} 被呈现为好像它是一个 JSTL 表达式。这就是为什么 td 标签是空白的。

为了解决这个问题，我只是将模板代码从 jsp 移到了我的 js 文件中。

var grid = new ej.grids.Grid({
dataSource: testdata,
rowTemplate: '<tr><td>Write template code here</td></tr>',
columns: [
    {field: 'firstName', headerText: 'First Name'},
    {field: 'lastName', headerText: 'Last Name'}
],
});
grid.appendTo("#Grid");

推荐阅读