2014-01-30 51 views
0

我是jqGrid的新手。我正在尝试实现一个jqGrid,它填充了REST调用返回的数据以及多个用户可以编辑的复选框,以便使用另一个其他调用将新对象上载到数据库。我在填充网格时遇到问题。jqGrid没有填充

我遇到的问题是网格似乎占用了页面上的垂直空间,但没有显示任何信息。当我只有一个没有数据的网格时,网格的标题显示正常。

在使用Chrome进行调试期间,我发现在控制台中评估时,我预期从行对象返回的属性不存在,即。他们是不确定的。

这里是我使用的代码:

var RGrid = []; 

$.ajax({ 
    url: restApi + EndPoint + '/' + Number, 
    type: 'GET', 
    success: function (response) { 
     Object2 = response; 

     var rData = $('#ResGrid').jqGrid().getRowData(); 

     for (var i = 0; i < Object2.Requests.length; i++) { 
      var existingRows = rData.filter(function (a) { 
       return a.rId == Object2.Requests[i].Resource.Id; 
      }); 
      if (existingRows.length == 0) { 
       var newObj = { 
        a: Object2.Requests[i].Resource.Name, 
        e: Object2.Requests[i].Resource.Id, 
        f: Object2.Requests[i].Id, 
        d: false, 
        b: false, 
        c: false 
       }; 
       RGrid.push(newObj); 
       $('#ResGrid').jqGrid('addRowData', 1, newObj); 
      } 
     } 
    }, 
    error: function (textStatus) { 
     Error('We were unable to retrieve the item'); 
    } 
}); 

$('#ResGrid').jqGrid({ 
    defaults: { 
     emptyrecords: "No items assigned", 
     loadtext: "Loading..." 
    }, 
    data: RGrid, 
    autowidth: true, 
    datatype: "local", 
    colModel: [ 
     { label: 'a', name: 'a', align: 'left', editable: false }, 
     { 
      label: 'b', name: 'b', align: 'center', editable: true, edittype: 'checkbox', 
      editoptions: { value: "True:False" }, 
      formatter: "checkbox", formatoptions: { disabled: false } 
     }, 
     { 
      label: 'c', name: 'c', align: 'center', editable: true, edittype: 'checkbox', 
      editoptions: { value: "True:False" }, 
      formatter: "checkbox", formatoptions: { disabled: false } 
     }, 
     { 
      label: 'd', name: 'd', align: 'center', editable: true, edittype: 'checkbox', 
      editoptions: { value: "True:False" }, 
      formatter: "checkbox", formatoptions: { disabled: false } 
     }, 
     { name: 'e', hidden: true }, 
     { name: 'f', hidden: true } 
    ], 
    rowNum: 1000, 
    height: 'auto', 
    viewrecords: true, 
    caption: "Desc", 
    grouping: false, 
    loadonce: true 
}); 

我试图不通过值的复选框列和addRowData方法的几个重载,无有作用。奇怪的是,传递给RGrid数组的对象似乎有我期望的所有属性 - 值对,所以我怀疑问题是使用colModel声明还是使用addRowData方法。

编辑:

{ “ID”:我从服务器收到的JSON 4, “jobnumber可以”: “PrNum75”, “订单号码”:空, “QuoteNumber”: “1401291641”, “QuoteId” :33, “请”:[{ “ID”:10 “PlannedDays”:[{ “ID”:20 “时间”:4.0, “日期”: “2014-02-20T00:00:00”}] ,“PlannedSkillDef”:{“Id”:1,“Description”:“IPE Inspector”,“DefaultRate”:200.0},“QuoteSection”:{“Id”:54,“Description”:“Ves” :5, “TotalServices”:1000.0, “TotalConsumables”:100.0, “TotalTravel”:5.0 “TotalAmountPerVessel”:1105.0, “TravelExpenses”:[{ “ID”:26, “AgreedRate”:3.0, “数量”:1 ,“TravelDef”:{“Id”:1,“Description”:“Resource & NDT Travel”,“UnitDescription”:“Km”,“DefaultRatePerUnit”:3.0}},{“Id”:27,“AgreedRate” 2.0,“数量”:1,“TravelDef”:{“Id”:2,“说明”:“机械服务旅行”,“UnitDesc ription “:” 公里”, “DefaultRatePerUnit”:2.0}}], “消耗品”:[{ “ID”:16, “数量”:1, “AgreedPrice”:100.0, “ConsumableDef”:{ “ID”:3 ,“说明”:“MT/PT消费品罐”,“UnitPrice”:100.0}}],“服务”:[{“Id”:17,“ServiceDef”:{“Id”:1,“Description” “非破坏性测试 - 检查”,“DefaultSkill”:{“Id”:2,“Description”:“CPV”,“DefaultRate”:250.0},“TasksRequired”:[{“Id”:1,“Description” “厚度测试”},{“Id”:2,“描述”:“表面裂缝测试”},{“Id”:3,“描述”:“报告”},{“Id”:4, :“TravelDefs”:[{“Id”:1,“Description”:“Resource & NDT Travel”,“UnitDescription”:“Km”,“DefaultRatePerUnit”:3.0},{“Id” :2,“Description”:“Mechanical Service Travel”,“UnitDescription”:“Km”,“DefaultRatePerUnit”:2.0}],“ConsumableDefs”:[{“Id”:3,“Description” PT耗材“,”UnitPrice“:100.0}]},”DefaultSkill“:{”Id“:70,”Rate“:0.0,”SkillDef“:{”Id“:2”Description“ DefaultRate “:250.0}},” AgreedSkill “:{” ID “:69,” 速度 “:250.0,” SkillDef “:{”Id“:1,”Description“:”IPE Inspector“,”DefaultRate“:200.0}},”ServiceTasks“:[{”Id“:92,”TaskHours“:1,”NumberOfShifts“ “NumberOfStaff”:1,“ServiceTaskDef”:{“Id”:1,“Description”:“Thickness Testing”}},{“Id”:93,“TaskHours”:1,“NumberOfShifts”:1,“NumberOfStaff” :1,“ServiceTaskDef”:{“Id”:2,“Description”:“Surface Crack Testing”}},{“Id”:94,“TaskHours”:1,“NumberOfShifts”:1,“NumberOfStaff” “ServiceTaskDef”:{ “ID”:3, “描述”: “报告”}},{ “ID”:95, “TaskHours”:1, “NumberOfShifts”:1, “NumberOfStaff”:1, “ServiceTaskDef” :{“Id”:4,“Description”:“NDT Travel”}}]}]},“Resource”:{“Id”:1,“ADUserName”:“###”,“Name” Smith“,”SkillDefs“:[]},”ServiceDef“:{”Id“:1,”Description“:”非破坏性测试 - 检查“,”DefaultSkill“ CPV“,”DefaultRate“:250.0},”TasksRequired“:[{”Id“:1,”Description“:”Thickness Testing“},{”Id“:2,”Description“:”Surface Crack Testing“ {“Id”:3,“Description”:“Reporting”},{“Id”:4,“Description”:“NDT Travel”}],“TravelDefs”:[{“Id”:1, “资源& NDT Travel“,”UnitDescription“:”Km“,”DefaultRatePerUnit“:3.0},{”Id“:2,”Description“:”Mechanical Service Travel“,”UnitDescription“:”Km“,”DefaultRatePerUnit“ }],“消耗品设置”:[{“Id”:3,“描述”:“罐头MT/PT消耗品”,“单价”:100。0}]}}],“消耗品”:[],“TravelAllocations”:[]}

我感兴趣的部分是WorkRequests,其中需要名称和资源ID。

回答

0

我已经找出问题所在。声明和填充jqGrid的代码是在一个脚本文件中的,该文件在页面上被引用,该表格被声明为网格。我的一个基本的新手错误。

谢谢大家帮助我,并抱歉占用您的时间。猜猜这是回到了C#...

0

你可以尝试在complete: function(){// here your jqgrid}这样做:

“loadonce:真正的”没有必要用这个作为你的数据类型是本地

var RGrid = []; 

$.ajax({ 
    url: restApi + EndPoint + '/' + Number, 
    type: 'GET', 
    success: function (response) { 
     Object2 = response; 

     var rData = $('#ResGrid').jqGrid().getRowData(); 

     for (var i = 0; i < Object2.Requests.length; i++) { 
      var existingRows = rData.filter(function (a) { 
       return a.rId == Object2.Requests[i].Resource.Id; 
      }); 
      if (existingRows.length == 0) { 
       var newObj = { 
        a: jobObject2.Requests[i].Resource.Name, 
        b: jobObject2.Requests[i].Resource.Id, 
        c: jobObject2.Requests[i].Id, 
        d: false, 
        e: false, 
        f: false 
       }; 
       RGrid.push(newObj); 
      } 
     } 
    }, 
    error: function (textStatus) { 
     Error('We were unable to retrieve the item'); 
    }, 
    complete: function(){ 

       $('#ResGrid').jqGrid({ 
        defaults: { 
         emptyrecords: "No items assigned", 
         loadtext: "Loading..." 
        }, 
        data: RGrid, 
        autowidth: true, 
        ......... 

    } 
}); 
+0

这没有帮助。 – user2458781

0

它的更好,如果你会使用datatype: "json"。在的情况下,jqGrid将向服务器发出请求。您只需使用url选项,如url: restApi + EndPoint + '/' + NumberjsonReader,如jsonReader: {root: "Requests", repeatitems: false}。它会通知jqGrid在哪里找到响应中的数据。此外,您需要使用jsonmap选项将名称为'a','b','c',...的属性绑定到属性Resource.Name和其他服务器响应中。

jobObject2.Requests[i].Resource.IdjobObject2.Requests[i].Id具有formatter: "checkbox"'b''c'列的映射,似乎我很怀疑。有ID可能的价值可能是TrueFalse只是很奇怪。另外的问题是在循环中使用变量Object2,但在循环体中使用未定义的jobObject2。我想现在的代码最小限度的解决方法是:在successcomplete回调内移动创建网格,并将jobObject2替换为Object2。我会看到下一个问题。你目前的问题是:如何用从服务器返回的数据填充网格。

,我建议应该对下面的代码:

$('#ResGrid').jqGrid({ 
    datatype: "json", 
    url: restApi + EndPoint + '/' + Number, 
    gridview: true, 
    autoencode: true, 
    loadonce: true, 
    jsonReader: { 
     root: "Requests", 
     repeatitems: false 
    }, 
    colModel: [ 
     { name: "a", jsonmap: "Resource.Name" }, 
     { name: "b", jsonmap: "Resource.Id", align: "center" }, 
     { name: "c", jsonmap: "Id", align: "center" } 
    ] 
    ... 
}); 

修订The demo显示,发布上述选项使用JSON数据的最后一个版本,您发布工作。

+0

我在编辑我的发布代码时犯了一些错误,发布的代码现在应该是正确的。 false值用于复选框列,我不能绑定到json中的属性。我试过这个选项,并得到相同的结果。 – user2458781

+0

@ user2458781:对不起,但我不明白你目前的状态。如果将问题的文本附加到从服务器返回的测试JSON数据(3-5行就足够了),会更容易。您可以使用谷歌浏览器的开发工具捕捉从服务器返回的确切数据(请参阅“网络”部分) – Oleg

+0

我已将json示例添加到原始问题。 – user2458781