在外部Javascript中使用JQGrid的表

Question

我有以下代碼用於支付商品。 喜歡 ：-

function DisplayNewList()
{

                $("#list").jqGrid({
                    datatype: 'json',

                    url: 'Service.svc/json/getIngredients/',

                    mtype: 'GET',


                    colNames: ['Ingredents', 'Value'],
                    colModel: [
                        { name: 'Ingredents', index: 'Ingredents', width: 100 },
                        { name: 'value' }


                    ]
                });



}

我用了上面的jqgrid。 但是不能將表放在適當的位置，也不能在其上顯示任何數據。

我在頁面底部得到2個單元格（表格標題）。 不在我指定的框內。

“列表”是表ID，在.aspx文件中。 上面的代碼在外部Java腳本文件中。

你能告訴我在哪里放置jqgrid。 以及如何在這里使用它。

現在得到這樣的表：

對於getIngredients，我有這樣的服務：-IService：

[OperationContract]
         [WebInvoke(Method = "GET",
          UriTemplate = "json/getIngredients",
          ResponseFormat = WebMessageFormat.Json,
          BodyStyle = WebMessageBodyStyle.Wrapped)]
         [return: MessageParameter(Name = "Status")]
         List<ItemList> GetIngredients;

謝謝。

Answer 1

您應該將空表<table id="list"></table>放在HTML片段內。 您應該通過使用$("#list").jqGrid({...});將空表轉換為網格$("#list").jqGrid({...}); 在<table>已經放置在頁面上之后 。

更新 ：您有從url: kimsHost + 'Service.svc/json/getIngredients/'加載數據的問題。 我建議您執行以下操作：

1. 添加loadError回調。 有關詳細信息，請參見答案 。
2. 添加以下選項/回調：

ajaxGridOptions: { contentType: "application/json" },
serializeRowData: function (data) {
    return JSON.stringify(data);
},
gridview: true,
autoencode: true

3. 我建議您考慮使用loadonce: true選項。 如果服務器返回所有數據並且未實現服務器端的分頁，排序和過濾/搜索，則應使用它。
4. 我建議從colModel刪除不需要的index屬性，並確認sortname: 'Timestamp'是您真正需要的選項。 您應該刪除尾隨,在結束colModel 。 語法...},]在JavaScript中錯誤。 大多數現代的Web瀏覽器都將忽略該錯誤，但是某些Web瀏覽器（例如IE8）會發現該問題很嚴重。 最好修復JavaScript代碼的語法。