[asp.net] 解決easyui datagrid刪除資料後不能自動更新
阿新 • • 發佈：2019-02-13
easyui datagrid外掛資料的重新整理是通過其reload方法實現的，資料的插入和更新都能夠實時看到插入和修改的效果，reload方法實際上是重新向伺服器傳送了ajax請求。而今天在做檔案上傳的時候，刪除操作的效果只能夠通過重新整理頁面才能看到。
1.針對這一情況，筆者起初選擇手動呼叫location.reload()手動重新整理頁面，顯示刪除後的資料。該方法的缺點在於是通過重新整理頁面達到資料更新的目的，如果想彈出提示框就，那麼就會被頁面重新整理效果所覆蓋。
2.根據easyui的api，可以看出，easyui提供了對dom元素的增刪改查操作，實現前臺資料和後臺資料的同步增刪改查。
下面給出筆者的實現程式碼（詳細內容在deleteFile方法中）：
<!DOCTYPE html> <html> <head> <title>管理員專家管理文件介面</title> <meta http-equiv="pragma" content="no-cache" /> <script src="/Scripts/loading.js" type="text/javascript"></script> <link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" /> <script src="/EasyUI/jquery.min.js" type="text/javascript"></script> <script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script> <script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script> <script src="../EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script type="text/javascript"> function doSearch() { //查詢檔案 $.ajax({ url: '/File/FileHandler.ashx?action=GetFile', type: 'POST', data: { Name: $("#ss").val() }, beforeSend: function () { $.messager.progress({ text: '正在處理中...' }); }, success: function (data) { $.messager.progress('close'); data = eval('(' + data + ')'); //將一個json字串解析成js物件 $("#dg").datagrid('loadData', data); } }); } </script> </head> <body> <table id="dg" class="easyui-datagrid" title="檔案列表" url="/File/FileHandler.ashx?action=GetAll" pagination="true" toolbar="#toolbar" rownumbers="false" fitcolumns="true" singleselect="false"> <thead> <tr> <th field="ck" checkbox="true"> </th> <th field="Id" width="100" data-options="align:'center'"> 文件編號 </th> <th field="Name" width="150" data-options="align:'center'"> 文件名 </th> <th field="JZId" width="120" data-options="align:'center',type:'combobox',valueField: 'text', textField: 'id', url: '/JZ/JZHandler.ashx?action=GetAllJZId', required: true"> 機組編號 </th> <th field="UploadTime" width="120" data-options="align:'center'"> 上傳時間 </th> <th field="Note" width="120" data-options="align:'center',formatter:myformatter"> 操作 </th> </tr> </thead> </table> <div id="toolbar" border="true" style="border: 1px solid #ddd; height: 32px; padding: 2px 5px; background: #fafafa;"> <div style="float: left;"> <a href="#" class="easyui-linkbutton" plain="true" onclick="addFile()" icon="icon-add"> 新增</a> </div> <div class="datagrid-btn-separator"> </div> <div style="float: left;"> <a href="#" class="easyui-linkbutton" plain="true" onclick="deleteFile()" icon="icon-remove"> 刪除</a> </div> <div id="tb" style="float: right;"> <input id="ss" class="easyui-searchbox" searcher="doSearch" prompt="請輸入檔名" style="width: 160px; vertical-align: middle;"></input> </div> </div> <!--對話方塊--> <div id="dlg" class="easyui-dialog" style="width: 400px; padding: 10px 20px" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post" enctype="multipart/form-data"> <div style="margin-bottom: 20px"> <input id="cc2" class="easyui-combobox" name="JZId" label="機組編號" style="width: 100%" data-options="valueField: 'id', textField: 'text', url: '/JZ/JZHandler.ashx?action=GetAllJZId',required:true" /> </div> <div style="margin-bottom: 20px"> <input id="File" class="easyui-filebox" name="File" style="width: 100%" data-options="label:'文件名:',required:true,buttonText:'選擇檔案',prompt:'不限制檔案格式'" /> </div> <div style="margin-bottom: 20px"> <input id="cc1" class="easyui-textbox" name="Type" label="型別" style="width: 100%" data-options="valueField:'id',textField:'text',required:false"> </div> </form> </div> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveFile()">儲存</a> <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> 取消</a> </div> <script type="text/javascript"> function myformatter(value) { return "<a href='" + value + "' >下載</a>"; } function addFile() { $('#dlg').dialog('open').dialog('setTitle', '新增文件資訊'); $('#fm').form('clear'); } function deleteFile() { //刪除時先獲取選擇行 var rows = $("#dg").datagrid("getSelections"); //選擇要刪除的行 if (rows.length > 0) { $.messager.confirm("提示", "你確定要刪除嗎?", function (r) { if (r) { //獲取所有要刪除的文件的編號 var ids = []; var rowindex = []; for (var i = 0; i < rows.length; i++) { ids.push(rows[i].Id); var index = $("#dg").datagrid('getRowIndex', rows[i]); //儲存列的資訊 rowindex.push(index); } //按照從小到大排序 rowindex.sort(); //執行資料刪除操作 $.ajax({ url: '/File/FileHandler.ashx?action=Delete', type: 'POST', async: false, data: { Id: ids.join(',') }, beforeSend: function () { $.messager.progress({ text: '正在處理中...' }); }, success: function (data) { $.messager.progress('close'); data = eval('(' + data + ')'); //將一個json字串解析成js物件 if (data.Success) { //手動刪除表格資料 for (var i = rowindex.length - 1; i >= 0; i--) { $("#dg").datagrid('deleteRow', rowindex[i]); } $.messager.show({ title: '操作提醒', msg: data.Message }); } else { $.messager.show('刪除失敗', data.Message, 'warning'); } } }); } }); } else { $.messager.alert("操作提示", "請選中需要刪除的文件所在的行！", 'info'); } } function saveFile() { url1 = '/File/FileHandler.ashx?action=Add'; if (getBrowserType() == "Chrome") { $.ajax({ url: url1, async: false, type: "POST", cache: false, //上傳檔案不需要快取 processData: false, // 告訴jQuery不要去處理髮送的資料 contentType: false, // 告訴jQuery不要去設定Content-Type請求頭 data: new FormData($('#fm')[0]), beforeSend: function () { return $('#fm').form('validate'); }, success: function (data) { data = eval('(' + data + ')'); //將一個json字串解析成js物件 $.messager.alert("操作提示", data.Message, 'info'); //顯示後臺資訊 if (data.Success) { $('#dlg').dialog('close'); //關閉彈出框 $("#dg").datagrid('reload'); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } }); } else { $('#fm').form('submit', { url: url1, //注意新增和修改的url不同 onSubmit: function () { //驗證表單是否合法 return $(this).form('validate'); }, success: function (res) { data = eval('(' + res + ')'); //將一個json字串解析成js物件 $.messager.alert("操作提示", data.Message, 'info'); //提示後臺錯誤資訊 if (data.Success) { $('#dlg').dialog('close'); //關閉彈出框 $('#dd').datagrid('reload'); //重新載入資料 } } }); } } </script> </body> </html>
不過有一點更奇怪的是，saveFile方法同樣採用reload，卻可以實時顯示檔案新增的動態效果。如果哪位大神知道的話希望能夠評論指教。
對資料元素進行刪除的時候一般是倒序刪除，原因是正序刪除可能會發生索引編號錯位。具體操作入下：
//從行集合中刪除若干行 function deleterows(allrows, selectedrows) { //尋找選擇行所在的索引行 var idsarr = []; for (var i = 0; i < selectedrows.length; i++) { for (var j = 0; j < allrows.length; j++) { if (allrows[j].Id == selectedrows[i].Id) { idsarr.push(j); } } } //倒序排列 idsarr = idsarr.sort(); idsarr = idsarr.reverse(); //刪除元素 for (var i = 0; i < idsarr.length; i++) { allrows.splice(idsarr[i], 1); } }
function callQueue(){
edit_url = "queueRecord.htm?op=callQueue";
var row = $('#dg').datagrid('getSelected');
// 獲取選中行的Index的值
var rowIndex=$('#dg').datagrid('getRowIndex',$('#dg').datagrid('getSelected'));
if(rowIndex != 0){
$.messager.alert("提示","請按照排號順序叫號！");
return false;
}else{
$('#call').dialog('open').dialog('setTitle', '叫號');
$('#callfm').form('clear');
$("#id").val(row.id);
$("#code").val(row.numberType+row.code);
}
}