基于jquery和jstree的组合下拉树的插件开发

做前端的过程中，慢慢发现，有些记忆力是靠不住的，是需要用东西来记录下来的。

插件的开发是当初在公司的时候有一个需求：需要一个输入框下拉出来一个树形结构，百度看了看别人的插件，没找到符合我自己需求的，当初看了一下ztree的的下拉树，感觉不太符合，于是想自己写一个。

因为公司前期采用require.js 的amd

一、所以开头进行判断是不是异步的加载机制

;(function(factory) {
    if (typeof define === 'function' && define.amd) { //判断是不是异步加载模式
        define(['jquery','jstree'], factory);
    } else {
        factory(jQuery);  // 浏览器
    }
})(function(jQuery){//插件代码})

然后进行插件功能的开发：

然后子啊jq的原型上扩展一个方法 combotree

$.fn.combotr

 $.fn.combotree=function(options){
    	// ie8及其以下版本不支持foreach，次方法用来让不支持foreach的浏览器支持foreach
    	if (typeof Array.prototype.forEach != 'function') {
    	    Array.prototype.forEach = function(callback){
    	      for (var i = 0; i < this.length; i++){
    	        callback.apply(this, [this[i], i, this]);
    	      }
    	    };
    	}

       // 为插件定义一些默认参数
	arguments.callee.defaults={     //argument.callee  指向当前调用的 this 
	    elementClick:function(nodes,tree){},   //点击节点后触发的函数
	    clearSelClick : function(){},   // 情况输入框的值
	    isExtend:false,   // 是否把下拉树全部展开
	    disabled:false,   // 是否禁用
	    maxHeight:250,   // 下拉树div的高度
	    displayParentVal: false    // 是否禁用父节点
	 };

        options=$.extend(true,{},{"defaults":$.fn.combotree.defaults},options||{});    // $.extend 可以把参数合并,前面会覆盖前面
        var treeId = $(this).attr("id");

        if($("#"+treeId+"_parentName").length<1){   // 控制重新设置url时不会出现渲染两次的错误
        	posCon=$('
');
        	target=$('');
        	$(this).before(posCon);
        	posCon.append(target);
        	dwidth=$("#"+treeId+"_parentName").outerWidth()-2;
        	target.after('')
        	treeDemo=$("
");
        	searchbox=$("
取消选中
")
        	treeDemo1=$("
");
        	target.after(treeDemo);
        	treeDemo.append(searchbox);
        	treeDemo.append(treeDemo1);
        }else{
        	$("."+treeId+"_mytree").empty();
        	$("."+treeId+"_mytree").remove();
        	target = $("#"+treeId+"_parentName");
        	treeDemo = $("#"+treeId+"_wrap");
        	searchbox = $("#"+treeId+"_searchbox");
        	treeDemo1=$("
");
        	treeDemo.append(treeDemo1);
        }

调用方式$(selector).combotree(options);  进行插件的初始化