js動態新增datagrid表頭&批量儲存實戰研究
阿新 • • 發佈：2019-02-20
一、背景簡介
最近小編在做專案的時候，遇到了這樣一個需求：如下圖所示，表頭中的"一般"和"優秀"是動態新增的，新增上對應的票數之後，選中多行，單擊儲存，將動態新增的列資料轉換成行儲存到資料庫中
表結構：如下圖所示
專案框架：MVC+WCF+EF相容瀏覽器：Google
二、解決思路一
首先取表頭資訊，然後取改變的行資料，通過表頭ID對應的取資料資訊，組合到一起，然後一起提交到controller中HTML程式碼
<span style="font-family:KaiTi_GB2312;font-size:18px;">- <div title="未錄入單位" style="padding: 10px"> <table id="dgno" class="easyui-datagrid" style="width: 1070px; height: auto" data-options=" iconCls: 'icon-edit', toolbar: '#toolbarno', rownumbers:true, url: 'datagrid_data1.json', method:'get', onClickCell: onClickCell"> </table> <div id="toolbarno"> <a href="javascript:void(0)" id="saveButton" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="AddAllData()">儲存</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤銷</a> </div> </div> -</span>
js程式碼
<span style="font-family:KaiTi_GB2312;font-size:18px;">- //批量儲存表格中填入資料的行值-馬康-2016-4-10 19:26:01 function AddAllData() { //獲取選中行的資料 var selectRows = $("#dgno").datagrid("getChanges"); //獲取表頭資料 var fields = $("#dgno").datagrid("getColumnFields"); //獲取考核年份 var CheckYear1 = $('#CheckYear').combobox("getValue"); //如果沒有選中行的話，提示資訊 if (selectRows.length < 1) { $.messager.alert("提示訊息", "請選擇要儲存的記錄！", "info"); return; } //定義一個承接物件的ID var CityObjectID = ""; //定義一個承接檔次的ID var TargetLevelID = ""; //定義一個承接票數的值的變數 var Votes = ""; //定義一個承接年份的變數 var CheckYear = ""; //定義一個承接備註的變數 var Remark = ""; //迴圈將資料新增到對應的列中 for (var i = 0; i < selectRows.length; i++) { //通過動態的表頭判斷迴圈的次數 for (var p = 5; p < fields.length; p++) { //取固定列的資料 CityObjectID += selectRows[i].CityObjectID + ","; //物件ID TargetLevelID += fields[p - 1] + ","; //檔次ID //通過這樣的方式取動態新增的列的資料，票數 //將SelectRows賦值給變數a var a = selectRows[i]; //迴圈a的值，取 for (s in a) { if (s == fields[p - 1]) { //將對應的票數賦值給votes Votes += a[s] + ","; } } CheckYear += CheckYear1 + ","; //年份 Remark += selectRows[i].Remark + ","; //備註 } } //因為是批量儲存，所以需要迴圈切割所有的資料 CityObjectID = CityObjectID.substr(0, CityObjectID.length - 1); //物件ID TargetLevelID = TargetLevelID.substr(0, TargetLevelID.length - 1);//檔次ID Votes = Votes.substr(0, Votes.length - 1); //票數 CheckYear = CheckYear.substr(0, CheckYear.length - 1); //年份 Remark = Remark.substr(0, Remark.length - 1); //備註 //post將獲取到的指標ID一起傳遞到controller中 $.post('/CityQualitativeResult/AddCityQualitativeResult?CityObjectID=' + CityObjectID + '&TargetLevelID=' + TargetLevelID + '&Votes=' + Votes + '&CheckYear=' + CheckYear + '&Remark=' + Remark, function (jsonObj) { //判斷返回值 if (jsonObj = "true") { //成功提示資訊 $.messager.alert('提示', '儲存成功！'); //儲存成功後重新整理頁面 $("#Targetdg").datagrid("reload"); //解決儲存後全選問題 $('#Targetdg').datagrid('clearSelections'); } else { //失敗提示資訊 $.messager.alert('提示資訊', '儲存失敗，請聯絡管理員！', 'warning'); } }); } -</span>
controller程式碼
<span style="font-family:KaiTi_GB2312;font-size:18px;">- #region AddQualitativeTarget 新增定性指標-馬康-2016-3-10 1:49:45 /// <summary> /// 新增定性指標-馬康-2016-3-10 1:49:45 /// </summary> /// <returns></returns> public bool AddCityQualitativeResult() { bool AddOk = false; try { //例項化返回資料的載體 List<AllQualitativeResultInputViewModel> ListAllQualitativeResultInputVM = new List<AllQualitativeResultInputViewModel>(); //獲取縣市區物件ID var CityObjectID1 = Request["CityObjectID"]; //通過分割方式獲取縣市區物件ID string[] CityObjectID2 = CityObjectID1.Split(','); //獲取指標檔次ID var TargetLevelID1 = Request["TargetLevelID"]; //獲取指標檔次ID string[] TargetLevelID2 = TargetLevelID1.Split(','); //獲取檔次對應的分數 var Votes1 = Request["Votes"]; //獲取檔次對應的分數 string[] Votes2 = Votes1.Split(','); //獲取年份 var CheckYear1 = Request["CheckYear"]; //獲取年份 string[] CheckYear2 = CheckYear1.Split(','); //獲取備註 var Remark1 = Request["Remark"]; //獲取備註 string[] Remark2 = Remark1.Split(','); //通過迴圈將傳過來的值儲存到例項化的List的ViewModel中 for (int i = 0; i < CityObjectID2.Length; i++) { Guid CityQualitativeResultID = System.Guid.NewGuid(); //縣市區物件ID Guid CityObjectID = new Guid(CityObjectID2[i]); //獲取指標檔次ID Guid TargetLevelID = new Guid(TargetLevelID2[i]); //獲取檔次對應的分數 int Votes = int.Parse(Votes2[i]); //獲取年份 int CheckYear = int.Parse(CheckYear2[i]); //獲取備註 string Remark = Remark2[i]; //向實體中新增資料 AllQualitativeResultInputViewModel AllQualitativeResultInputVM = new AllQualitativeResultInputViewModel() { CityQualitativeResultID = CityQualitativeResultID, CityObjectID = CityObjectID, QualitativeLevelID = TargetLevelID, Votes = Votes, CheckYear = CheckYear, Remarks = Remark, }; //將實體賦值給List ListAllQualitativeResultInputVM.Add(AllQualitativeResultInputVM); } //呼叫服務端新增的方法 AddOk = ICityQualitativeResult.AddCityQualitativeResult(ListAllQualitativeResultInputVM); return AddOk; } catch (Exception ex) { throw ex; } } #endregion -</span>