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

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