NestedSortable是一個專門用來排序和處理父子關係的jquery插件, 在衆多的jquery插件中, 只有nestedsortable這個插件做的出衆, 不但界面清爽, 操作簡單, 還提供了包含以傳輸json格式數據的ajax請求方式的widget.
正好我做的項目裏有一個地方要用到排序和調整父子關係, 原來是拆開成兩部分實現的, 一部分管排序, 一部分管父子關係, 兩部分互相沒有關聯. 其中父子關係部分需要輸入相關id來註明,使用起來很笨拙, 數據還經常因爲誤操作而出一些莫明其妙的錯誤.
用nestedsortable來替代這兩個部分是不二之選, (這個開源項目在這裏) 它包含兩個部分, 一個是單純的jquery插件, 不帶ajax請求部分, 但留了onChange的接口, 可供使用者進一步定製. 另外一部分是widget, jquery並沒有明確的widget定義, 不象dojo, 對widget有明確的定義, 基本上就是圍繞着widget展開的. jquery更加着重於語言本身的功能性, 這裏nestedsortable widget可以理解成作者已經爲用戶寫好了所有界面, 只要提供數據進去, 格式化好的帶有界面的結果就顯示出來了, 包括界面上save按鈕的相關功能一併定義好了, 用戶只要寫服務器端的處理邏輯即可. 缺點是體積比較大, 比插件大三倍.
粗看下來, 當然nestedsortable widget是首選, 代碼量很小, 沒啥要特別處理的地方, 只要關心源數據和返回的結果數據即可. 三下五除二寫好相關代碼之後, 試了十幾條數據, 一切正常. 但大多數情況下, 數據量一般是一二百條, 極端情況會達到一千條左右, 當載入一千條數據的時候, javascript報錯, 說是堆棧溢出.
回頭去查nestedsortable的api, 發現有分頁功能, 分好頁面後, 載入一千條數據時再也不報錯了, 但新的問題有出現了, 排序功能不正常. 例如, 一共五頁, 第三頁的幾條數據要換到第一頁, 結果第二頁的數據序號無法正常更新. 細看之下發現, 傳回服務器端的數據被分爲兩部分, 即第一頁和第三頁, 其他頁的沒有. 試了很多變通的方法, 想依靠回傳的結果數據推斷剩餘頁面的變動, 都無法走通.
nestedsortable的作者說wordpress就是用他這個widget實現排序的, 而且說服務器端的邏輯只要一點小技巧就可以處理了. 只好又去wordpress網站下載源代碼, 安裝起來之後, 耐着性子查找相關排序的邏輯. 經過輸入一定量的數據之後, 結合數據庫裏的數據和代碼邏輯發現, 作者在相關表裏對排序id的使用方式和我所作項目的差別很大. 他的排序id是輔助性的字段, 並未嚴格+1, 換言之, 如果ddd應該排在rrr後面,那麼rrr給個90, ddd給個503就可以了. 這樣的話, 按照前面分成5頁的例子, 他的排序邏輯確實可以按照返回的兩段數據, 按照大概數字, 爲剩餘頁面加上個大數字,不重複即可. 我的項目不能按照這個邏輯做, 這條路等於行不通.
那麼能否改變這個widget回傳的數據呢? 在分頁狀態下, 不管有幾頁變動, 把所有結果都返回回來. 仔細看了widget裏面的相關代碼, 發現它也是基於另一個jquery插件Interface, 這個Interface設計的模式就是把被drag和drop的頁面元素的值返回回來. 而要改變這個模式也有違這個插件的設計思想, 是不可能做到的. 這條路也走不通.
現在的情況變成了, 要分頁就要解決回傳數據的問題, 要不分頁就要解決堆棧溢出的問題. 前者探索的結果是行不通, 後者,我試着debug到溢出處, 同樣也是Interface插件的一部分,發現引用這個變量的地方很多, 要改幾乎不可能.
這種情況下這能退回到原點, 選擇nestedsortable widget看來是個錯誤, 而nestedsotable插件還可以試一試. 因爲nestedsortable插件需要用戶準備數據, 邏輯上要麻煩一些, 而且ajax的請求也要自己寫. 但從另外一個角度講, 它不用參與到數據解析, 也就不存在前面遇到的堆棧溢出的問題,性能反而好. 編程上多花一些時間, 並且可以借鑑部分nestedsortable widget的代碼, 能走通這條路還是值得的.
所以,在瞭解了nestedsortable插件的api之後,
1. 不分頁.
2. 自己編程解析由變動元素傳回的數據.
3. 然後格式化爲json格式,回傳給server.
至此, 問題終於解決.
有幾點體會如下, 原以爲jquery語法好懂, 插件的開發大概看看也應該能看懂, 結果看了很久也還是很糊塗, 結果還是老老實實退回去讀書, 瞭解plugin的開發規範. 另外, 要找一個好的編輯器, 尤其要能讓你看清左括號和又括號的. ultraedit可以看,但是不明顯,也沒有快捷鍵可以讓人在左括號和右括號之間跳轉, 我用的jedit就有這個功能, 光標在左括號上, 按住ctrl+]鍵就能跳轉到右括號上, 這樣分辨javascript的一段一段代碼非常容易, 如果靠肉眼看, 出錯的機會太大了, 增加了理解代碼邏輯的難度.