使用jsGrid / .net core 2.2 / MVC 我已经在登录控制台的ajax调用中成功返回了数据,但无法弄清楚为什么没有填充这些字段?
我的观点
<div id="jsGrid"></div>
@section scripts {
<script>
$(function () {
$("#jsGrid").jsGrid({
height: "50%",
width: "100%",
filtering: true,
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 5,
//deleteConfirm: "Do you really want to delete client?",
controller: {
loadData: function () {
var d = $.Deferred();
$.ajax({
type: 'GET',
url: "/operator/GridJson",
dataType: "json",
success: function (data) {
d.resolve(data);
console.log('success ', data);
},
error: function (e) {
alert("error: " + e.responseText);
}
});
return d.promise();
}
},
fields: [
{ name: "OperatorId", type: "number", width: 50 },
{ name: "FirstName", type: "text", width: 150 },
{ name: "LastName", type: "text", width: 150 },
{ name: "LicenseNumber", type: "number", width: 50, filtering: false },
{ name: "RFIDNumber", type: "number", width: 50, filtering: false },
{ name: "DateCreated", type: "date", width: 50, filtering: false },
{ name: "LastUpdated", type: "date", width: 50, filtering: false },
{ name: "CompanyId", type: "number", width: 50 }
// { type: "control" }
]
});
console.log("test");
});
</script>
}
我的控制器方法
[HttpGet]
public string GridJson()
{
List<OperatorDetail> operators = service.GetOperators();
string json = JsonConvert.SerializeObject(operators);
return json;
}
控制台日志
(5) [{…}, {…}, {…}, {…}, {…}]
0: {OperatorId: 1, FirstName: "driver1", LastName: "driver1", LicenseNumber: 12345, RFIDNumber: 12345, …}
1: {OperatorId: 2, FirstName: "driver2", LastName: "driver2", LicenseNumber: 23456, RFIDNumber: 23456, …}
2: {OperatorId: 3, FirstName: "driver3", LastName: "driver3", LicenseNumber: 34567, RFIDNumber: 34567, …}
3: {OperatorId: 4, FirstName: "driver4", LastName: "driver4", LicenseNumber: 45678, RFIDNumber: 45678, …}
4: {OperatorId: 5, FirstName: "driver5", LastName: "driver5", LicenseNumber: 56789, RFIDNumber: 56789, …}
length: 5
__proto__: Array(0)
答案 0 :(得分:1)
原因是您的loadData()
异步函数在获得响应之前就返回了。
要解决此问题,请更改您的loadData
函数以返回承诺。
loadData: function(filter){
return $.ajax({
type:"GET",
url: "/operator/GridJson",
data:filter,
dataType:"JSON",
});
}
[编辑]
实际上,如果您使用F12
开发人员工具检查源,则会发现已经渲染的字段。事实证明,我们还需要更改height: "100%"
,因为这将使这些字段不可见。
以下是工作样本的完整列表:
$("#jsGrid").jsGrid({ width: "100%",height: "100%",height: "400px", inserting: true, editing: true, sorting: true, paging: true, autoload: true, pageSize: 10, pageButtonCount: 5, //deleteConfirm: "Do you really want to delete client?", controller: { loadData: function(filter){ return $.ajax({ type:"GET", url: "/book/index", data:filter, dataType:"JSON", }); } }, fields: [ { name: "OperatorId", type: "number", width: 50 }, { name: "FirstName", type: "text", width: 150 }, { name: "LastName", type: "text", width: 150 }, { name: "LicenseNumber", type: "number", width: 50, filtering: false }, { name: "RFIDNumber", type: "number", width: 50, filtering: false }, { name: "DateCreated", type: "date", width: 50, filtering: false }, { name: "LastUpdated", type: "date", width: 50, filtering: false }, { name: "CompanyId", type: "number", width: 50 } // { type: "control" } ] });
演示:
答案 1 :(得分:1)
我最近也遇到了同样的问题,花了我一段时间才找到其他人向我指出。 itminus在解决方案中占了很大一部分,但是由于启用了Paging,因此需要在特定的JSON对象中返回数据。
{
data: [{your list here}],
itemsCount: {int}
}
它几乎没有在文档中,因为它是内联的,不是很明显。 (大胆的。)
loadData是一个返回数据数组或jQuery Promise的函数,该函数将使用数据数组进行解析(当pageLoading为true而不是对象结构 {data:[items],itemsCount:[total total count ]} )。
时接受过滤器参数,包括当前过滤器选项和分页参数