По указанной вами ссылке ведь есть готовый код:
var grid, dialog;
grid = $('#grid').grid({
// ваш url, который будет передавать данные из вашей бд
dataSource: '/Grid/GetPlayers',
uiLibrary: 'bootstrap',
// имена полей, которые следует выводить в таблице
columns: [
{ field: 'ID', width: 32 },
{ field: 'Name', sortable: true },
{ field: 'PlaceOfBirth', title: 'Place Of Birth', sortable: true }
],
pager: { limit: 5, sizes: [2, 5, 10, 20] }
});
Со стороны сервера можно сделать
Action в обычном контроллере, который будет делать запрос к базе и возвращать данные в формате
JSON. Но лучше использовать
WebAPI, это будет проще.
Для удаления и сохранения отдельные методы.
Набросал простой пример:
https://github.com/alekseynemiro/examples/tree/mas...
Возможно для проверки работы примера потребуется переустановить пакеты. Для этого откройте меню
Сервис =>
Диспетчер пакетов Nuget =>
Консоль диспетчера пакетов и введите следующую команду:
Update-Package –reinstall
В
контроллере есть метод
GetAccounts, который возвращает записи из базы:
[HttpPost]
public JsonResult GetAccounts(int page, int limit)
{
using (var context = new Database1Entities())
{
// получаем записи для указанной страницы
var result = context.Account.OrderBy(
row => row.AccountID
).Skip((page - 1) * limit).Take(limit).ToArray();
int total = context.Account.Count();
// возвращаем json
return Json(new { records = result, total = total });
}
}
В
представлении, в коде инициализации
jQuery Grid Bootstrap, указывается ссылка на этот метод:
grid = $('#grid').grid({
// ссылка на действие GetAccounts в контроллере Home
// запрос выполняется методом POST
dataSource: { url: '/Home/GetAccounts', method: 'POST' },
uiLibrary: 'bootstrap',
columns: [
{ field: 'AccountID', sortable: true },
{ field: 'FirstName', sortable: true },
{ field: 'LastName', sortable: true },
{ field: 'Company', sortable: true },
{ field: 'Position', sortable: true }
],
pager: { limit: 2, sizes: [2, 5, 10, 20] }
});