JQuery中dategrid編輯狀態(tài)下的數(shù)據(jù)長度限制方法小結(jié).docx

JQuery中dategrid編輯狀態(tài)下的數(shù)據(jù)長度限制方法小結(jié) 作者：陳曉亞在JQuery的dategrid的使用中，往往會有業(yè)務(wù)邏輯要求在加載出來的dategrid中進行數(shù)據(jù)的編輯。這樣就會使用到單行保存或者批量保存的技術(shù)。但是在此，先暫不討論批量保存技術(shù)。由于存入數(shù)據(jù)庫的數(shù)據(jù)都有一定的長度限制，如果超出限定的長度就會造成無法存入的情況，在SQL語句中會產(chǎn)生回滾。這樣就不能正常操作了。所以在dategrid處在可以編輯的狀態(tài)時，都要對每一列的長度進行適當(dāng)?shù)南拗?。下面就是幾種長度限制的方法。一、當(dāng)加載列的數(shù)據(jù)是數(shù)值類型int時。這個時候可以使用numberbox的內(nèi)置方法進行長度的限制。 如圖： 在field中，options：required:true,min:0,max:99999 就是把數(shù)值的范圍限定在五位數(shù)以內(nèi)，超出部分會在離開編輯行時自動默認(rèn)為最大值99999。這樣的一個方法比較的簡單，但是在實際的運用中給客戶的體驗不是太好。如果項目要求不高的情況下，還是可以使用的。在此我不建議使用此種方法。二、當(dāng)加載列的數(shù)據(jù)是字符串類型String 或者nvchar類型的時。這個時候使用的方法如圖： 使用validType:length1,5 就是把字符串的長度限制在1到5的范圍內(nèi)，當(dāng)在界面上輸出超出長度部分時，就只能顯示5位，超出部分會顯示紅色的提示符，在保存提交onsubmit的事件中使用 /* isSubmit = $(this).form(validate); /驗證表單是否有 必須要填的選項if(!isSubmit) alertMsg(格式輸入錯誤);return isSubmit; */這樣的方法可以檢測是否有不符合規(guī)范的數(shù)據(jù)填寫。它能夠使錯誤的數(shù)據(jù)不能夠提交，必須是在正確長度范圍內(nèi)才可以進行提交保存。如下圖界面的顯示：這個界面就是第一和第二的兩種情況的顯示。這兩種方法都能夠解決阻止錯誤數(shù)據(jù)傳入后臺數(shù)據(jù)庫，但是這樣的頁面顯示效果并不是特別的好。客戶體驗就不好了。于是經(jīng)過多次的改良有了以下的方法和顯示。三、 dategrid編輯狀態(tài)時長度限制的規(guī)范方法。我說的規(guī)范是界面上很規(guī)范，可是代碼的編程就有點小麻煩了。首先設(shè)置參數(shù)，中間變量和判斷值的參數(shù)。其次是給中間變量賦值。以年齡為例。在單擊事件中給ExtraAge賦值獲取當(dāng)前點擊行的年齡值。然后在onBefoeEdit事件中再把ExtraAge這個中間變量賦值給另外一個中間變量ExtraAge2。之所以這樣做是因為在field的formatter方法中，當(dāng)點擊一行進行編輯后，再點擊其他行的時候，上一行的中間變量值就會被新點擊行的值所覆蓋，從而產(chǎn)生了把新點擊行的值賦值給上一行的情況。所以在onBefoeEdit事件中加入一個全新的中間變量，用于保存上一個點擊行的值。而后就是十分關(guān)鍵的field里面使用formatter進行函數(shù)的調(diào)用，在函數(shù)里面寫邏輯。下圖是當(dāng)輸入數(shù)值大于120的時候，點擊其他行或者保存后，會彈出提示框，當(dāng)提示框關(guān)閉后，之前編輯行的數(shù)值會變成原來的值，不保存輸入錯誤的數(shù)值。下圖是當(dāng)輸入的數(shù)據(jù)是錯誤數(shù)據(jù)時，在onsubmit方法中做的一個判斷，如果輸入錯誤數(shù)據(jù)保存，會彈出提示框，并且保存是失敗的。當(dāng)然下圖還少了段代碼，就是在return 之