將JSON轉換爲Html表的對象列表？

如果我有對象的列表將JSON轉換爲Html表的對象列表？

IEnumerable<MyType> myTypes;

是否有可能對我來說，返回給客戶作爲JSON

return Json(myTypes);

如果有的話，是有可能對我來說，轉換這種（現JSON格式）列表到<table>當它到達客戶端？

是否有任何jQuery插件來做到這一點？

事情是，我還需要將其他東西作爲JSON發送，因此使用PartialView生成表並將其嵌入到JSON中是一個額外的複雜性，我希望避免。

來源

2010-03-29 DaveDev

我來到了我自己的一個類似的問題的解決方案，我希望能夠顯示任何JSON對象數組響應成漂亮的桌子，而不必在JavaScript中硬編碼任何東西，所以它是可重用的！

這裏是我做過什麼......

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      type: "POST", 
      url: "DemoSvc.asmx/GetJSONTableContents", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: "{}", 
      success: function(res) { 
       $('#<%= DynamicGridLoading.ClientID %>').hide(); 
       $('#<%= DynamicGrid.ClientID %>').append(CreateDynamicTable(res.d)).fadeIn(); 
      } 
     }); 
    }); 
</script>

這是做數據從Web服務到頁面的拉動，該代碼的重要組成部分，是在調用「CreateDynamicTable（）」將JSON對象數組轉換爲漂亮的HTML表格。下面是代碼，輸出是一個漂亮的HTML表格。

function CreateDynamicTable(objArray) { 
    var array = JSON.parse(objArray); 

    var str = '<table class="lightPro">'; 
    str += '<tr>'; 
    for (var index in array[0]) { 
     str += '<th scope="col">' + index + '</th>'; 
    } 
    str += '</tr>'; 
    str += '<tbody>'; 
    for (var i = 0; i < array.length; i++) { 
     str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>'; 
     for (var index in array[i]) { 
      str += '<td>' + array[i][index] + '</td>'; 
     } 
     str += '</tr>'; 
    } 
    str += '</tbody>' 
    str += '</table>'; 
    return str; 
    }

我也在尋找一些免費的東西來做到這一點，但我發現的一切都是商業或需要硬編碼列值。我做了一個快速的博客文章，提供了更多的細節，屏幕快照和簡單的VS 2008演示。總的來說，它適用於我所需要的。

Blog Article on JSON data to HTML Table

來源

2010-03-31 21:27:49 Zachary

謝謝扎克瑞，這真是太棒了！ – DaveDev 2010-04-02 09:39:12

這不是一張HTML表格，但我使用jqGrid以及Craig Stuntz的helper functions將任何IQueryable<T>「導出」爲JSON。助手功能ToJqGridData發送JSON恰好由jqGrid的要求的格式，所以你的代碼是好的，整齊：

MyObjectRepository rep = new MyObjectRepository(); 
var myObjects = from o in rep.SelectAll() 
       select new 
       { 
        Prop1 = o.Prop1, 
        Prop2 = o.Prop2 
        ... 
       } 
return Json(apps.ToJqGridData(page, rows, sidx, null, null), JsonRequestBehavior.AllowGet);

要知道，你還需要更新您jqGrids全局設置，以使它們與兼容通過ToJqGridData使用的命名約定（我只是包括在我的母版頁這個腳本）：

$(document).ready(function() { 
    GridDemo.SiteMaster.setDefaults(); 
}); 

var GridDemo = { 
    Home: { 
     GridDemo: {} 
    }, 
    SiteMaster: { 
     setDefaults: function() { 
      $.jgrid.defaults = $.extend($.jgrid.defaults, { 
       datatype: 'json', 
       height: 'auto', 
       imgpath: '/Scripts/jqGrid/themes/lightness/images', 
       jsonReader: { 
        root: "Rows", 
        page: "Page", 
        total: "Total", 
        records: "Records", 
        repeatitems: false, 
        userdata: "UserData", 
        id: "Id" 
       }, 
       loadui: "block", 
       mtype: 'GET', 
       multiboxonly: true, 
       rowNum: 20, 
       rowList: [10, 20, 50], 
       viewrecords: true 
      }); 
     } 
    } 
};

來源

2010-03-29 19:09:01

@戴夫，感謝，但jqGrid的走了..商用那種規則出來給我。 – DaveDev 2010-03-29 19:11:09

好的廢話，完全錯過了。這是否意味着絕對沒有像樣的開源網格？ – 2010-03-29 20:19:30

是的，它也是最近纔開始的。我不知道其他任何開源網格。希望自從jqGrid離職後，一個新的公司將會開始。 – DaveDev 2010-03-29 21:49:10

將JSON轉換爲Html表的對象列表？

回答

相關問題