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>