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

  1 …………
  2 
  3 @(Html.DevExtreme().DataGrid<Model>()
  4 　　…………
  5 　　.ID("gridMetting")
  6 　　.LoadPanel(n=>n.Enabled(false))
  7 　　.OnEditingStart("onEditingStart")
  8 　　.OnInitNewRow("onInitNewRow")
  9 　　.OnSaving("onSaving")
 10 　　…………
 11 
 12 )
 13 
 14 //加载提示框
 15 @(Html.DevExtreme().LoadPanel()
 16 　　.ID("loadPanel")
 17 　　.Position(p => p.Of("#gridMetting"))
 18 　　.Visible(false)
 19 )
 20 
 21 <script>
 22 var loadPanel, dataGrid, isEdite, editeData;
 23 //初始化
 24 $(function () {
 25 　　loadPanel = $("#loadPanel").dxLoadPanel("instance");
 26 　　dataGrid = $("#gridMetting").dxDataGrid("instance");
 27 　　//初始加载数据
 28 　　loadDataGrid();
 29 });
 30 
 31 //修改事件
 32 function onEditingStart(e) {
 33 　　isEdite = true;
 34 　　editeData = e.data;
 35 }
 36 //添加事件
 37 function onInitNewRow(e) {
 38 　　isEdite = false;
 39 }
 40 
 41 //控件加载数据
 42 function loadDataGrid() {
 43 　　loadPanel.show();
 44 　　dataGrid.option("noDataText", "正在加载...");
 45 　　sendRequest('@Url.RouteUrl(new { controller = "MettingReport", action = "GetMettingReportAllList" })', "get", {id:0})
 46 　　.then(function (data) {
 47 　　　　loadPanel.hide();
 48 　　　　//处理API接口返回数据
 49 　　　　if (data.Success) {
 50 　　　　　　if (data.Response) {
 51 　　　　　　　　//给控件附加数据源
 52 　　　　　　　　dataGrid.option("dataSource", data.Response);
 53 　　　　　　　　dataGrid.option("noDataText", "没有数据");
 54 　　　　　　}
 55 　　　　　　else {
 56 　　　　　　　　dataGrid.option("noDataText", "没有数据");
 57 　　　　　　}
 58 　　　　} else {
 59 　　　　　　dataGrid.option("noDataText", "没有数据");
 60 　　　　}
 61 　　});
 62 }
 63 
 64 //保存事件
 65 function onSaving(e) {
 66 　　var change = e.changes[0];
 67 　　if (change) {
 68 　　　　e.cancel = true;
 69 　　　　loadPanel.show();
 70 　　　　e.promise = saveChange(change).always(() => { loadPanel.hide(); })
 71 　　　　　　.done(() => {
 72 　　　　　　　　//操作成功
 73 　　　　　　　　e.component.cancelEditData(); //关闭编辑弹框
 74 　　　　　　　　loadDataGrid();
 75 　　　　　　});
 76 　　}
 77 }
 78 
 79 //保存改变数据
 80 function saveChange(change) {
 81 　　var d = $.Deferred();
 82 　　if (change.type === "update") {
 83 　　　　editeData=$.extend(editeData, change.data);
 84 　　　　editData(d, change);
 85 　　}
 86 　　else if (change.type === "insert" ) {
 87 　　　　editeData=$.extend(editeData, change.data);
 88 　　　　insertData(d, change);
 89 　　}
 90 　　else if (change.type === "remove") {
 91 　　　　removeData(d, change);
 92 　　}
 93 　　else {
 94 　　　　d.resolve();
 95 　　}
 96 　　return d.promise();
 97 }
 98 
 99 //添加
100 function insertData(d, change) {
101 　　sendRequest('@Url.RouteUrl(new { controller = "MettingReport", action = "UpdateMettingReport" })', "put", editeData)
102 　　.then(function (r) {
103 　　　　if (r) {
104 　　　　　　if (r.Success) {
105 　　　　　　　　d.resolve();
106 　　　　　　}
107 　　　　　　else {
108 　　　　　　　　d.reject(r.Msg);
109 　　　　　　}
110 　　　　}
111 　　　　else {
112 　　　　　　d.resolve();
113 　　　　}
114 　　});
115 
116 　　return d;
117 }
118 //修改
119 function editData(d, change) {
120 　　sendRequest('@Url.RouteUrl(new { controller = "MettingReport", action = "AddMettingReport" })', "post", editeData)
121 　　.then(function (r) {
122 　　　　if (r) {
123 　　　　　　if (r.Success) {
124 　　　　　　　　d.resolve();
125 　　　　　　　　//成功
126 　　　　　　}
127 　　　　　　else {
128 　　　　　　　　d.reject(r.Msg);
129 　　　　　　　　//失败
130 　　　　　　}
131 　　　　}
132 　　　　else {
133 　　　　　　d.resolve();
134 　　　　}
135 　　});
136 
137 　　return d;
138 }
139 //删除
140 function removeData(d, change) {
141 　　sendRequest('@Url.RouteUrl(new { controller = "MettingReport", action = "DeleteMettingReport" })', "delete", { id: change.key })
142 　　　.then(function (r) {
143 
144 　　　　if (r) {
145 　　　　　　if (r.Success) {
146 　　　　　　　　d.resolve();
147 　　　　　　　　//成功
148 　　　　　　}
149 　　　　　　else {
150 　　　　　　　　d.reject(r.Msg);
151 　　　　　　　　//失败
152 　　　　　　}
153 　　　　}
154 　　　　else {
155 　　　　　　d.resolve();
156 　　　　}
157 　　});
158 
159 　　return d;
160 
161 }
162 //发送请求
163 function sendRequest(url, method, data) {
164 　　method = method || "GET";
165 　　return $.ajax(url, {
166 　　　　method: method,
167 　　　　data: data,
168 　　　　cache: false,
169 　　　　xhrFields: { withCredentials: true }
170 　　});
171 }
172 
173 </script>