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

Question

我有一个web服务，它构建了一个JSON字符串，像这样:

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

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

这个Web服务是通过AngularJS ($http. js)使用的。get方法)。我想在列中显示ng-grid中的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);
  };
});

这是一个普朗克

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

更新:

关于宽度/换行问题:

这有点复杂，因为ng-grid不是一个表，而是显示为一个网格的许多div。

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

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

最后你必须重写ngCellText的css，像这样:

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

这是一个更新的Plunker