【jquery easyUI 拓展

jquery-easyui自己沒有提供列鎖定/解鎖的接口，而且其原有的列隱藏/顯示在符合表頭的狀況下會出現錯位，我在項目中遇到了這兩個問題，在參考了網上許多解決方案後，編寫了一個拓展插件，基本上解決了這兩個問題。

解決問題的思路

網上不少人都是經過拓展和複寫easyui原有的方法來對html進行操做，這種方法基本上能解決問題，可是我卻糾結與後續升級的問題-萬一下個版本的easyui頁面結構變了咋辦？
爲了解決這個問題，我使用了一種取巧的辦法：

var refactorView = function(target,opts){ if(!opts){return;} var t = $(target); var data = t.datagrid('getData');//獲取當前數據 var url = opts.url;//獲取url opts.url='';//清空url避免從新請求服務器 t.datagrid(opts);//重構表格佈局 t.datagrid('loadData',data);//加載數據 t.datagrid('options').url = url;//恢復請求服務器能力 }; $.extend($.fn.datagrid.methods,{ /*refactor view&&unrelod data 重構視圖&&不從新加載數據*/ refactorView:function (jq, option) { return jq.each(function () { refactorView(this, option); }); } });

 

拓展的這個方法很簡單，做用是在不從新請求遠程數據的前提下重構當前的頁面結構。
以後須要作的事情就很簡單了，在用戶執行鎖定/解鎖、隱藏/取消隱藏等操做的時候，直接經過js改變options的結構，而後從新渲染視圖就ok了。
固然這裏面還涉及到對操做的存儲等問題，簡單說下具體細節：
在第一次執行鎖定/解鎖、隱藏/取消隱藏操做時，我會給option中的columns和frozenColumns中的columnOption增長一個屬性coordinate

arrayUtil.each(frozenColumns,function(level,line){ arrayUtil.each(line,function(index,columnOption){ columnOption.coordinate = { level:level, index:index, preIndex:index>0?index - 1:-1 }; }); });

 

這樣一來全部的列都有了惟一的座標，不論我對這些列怎麼操做，最後都能根據這個座標將其恢復
http://download.csdn.net/detail/tianxiawudi0720/8986419
附上源碼（另：因爲時間問題，複覈表頭的子表頭在鎖定的時候只是簡單的把他移動到鎖定列裏了，有興趣能夠參考隱藏/顯示列的功能把這塊兒補全，代碼位置以下圖：）