關于easyui 可編輯表格使用心得

    使用easyui架構也兩個多月了，由于項目需要，對于元件可編輯表格(editable datagrid)的性能曾經深深沮喪過，竟然到了噩夢的程度，且聽我細細道來：

    由于元件中對行的動态添加、選擇操作 都需要擷取某行的焦點(beginEdit和endEdit參數)，并且行數增多時候操作極其不便，很容易造成浏覽器腳本停止執行，浏覽器卡死導緻設定的資料丢失，這對使用者操作無疑是幾近崩潰；并且由于項目中每行用到了combobox元件實作下拉框的選擇設定，對于新增行的預設選項置空，都需要使用者自己點選，頁面很容易卡死，造成資料安全問題，使用者體驗差。綜上所述，終是不得不放棄，尋求新的思路，新的解決方法。

    想到easyui架構中對可編輯表格必然大量的封裝、複制，必然代價很高，于是開始使用最原始的、純html、jQuery實作動态複制、添加行資料，動态删除行，等等操作，這麼做下來，發現生成行資料性能幾乎大幅度提升，大概十幾倍，并且對于下拉框select标簽的選擇也很easy，不需要再擷取焦點了~。~，這無疑是大快人心，大聲疾呼啊！<ps:很多人可能會擔心頁面樣式醜陋，尤其是datagrid-toolbar和表格行datagrid-view的樣式，但是可以将easyui的樣式加進去，采用元件的樣式，用火狐浏覽器控制台将代碼扣下來，加進去自己為表格定義的樣式和id。對其整理抽離還是不難的！例如：

//添加行換色效果

 $(".datagrid-row").bind('mouseenter mouseleave',function(){

  $(this).toggleClass("datagrid-row-over");//使用元件的樣式

 });>

    由于可編輯表格是處于easyui的視窗window中，window的content屬性加載另外一個iframe頁面内容，這樣做雖然導緻了引入資源檔案浪費，但是對于這種js代碼邏輯比較多的還是值得的，我們也知道使用window的href屬性隻能加載body内容，這不可行；由于項目需要還需要一個資料加載中的 遮罩效果提示示，可是window的loadMsg發現不起作用，于是乎檢視源碼，細細琢磨，終于發現解決思路：在window的onOpen函數這樣定義：

   onOpen:function(){

    var _self = $(this);//此為window視窗本身

    var msg=$("<div class=\"datagrid-mask-msg\" style=\"display:block\"></div>").html('資料加載中請稍後......').appendTo(_self);//此為将div層添加進視窗中，class屬性是datagrid-mask-msg後面會用到

    msg.css("left",(_self.width()-msg._outerWidth())/2);//使其居中顯示

   }

之後，在window的content加載的另外一個iframe頁面，js腳本$(document).ready(function(){ window.parent.$(.datagrid-mask-msg).hide()});意為當iframe中的文檔結構加載完畢後将這個資料加載中的div隐藏，這樣就實作了資料加載中的效果，而并非需要用傳統的js定時器去機械的實作，增加了靈活機動性；

    最後還有一點，關于在iframe中操作window使其關閉，可以這麼寫：擷取父視窗為window.parent.，則window.parent.$("#windowId").window('close');這樣就可以使用easyui window元件中的close方法；

    done！噩夢不再來。

    發現還是需要耐心 細心 ，遇到問題不需要驚慌，慢慢解決，總會有解決辦法的！

    本人使用的是spring mvc 架構，表格每行的資料name為map['keyn']，或者list[n]，對應可以把資料傳到控制器的對象屬性中，加以判斷 處理即可！