easyui datagrid實現單行的上移下移，以及儲存移動的結果
阿新 • • 發佈：2019-01-09
開始接觸easyui感覺他的封裝真是極佳的，善假於物的思想使我們善於站在巨人的肩膀上，人家封裝好這麼好的外掛直接讓俺們使用，我們在需求不同可進行簡單的調整。
</span>//調整展示次序載入圖片 function UpDownFormat(value, row, index) { //只有向下的按鈕 var data = $('#Convention').datagrid('getData'); if (index == 0) { return "<a href=\"javascript:Down(" + index + ")\"><img src=\"../../Content/jquery-easyui-1.3.2/themes/icons/accordion_arrows_down.png\" /></a>" } else if (index == data.total-1) { return "<a href=\"javascript:Up(" + index + ")\"><img src=\"../../Content/jquery-easyui-1.3.2/themes/icons/accordion_arrow_up.png\" /></a>" } else { return "<a href=\"javascript:Up(" + index + ")\"><img src=\"../../Content/jquery-easyui-1.3.2/themes/icons/accordion_arrow_up.png\" /></a> <a href=\"javascript:Down(" + index + ")\"><img src=\"../../Content/jquery-easyui-1.3.2/themes/icons/accordion_arrows_down.png\" /></a>" } }
<pre name="code" class="javascript"> //點選進入介面時載入資料 <pre name="code" class="javascript">$(document).ready(function () { var strConvention = ""; //載入公約表格 $('#Convention').datagrid({ url: '/FreshConfiguration/QueryConvention?strConvention=' + strConvention, rownumbers: "true", title: "公約配置資訊", loadMsg: '正在載入公約資訊...', singleSelect: true, columns: [[ { field: 'ck', checkbox: true, align: 'left', width: 60, align: "center" }, {field: 'ConventionName', title: '公約名稱', width: 385, align: "center", formatter: titleFormat}, { field: 'isuse', title: '是否啟用', width: 385, align: "center" }, //{ field: 'ConventionContent', title: '公約內容', width: 290, align: "center" }, { field: 'Adjust', title: '優先順序次序', align: 'center', width: 383, formatter: UpDownFormat }//點選按鈕進行上下行的資料交換 ]], toolbar: [{ id: 'btnAdd', text: '新增', iconCls: 'icon-add', handler: function () { window.location.href = "/FreshConfiguration/AddConventionConfigView" //showAddCon(); } }, '-', { id: 'btnDelete', text: '刪除', iconCls: 'icon-remove', handler: function () { doDelete(); } }, '-', { id: 'btnUse', text: '<input type="radio" name="radio">啟用</input>', handler: function () { doUse(); } }, { id: 'btnDelete', text: '<input type="radio" name="radio"> 不啟用</input>', handler: function () { doDisable(); } } ], onHeaderContextMenu: function (e, field) { }, onLoadSuccess: function (data) { $(".delUser").unbind("click"); $(".delUser").bind("click", function () { alert($(this).attr("uid")); return false; }); $(".editUser").unbind("click"); $(".editUser").bind("click", function () { doEdit($(this).attr("uid")); return false; }); } }); })
<script> //調整編碼次序 function Up(index) { //向下移動改變的地index行和index+1行 $('#Convention').datagrid('selectRow', index) var row = $('#Convention').datagrid('getSelected'); $.ajax({ type: "POST", url: "/FreshConfiguration/UpdateSortConvention", data: "ConventionID=" + row.ConventionID + "&conventionSort=" + index, success: function () {//成功之後 $('#Convention').datagrid('selectRow', index - 1); var row1 = $('#Convention').datagrid('getSelected') $.ajax({ type: "POST", url: "/FreshConfiguration/UpdateSortConvention", data: "ConventionID=" + row1.ConventionID + "&conventionSort=" + (index + 1), success: function () {//提示資訊 // $.messager.alert("提示！", "編碼次序調整成功！"); $("#Convention").datagrid("reload"); $('#Convention').datagrid('showColumn', 'Adjust'); }, error: function () { $.messager.alert("警告！", "編碼次序調整失敗,請聯絡管理員！", "info"); } }); }, error: function () { $.messager.alert("警告！", "編碼次序調整失敗,請聯絡管理員！", "info"); } }); } function Down(index) { //向下移動改變的地index行和index+1行 $('#Convention').datagrid('selectRow', index) var row = $('#Convention').datagrid('getSelected'); $.ajax({ type: "POST", url: "/FreshConfiguration/UpdateSortConvention", data: "ConventionID=" + row.ConventionID + "&conventionSort=" + index + 2, success: function () {//成功之後 $('#Convention').datagrid('selectRow', index + 1); var row1 = $('#Convention').datagrid('getSelected') $.ajax({ type: "POST", url: "/FreshConfiguration/UpdateSortConvention", data: "ConventionID=" + row1.ConventionID + "&conventionSort=" + (index + 1), success: function () {//提示資訊 // $.messager.alert("提示！", "編碼次序調整成功！"); $("#Convention").datagrid("reload"); $('#Convention').datagrid('showColumn', 'Adjust'); }, error: function () { $.messager.alert("警告！", "編碼次序調整失敗,請聯絡管理員！", "info"); } }); }, error: function () { $.messager.alert("警告！", "編碼次序調整失敗,請聯絡管理員！", "info"); } }); } </script> <span style="font-size:24px;"> 以上是js的有關程式碼，前臺介面的有關程式碼已經放到上面。</span> <span style="font-size:24px;"> </span> <span style="font-size:24px;"> 儲存到資料庫需要呼叫controller的更新方法UpdateSortConvention,</span> <span style="font-size:24px;"></span><pre name="code" class="javascript">#region 公約配置介面更新公約功能-趙盡朝-2016-8-24 16:37:32 [ValidateInput(false)] [HttpPost] public void UpdateSortConvention(string ConventionContent, string ConventionName, string IsUse, string conventionSort, string ConventionID) { ConventionViewModel convention = new ConventionViewModel(); convention.ConventionID = ConventionID; string str = "TimeSpan"; if (conventionSort != null && conventionSort != "") { str += ",conventionSort"; convention.conventionSort = int.Parse(conventionSort); } //內容 if (ConventionContent != null && ConventionContent != "") { str += ",ConventionContent"; convention.ConventionContent = ConventionContent; } //標題 if (ConventionName != null && ConventionName != "") { str += ",ConventionName"; convention.ConventionName = ConventionName; } //展示順數 if (IsUse != null && IsUse != "") { str += ",IsUse"; convention.IsUse = int.Parse(IsUse); } //陣列 string[] strarray = str.Split(','); //呼叫後臺方法 conventionBll.UpdateSortConvention(convention, strarray); } #endregion IBll層： bool UpdateSortConvention(ConventionViewModel StuConvention, string[] str); Bll層： <span style="font-size:24px;"></span><pre name="code" class="csharp">#region 修改公約資訊 UpdateSortConvention 趙盡朝2016-07-31 public bool UpdateSortConvention(ConventionViewModel StuConvention, string[] str) { //例項化公約資訊，並把viewmodel賦值給實體的屬性 freshconventionentity Conventioninfo = new freshconventionentity { //更新整張表，給欄位賦值 ConventionID = StuConvention.ConventionID, ConventionName = StuConvention.ConventionName, ConventionContent = StuConvention.ConventionContent, IsUse = (StuConvention.isuse=="是")?1:0, conventionSort = StuConvention.conventionSort, ConventionTimestamp= DateTime.Now, isDelete = 0 }; this.ConventionCurrentDal.Update(Conventioninfo, q => q.ConventionID == StuConvention.ConventionID,str); //完成實務操作 bool result = DbSession.SaveChanges() > 0; return result; }
遇到的錯誤：
一、檢測到有潛在危險的 Request.Form 值
這種問題是因為你提交的Form中有HTML字串，例如你在TextBox中輸入了html標籤，或者在頁面中使用了HtmlEditor元件等，解決辦法是禁用validateRequest。
如果你是.net 4.0或更高版本，一定要看方法3。此方法在asp.net webForm和MVC中均適用
方法1：
在.aspx檔案頭中加入這句：<%@ Page validateRequest="false" %>
方法2：
修改web.config檔案:
<configuration>
<system.web>
<pages validateRequest="false" />
</system.web>
</configuration>
因為validateRequest預設值為true。只要設為false即可。
方法3：
web.config裡面加上
<system.web>
<httpRuntime requestValidationMode="2.0" />
</system.web>
因為4.0的驗證在HTTP的BeginRequest前啟用，因此，請求的驗證適用於所有ASP.NET資源，aspx頁面,ashx頁面,Web服務和一些HTTP處理程式等.
二、對一個或多個實體的驗證失敗。有關詳細資訊，請參見“EntityValidationErrors”屬性
問題原因:（問題ef都是相同錯誤提示）
1. 非空列未插入值錯誤
2. 多個表間外來鍵列長度不一樣
3. ef上下文物件db為空
4. ef上下文設定屬性為 db.Configuration.ValidateOnSaveEnabled = false;
5. 內容長度超過列最大長度