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/
本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。