我正在使用gijgo网格来绑定数据。我使用gijgo网格做了两种方式。
1）首先使用html帮助器将数据绑定到html表并使用Gijgo进行CRUD，它绑定数据，执行CRUD但不会在添加，编辑和删除时重新加载网格。
<table id="grid">
<thead>
<tr>
<th width="56">ID</th>
<th data-sortable="true">Brand</th>
<th data-sortable="true">Model</th>
<th width="64" data-tmpl="<span class='material-icons gj-cursor-pointer'>edit</span>" align="center" data-events="click: Edit"></th>
<th width="64" data-tmpl="<span class='material-icons gj-cursor-pointer'>delete</span>" align="center" data-events="click: Delete"></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.Brand)
</td>
<td>
@Html.DisplayFor(modelItem => item.Model)
</td>
</tr>
}
</tbody>
</table>
在删除功能中，删除后网格不会重新加载
function Delete(e) {
if (confirm('Are you sure?')) {
$.ajax({ url: '/Home/Delete', data: { id: e.data.id }, method: 'POST' })
.done(function () {
//grid.reload({ page: 1});
grid.reload();
})
.fail(function () {
alert('Failed to delete.');
});
}
}
2）然后我使用这个例子通过ajax调用gijgo做了不同的gijgo网格绑定数据实现
Get函数返回JSON
public JsonResult Get(int? page, int? limit, string sortBy, string direction, string brand, string model)
{
List<CarsViewModel> records;
int total;
var query = _context.Cars.Select(p => new CarsViewModel
{
Id = p.Id,
Brand = p.Brand,
Model = p.Model
});
if (!string.IsNullOrWhiteSpace(model))
{
query = query.Where(q => q.Model != null && q.Model.Contains(model));
}
if (!string.IsNullOrWhiteSpace(brand))
{
query = query.Where(q => q.Brand != null && q.Brand.Contains(brand));
}
if (!string.IsNullOrEmpty(sortBy) && !string.IsNullOrEmpty(direction))
{
if (direction.Trim().ToLower() == "asc")
{
switch (sortBy.Trim().ToLower())
{
case "brand":
query = query.OrderBy(q => q.Brand);
break;
case "model":
query = query.OrderBy(q => q.Model);
break;
}
}
else
{
switch (sortBy.Trim().ToLower())
{
case "brand":
query = query.OrderByDescending(q => q.Brand);
break;
case "model":
query = query.OrderByDescending(q => q.Model);
break;
}
}
}
//else
//{
// query = query.OrderBy(q => q.o);
//}
total = query.Count();
if (page.HasValue && limit.HasValue)
{
int start = (page.Value - 1) * limit.Value;
records = query.Skip(start).Take(limit.Value).ToList();
}
else
{
records = query.ToList();
}
return this.Json(new { records, total }, JsonRequestBehavior.AllowGet);
}
jQuery(document).ready(function ($) {
grid = $('#grid').grid({
primaryKey: 'Id',
dataSource: '/Home/Get',
columns: [
{ field: 'Id', width: 56 },
{ field: 'Brand', sortable: true },
{ field: 'Model', sortable: true },
{ width: 64, tmpl: '<span class="material-icons gj-cursor-pointer">edit</span>', align: 'center', events: { 'click': Edit } },
{ width: 64, tmpl: '<span class="material-icons gj-cursor-pointer">delete</span>', align: 'center', events: { 'click': Delete } }
],
pager: { limit: 5 }
});
dialog = $('#dialog').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 360
});
$('#btnAdd').on('click', function () {
$('#Id').val('');
$('#Brand').val('');
$('#Model').val('');
dialog.open('Add Car');
});
$('#btnSave').on('click', Save);
$('#btnCancel').on('click', function () {
dialog.close();
});
$('#btnSearch').on('click', function () {
grid.reload({ page: 1, name: $('#txtBrand').val(), nationality: $('#txtModel').val() });
});
$('#btnClear').on('click', function () {
$('#txtBrand').val('');
$('#txtModel').val('');
grid.reload({ brand: '', model: '' });
});});
导致以这种格式返回JSON
{＆＃34;记录＆＃34;：[{＆＃34;标识＆＃34;：7，＆＃34;品牌＆＃34;：＆＃34;丰田＆＃34;＆＃34;型号＆＃ 34;：＆＃34;基质＆＃34;}，{＆＃34;标识＆＃34;：8，＆＃34;品牌＆＃34;：＆＃34;马自达＆＃34;＆＃34;型号＆＃34 ;：＆＃34; M3＆＃34;}]，＆＃34;总计＆＃34;：2}并且错误无法绑定数据 SyntaxError：位置1的JSON中的意外标记o
如果我删除记录和总计部分并将原始json作为数据源放置 [{＆＃34;标识＆＃34;：7，＆＃34;品牌＆＃34;：＆＃34;丰田＆＃34;＆＃34;型号＆＃34;：＆＃34;基质＆＃34;}， {＆＃34;标识＆＃34;：8，＆＃34;品牌＆＃34;：＆＃34;马自达＆＃34;＆＃34;型号＆＃34;：＆＃34; M3＆＃34;}] 然后数据绑定但grid.reload（）不起作用。我真的很沮丧为什么会出现这个问题。首先，gijgo网格服务器端控制器代码返回带有total的JSON数据记录，然后我无法将其与gijgo在jquery中提供的代码绑定。然后grid.reload（）没有工作
答案 0 :(得分：0)
您是否可以查看我们的ASP.NET示例，其中所有内容都已正确设置。您可以在https://github.com/atatanasov/gijgo-asp-net-examples
找到它们