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

Question

我有一个 Web 服务，它构建如下 JSON 字符串:

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

(getProbingJobs 是一个从存储过程中检索数据的 Entity Framework 函数)

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

我的 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() 函数，并且不会被解析。

您可以通过在 ColumnDefs 中使用 CellTemplate 并使用自定义过滤器来修复此问题:

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

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

更新:

关于宽度/环绕问题:

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

首先，您必须将gridOptions中的rowHeight设置为一个合适的值。

然后，您必须为每一列指定单独的宽度，以便它可以显示最长的完整单词。

最后你必须重写 ngCellText 的 CSS，如下所示:

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

这是更新的Plunker