DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 利用Javascript設定listBox中各Item的上下順序
利用Javascript設定listBox中各Item的上下順序
編輯:AJAX詳解     
今天在重寫後台管理中的排序操作方式的時候,寫了一段運行在客戶端的更改設定listBox控件中各個項(Item)的上下順序的腳本程序,現整理一下兒希望對初學Javascript的朋友們有所幫助,當然也請各位JS老鳥們不要笑話。
  在帖出代碼之前先說些要注意的地方吧:
  • 正常大家在使用此功能的時候其實純粹的在客戶端去調整listBox中Item的上下順序是沒有什麼意義的(當然如果你用AJax技術最終去保存那另當別論了),因為在用客戶端的Javascript調整的Item順序,在您點擊一個回發的按紐時順序會回到頁面最初加載的時候的狀態,不光是Item的順序,在用Javascript動態的添加(刪除)listBox中的Item,回發後也會保存不住更改狀態的,這一點就是你用.net中自帶的服務器端控件listBox也不行。(當然,dropDownList也是不行的),因此對於其更改狀態的保存就要相對別的控件麻煩一點兒了。我平常在.Net環境下的的處理方法是要用兩個服務器端的TextBox(將其display:none)分別用分隔符的形式來順序記錄listBox中項的Text和Value,當然,什麼時候去記錄看需要了,你可以每次在客戶端改變listBox的Item的時候就重新寫一下兩個TextBox的Value,也可以在保存時先在客戶端重寫一下兒兩個TextBox的Value。客戶端的Javascript對於服務器端的TextBox改變其Value後,回發服務器時是可以保存住更改的Value的,這樣子你就可以在服務器端通過讀取兩個TextBox的Text屬性從面獲取到用分隔符分隔的ListBox中的所有Item的Text和Value,這樣子就解決了在服務器准確獲得listBox狀態的問題。當然,還有一個問題是回發結束後頁面重新加載後ListBox又回到了頁面打開時的狀態,顯示上存在著差別,這就需要在頁面的末尾加入一段Javascript的腳本,其要實現的功能是判斷兩個TextBox的Value如不為空的話首先清空listBox的所有Item,然後在利用split方法分隔兩個TextBox的Value(一個是Text一個是Value),循環加入到listBox中就OK了,這樣子在運行過程中就解決了所有問題,做到了ListBox或是dropDownList這類控件的狀態准確保存了!
  • 鼠標點擊後不放以使向上(向下)操作不間斷的進行是需要合理運用setTimeout及clearTimeout兩個方法實現的,具體可以參考代碼。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved