今日在赶项目的时候遇到了一个问题:
后台传了一份JSONArray到前端,前端已经可以接受数据
用的是网上找的一份关于已知JSON数据,去渲染EasyUI_DataGride表格的代码:
<div id="dlg" class="easyui-dialog" title="评测" style="width:100%;height:100%;"
data-options="resizable:true,modal:true">
<table id="dg" class="easyui-datagrid" style="width:100%;height:100%;"
data-options="singleSelect:true,collapsible:true">
<thead>
<tr>
<th data-options="field:'tableName',width:80">表明 </th>
<th data-options="field:'itemInfo',width:80">信息 </th>
<th data-options="field:'whoTestName',width:100">详细信息</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
var jsonObj = ${testInfos};//转换为json对象
var total = jsonObj.length;
console.log(jsonObj);
var datasource = { total: total, rows:jsonObj};
$("#dg").datagrid('loadData',jsonObj);
</script>
但在渲染的时候却报错了:
排查是
但EasyUI源码的代码实在太多了,项目要赶着完成,慢慢看应该是来不及的,有点一筹莫展。
只能查查看有没有人遇到相同的问题,然后就发现了一位小哥问了一个问题:
小哥博客地址:https://blog.csdn.net/OnlyRu/article/details/79070573
突然发现还有另外一种渲染方式,赶紧试了下:
<div id="dlg" class="easyui-dialog" title="评测" style="width:100%;height:100%;"
data-options="resizable:true,modal:true">
<table id="dg" class="easyui-datagrid" style="width:100%;height:100%;"
data-options="singleSelect:true,collapsible:true">
<thead>
<tr>
<th data-options="field:'tableName',width:80">表明名</th>
<th data-options="field:'itemInfo',width:80">信息 </th>
<th data-options="field:'whoTestName',width:100">详细信息</th>
<!--<th data-options="field:'id',width:80">表名 </th>
<th data-options="field:'name',width:80">信息 </th>
<th data-options="field:'role',width:100">详细信息</th> -->
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
$("#dg").datagrid({
data: ${testInfos} //${testInfos}为后台传来的JSONArray数据,用这个符号取
//因为此项目用前端是JSP
});
</script>
然后就成功的渲染了,虽然头一个问题仍然不知道是为什么。但总归是曲线救了国,Mark一下留着以后看看(虽然感觉很可能会忘了有这么回事…但记一记自己欠的帐也好