Предпосылки:
- Проверьте предыдущий учебник, часть 2 https://dev.to/zoltanhalasz/ag-grid-tutorial-with-asp-net-core-razor-pages-part-2-2315.
- Проверьте документацию для AG-GRID, я свяжу его под правильной точкой
- Приложение онлайн: https://ag-grid3.zoltanhalasz.net/
- Репозиторий для этого руководства: https://drive.google.com/Open?id=1Wabklysg3lpbfwock_nfyomhfftypock_f.
- Промежуточный JavaScript и ASP. Чистая основная бритва страниц
1. Выбор строки и удаление строк с помощью AJAX https://www.ag-grid.com/javascript-grid-selection/
Целью здесь состоит в том, чтобы выбрать строки и удалить их из списка и таблицы базы данных. Выбор описан в вышеуказанной ссылке и реализован в части JavaScript страницы индекса.
function deleteSelectedRows() {
var selectedNodes = gridOptions.api.getSelectedNodes()
var selectedData = selectedNodes.map(function (node) { return node.data })
if (selectedData) {
postData('./api/InvoiceModels', selectedData)
.then((data) => {
console.log("response", data); // JSON data parsed by `response.json()` call
});
}
Для этого я создал контроллер API для класса INCICEMODEL и поместил его в папку контроллеров. Затем переписать пост-маршрутизацию, который принимает список INPOICEMODEL в качестве ввода, а затем удаляет их из таблицы:
// POST: api/InvoiceModels
[HttpPost]
public async Task>> PostInvoiceModel(List invoiceModels)
{
if (invoiceModels==null) return NoContent();
foreach (var model in invoiceModels)
{
var myinvoiceModel = await _context.InvoiceTable.FindAsync(model.ID);
if (myinvoiceModel != null)
{
_context.InvoiceTable.Remove(myinvoiceModel);
}
}
await _context.SaveChangesAsync();
return await _context.InvoiceTable.ToListAsync();
}
На странице индекса есть команда Fetch, которая общается с этим маршрутом API:
async function postData(url = '', data = {}) {
console.log(JSON.stringify(data), url);
await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data) // body data type must match "Content-Type" header
}).then(function (response) {
console.log(response.json());
}).then(function (response) {
agGrid.simpleHttpRequest({ url: './Index?handler=ArrayData' }).then(function (data) {
gridOptions.api.setRowData(data);
});
}).catch(() => console.log("err"));
}
2. Опции фильтрации Пожалуйста, учись: https://www.ag-grid.com/javascript-grid-filter-provied-simple/ . a. С помощью фильтра установлен на false, фильтр невидим для этого столбца б. Для числовых фильтров мы можем использовать ниже (на самом деле это будет с диапазоном)
{
headerName: "Amount", field: "Amount",
filter: 'agNumberColumnFilter', filterParams: {
filterOptions: ['inRange']
}
},
с. Для категории будет использоваться текстовый фильтр:
{
headerName: "CostCategory", field: "CostCategory", checkboxSelection: true,
filter: 'agTextColumnFilter', filterParams: {
defaultOption: 'startsWith',
resetButton: true,
applyButton: true,
debounceMs: 200
}
},
3. Импорт данных . Я сохранил файл import.xlsx под wwwroot/uploads, имея следующую структуру (Под данными вкладка разграничена)
ID InvoiceNumber Amount CostCategory Period 1 1 500.00 Utilities 2019_11 2 2 121.69 Telephone 2019_12 3 3 342.61 Services 2019_11 4 4 733.21 Consultancy 2019_11 5 5 107.79 Raw materials 2019_10 6 6 161.44 Raw materials 2019_11 7 7 334.48 Raw materials 2019_11 8 8 504.63 Services 2019_11 9 8 869.44 Services 2019_11 10 9 401.57 Services 2019_11
б. Я проверил документацию загрузки и взял свой пример https://www.ag-grid.com/example-excel-import/
с. Пожалуйста, смотрите реализацию точки B, это почти копировальная вставка, просто добавляя мои столбцы вместо этого:
После нажатия кнопки импорта сетка заполняется значениями из Import.xlsx, помещенного в wwwroot/uploads.
Результат будет:
Содержимое страницы импорта:
@page
@model DataTables.ImportModel
@{
ViewData["Title"] = "Import";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
Import from pre-uploaded excel file (import.xlsx)
Оригинал: “https://dev.to/zoltanhalasz/ag-grid-tutorial-with-asp-net-core-razor-pages-part-3-3jnh”