Question

我有一个Web服务，它构建一个像这样的JSON字符串：

JavaScriptSerializer j = new JavaScriptSerializer();
return "[" + string.Join(",", v.getProbingJobs().Select(a => j.Serialize(a)).ToArray()) + "]";

（getProbingJobs是一个从存储过程中检索数据的实体框架函数）

此Web服务通过AngularJS（$ http.get方法）使用。我想在列中的ng-grid中显示JSON字符串。相反，它显示带有一列的ng-grid，每行（单元格）显示来自JSON字符串的char。

我的JSON字符串是这样构建的：

"[{\"visualid\":\"35422064B1181\",\"operator\":\"ishashua\",\"Step\":\"Probe\",\"Eqiument\":\"LTM3538\",\"Last_Step_Start_Time\":\"\\\/Date(1406725260000)\\\/\",\"Job_Name\":\"P0 minVcc (UNIT 35422064B1181 )\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Closed\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Event\",\"Eqiument\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"11 Other\",\"Event_Name\":\"07 Unit Cracked\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Closed\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Probe\",\"Eqiument\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Probe\",\"Eqiument\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"11 Other\",\"Event_Name\":\"07 Unit Cracked\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00931\",\"operator\":\"kgitelmk\",\"Step\":\"Probing\",\"Eqiument\":\"LVX503\",\"Last_Step_Start_Time\":\"\\\/Date(1406698980000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0931)\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"}]"

Answer 1

一般来说@Chandermanis评论是对的。但是，您还有Last_Step_Start_Time字段，其中包含DATE()函数，无法解析。

您可以使用CellTemplate中的ColumnDefs并使用自定义过滤器来解决此问题：

cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field) | resolve_date}}</div>'

这是过滤器（肯定可以做得更优雅）：

app.filter('resolve_date', function() {
  return function(text, length, end) {
    text = text.substring(6, 19);
    return Date(text);
  };
});

这是Plunker

Plz投票@Chandermanis评论，因为这基本上是正确答案。

<强>更新

关于宽度/包装问题：

实现起来有点复杂，因为ng-grid不是一个表，而是很多div显示为网格。

首先，您要将rowHeight中的gridOptions设置为合适的值。

然后你必须给每一列一个单独的宽度，这样它才能显示最长的完整单词。

最后你必须覆盖ngCellText的css，如下所示：

.ngCellText.ng-scope{
  white-space:normal;
}

这是更新的Plunker

在ng-grid中显示json复杂字符串

1 个答案: