Jquery-easyui-combotree使用心得

combotree使用效率

　　背景

　　項目中需要多選下拉框，因為是多選涉及到全選反選的問題，所以使用了easyui的combotree

　　效果圖

　　

　　特殊要求：下拉框部分選項是有關聯關系的，例如：完成率=年計划/年累計完成，這個就涉及到有商,除數被除數必須有，沒有商這兩個選項不作要求。

　　通過官方API查到combotree的父類是combo和tree,找到combo中有onchange事件正好用來做關聯關系。

　　前台頁面js代碼

　　

$(function(){
    //加載combotree
    var url_str =  "${pageContext.request.contextPath}/aa.action;
        $('#cc').combotree({
            url: url_str,
            required:true
        });
    //注冊事件
    $("#cc").combotree({
                onChange:function(){
                   
                        my_check(1);
                    
                }
            });
    //給下拉框賦值
  $("#cc").combotree('setValues',colIds_arr);  
}

function my_check( flag){
　　//處理關聯關系
　　//完成賦值操作

 $("#cc").combotree('setValues',cc); 

}

　　通過測試得出結論，combotree setValues事件會不斷的調用onChange事件，如果下拉選項數目很多，會導致加載下拉選項值時不斷調用我們自己寫的onChange事件，由於我們自己的onChange事件需要很多邏輯處理，導致瀏覽器相應緩慢，出現假死現象，在IE8下直接報錯，停止響應。

　　解決方法

　　onChange應該只有在我們去單擊下拉框時才起作用，開始的setValues時不應該進入我們的onChange事件。

　　修改后代碼

　　

var xunhuan_flag="1";
$(function(){
    var url_str = "${pageContext.request.contextPath}aa.action;
        $('#cc').combotree({
            url: url_str,
            required:true
        });
    $("#cc").combotree({
                onChange:function(){
                    if(xunhuan_flag=="0")){
                        my_check(1);
                    }
                }
    });
    //用來修改全局變量，使onChange事件起作用 $(".tree")正好是下框部分。查看下拉框區域時可使用google瀏覽器的審查元素進行查找
        $(".tree").mouseenter(function(){
            xunhuan_flag="0";
        });
        $(".tree").mouseout(function(){
            xunhuan_flag="0"; });
    $("#cc").combotree('setValues',colIds_arr);
   }
    function my_check( flag){
    //邏輯處理
    $("#cc").combotree('setValues',aa);
    }

　　問題解決，IE8下測試無問題。

　　

出處：http://www.cnblogs.com/Feeling-always-wrong/
本文版權歸作者，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接。