API接口数据交互——DataGrid系列

…………

@(Html.DevExtreme().DataGrid<Model>()
　　…………
　　.ID("gridMetting")
　　.LoadPanel(n=>n.Enabled(false))
　　.OnEditorPreparing("onEditorPreparing")
　　.OnEditingStart("onEditingStart")
　　.OnInitNewRow("onInitNewRow")
　　.OnSaving("onSaving")
　　…………

)

//加载提示框
@(Html.DevExtreme().LoadPanel()
　　.ID("loadPanel")
　　.Position(p => p.Of("#gridMetting"))
　　.Visible(false)
)

<script>
var loadPanel, dataGrid, isEdite, editeData;
//初始化
$(function () {
　　loadPanel = $("#loadPanel").dxLoadPanel("instance");
　　dataGrid = $("#gridMetting").dxDataGrid("instance");
　　//初始加载数据
　　loadDataGrid();
});

//初始化页面控件
function onEditorPreparing(e) {
　　if (isEdite) {
　　　　if (e.parentType === "dataRow") {
　　　　　　//修改时，设置指定文本框不可更改
　　　　　　if ((e.dataField === "Scale" | e.dataField === "MainBodyId" | e.dataField === "ProductLineIdArray" | e.dataField === "Remark")) {
　　　　　　　　　　e.editorOptions.disabled = true;
　　　　　　}
　　　　}
　　}
}
//修改事件
function onEditingStart(e) {
　　isEdite = true;
　　editeData = e.data;
}
//添加事件
function onInitNewRow(e) {
　　isEdite = false;
}

//控件加载数据
function loadDataGrid() {
　　loadPanel.show();
　　dataGrid.option("noDataText", "正在加载...");
　　sendRequest(‘@Url.RouteUrl(new { controller = "MettingReport", action = "GetMettingReportAllList" })‘, "get", {id:0})
　　.then(function (data) {
　　　　loadPanel.hide();
　　　　//处理API接口返回数据
　　　　if (data.Success) {
　　　　　　if (data.Response) {
　　　　　　　　//给控件附加数据源
　　　　　　　　dataGrid.option("dataSource", data.Response);
　　　　　　　　dataGrid.option("noDataText", "没有数据");
　　　　　　}
　　　　　　else {
　　　　　　　　dataGrid.option("noDataText", "没有数据");
　　　　　　}
　　　　} else {
　　　　　　dataGrid.option("noDataText", "没有数据");
　　　　}
　　});
}

//保存事件
function onSaving(e) {
　　var change = e.changes[0];
　　if (change) {
　　　　e.cancel = true;
　　　　loadPanel.show();
　　　　e.promise = saveChange(change).always(() => { loadPanel.hide(); })
　　　　　　.done(() => {
　　　　　　　　//操作成功
　　　　　　　　e.component.cancelEditData(); //关闭编辑弹框
　　　　　　　　loadDataGrid();
　　　　　　});
　　}
}

//保存改变数据
function saveChange(change) {
　　var d = $.Deferred();
　　if (change.type === "update") {
　　　　editeData=$.extend(editeData, change.data);
　　　　editData(d, change);
　　}
　　else if (change.type === "insert" ) {
　　　　editeData=$.extend(editeData, change.data);
　　　　insertData(d, change);
　　}
　　else if (change.type === "remove") {
　　　　removeData(d, change);
　　}
　　else {
　　　　d.resolve();
　　}
　　return d.promise();
}

//添加
function insertData(d, change) {
　　sendRequest(‘@Url.RouteUrl(new { controller = "MettingReport", action = "UpdateMettingReport" })‘, "put", editeData)
　　.then(function (r) {
　　　　if (r) {
　　　　　　if (r.Success) {
　　　　　　　　d.resolve();
　　　　　　}
　　　　　　else {
　　　　　　　　d.reject(r.Msg);
　　　　　　}
　　　　}
　　　　else {
　　　　　　d.resolve();
　　　　}
　　});

　　return d;
}
//修改
function editData(d, change) {
　　sendRequest(‘@Url.RouteUrl(new { controller = "MettingReport", action = "AddMettingReport" })‘, "post", editeData)
　　.then(function (r) {
　　　　if (r) {
　　　　　　if (r.Success) {
　　　　　　　　d.resolve();
　　　　　　　　//成功
　　　　　　}
　　　　　　else {
　　　　　　　　d.reject(r.Msg);
　　　　　　　　//失败
　　　　　　}
　　　　}
　　　　else {
　　　　　　d.resolve();
　　　　}
　　});

　　return d;
}
//删除
function removeData(d, change) {
　　sendRequest(‘@Url.RouteUrl(new { controller = "MettingReport", action = "DeleteMettingReport" })‘, "delete", { id: change.key })
　　　.then(function (r) {

　　　　if (r) {
　　　　　　if (r.Success) {
　　　　　　　　d.resolve();
　　　　　　　　//成功
　　　　　　}
　　　　　　else {
　　　　　　　　d.reject(r.Msg);
　　　　　　　　//失败
　　　　　　}
　　　　}
　　　　else {
　　　　　　d.resolve();
　　　　}
　　});

　　return d;

}
//发送请求
function sendRequest(url, method, data) {
　　method = method || "GET";
　　return $.ajax(url, {
　　　　method: method,
　　　　data: data,
　　　　cache: false,
　　　　xhrFields: { withCredentials: true }
　　});
}

</script>

API接口数据交互——DataGrid系列

原文：https://www.cnblogs.com/xiaonanmu/p/15234224.html