1、定義文字

<!--編輯時，value傳入id即可-->

<input type="text" class="form-control" id="makrid" value="" />

2、呼叫

$(function(){
   $("#makrid").droptree({items:[{"id":"0","pId":"0","name":"全部"},"....json格式資料"], 
    transition:"ztree",
    checkenable:true,
    isCheckParent:true,
    isopen:true

    });

});

/**

 * 下拉樹選擇工具類
 */
(function($) {
var defaults = {
idLabel : "id",
textLabel : "name",
pidLabel : "pId",
attrLabel : "obj",
transition : "ztree",
checkenable : false,//是否有複選框
isCheckParent:false,//是否允許選擇父節點
isopen:false,//節點是否展開
marginleft:"0px",//彈出層左邊間距
items : []
};
/**
* target:input element;
* 
*/
function DropTree(target, options) {
this.target = target;
this.value = target.value;
this.$target = $(target);
this.opts = $.extend({}, defaults, options, this.$target.data());
this.id = this.target.id || this.target.name;
if (this.$target.length > 0) {
this._init();
}
return this;
}


DropTree.prototype._init = function() {
var self = this;
this.$target.hide();
this.$selected = $('<input type="text" class="form-control">').insertBefore(this.$target);
// this.$selected.css("height",15);
//this.$selected.html(this.value + " ");
//this.$down = $("<span> </span>").prependTo(this.$selected);
this.transition = Transitions[this.opts.transition].call(this);


};


var Transitions = {
ztree : function() {
var treeId = this.id + "_tree";
// <ul id="treeDemo" class="ztree"></ul>
this.$options = $(
'<div class="g-total-pd g-searchtree-box g-hide" style="margin-left:'+this.opts.marginleft+';max-height:280px;z-index: 999999;position: absolute;overflow:auto;"><ul id="' + treeId + '" class="mfs-options ztree">')
.insertBefore(this.$target);
var selected = this.$selected;
var menudivlist = this.$options;
var srcElem = this.target;
var idLabel = this.opts.idLabel;
var textLabel = this.opts.textLabel;
var attrLabel = this.opts.attrLabel;
var isCheckParent = this.opts.isCheckParent;
var checkenable = this.opts.checkenable;
var isopen = this.opts.isopen;
var zTreeOnCheck = function(event, treeId, treeNode) {
if(checkenable){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.getCheckedNodes(true);
var idArray = new Array();
var nameArray = new Array();
for(var i=0; i<nodes.length; i++) {
var node = nodes[i];
if(!node.isParent){
idArray.push(node.id);
nameArray.push(node.name);
}
}
if(idArray.length > 0) {
$(srcElem).val(idArray.join(","));
}else {
$(srcElem).val("");
}
if(nameArray.length > 0) {
$(selected).val(nameArray.join(","));
}else {
$(selected).val("");
}



/*
$(selected).val(treeNode[textLabel]);
// 為下拉箭頭佔位符
$(srcElem).val(treeNode[idLabel]);
$(srcElem).attr("attr-name",treeNode[attrLabel])
$(srcElem).trigger("change");*/
}
};
var zTreeOnClick = function(event, treeId, treeNode) {
$(selected).val(treeNode[textLabel]);
// 為下拉箭頭佔位符
$(srcElem).val(treeNode[idLabel]);
$(srcElem).attr("attr-name",treeNode[attrLabel])
menudivlist.hide();
$(srcElem).trigger("change");
};
var zTreeBeforeClick = function(treeId, treeNode, clickFlag) {
if(checkenable){
if(treeNode.isCheckParent){
return true;
}
parent.layer.msg('該節點不允許選擇...');
return false;
}else{
if(isCheckParent){
return true;
}
if(treeNode.isCheckParent){
return true;
}
if (treeNode.isParent) {
parent.layer.msg('該父節點不允許選擇...');
return false;
}
return true;
    //return !treeNode.isParent;//當是父節點 返回false 不讓選取
}
};
var setting = {
check: {
enable: checkenable,
chkboxType: { "Y": "ps", "N": "ps" }
},
data : {
simpleData : {
enable : true,
idKey : this.opts.idLabel,
pIdKey : this.opts.pidLabel
}
},
callback : {
onCheck : zTreeOnCheck,
onClick : zTreeOnClick,
beforeClick: zTreeBeforeClick
}
};


this.oper = $.fn.zTree.init($("#" + treeId), setting, this.opts.items);
if(isopen){
this.oper.expandAll(true);
}
// 設定預設值
if(checkenable){
if(!Utils.isEmpty(this.value)){
var svalue = this.value.split(",");
var values = "";
for (i=0;i<svalue.length ;i++ ){ 
var nodes = this.oper.getNodesByParam(idLabel, svalue[i], null);
if (nodes.length > 0) {
var nodeName = (nodes[0])[this.opts.textLabel];
values+=nodeName+",";
// 為下拉箭頭佔位符
this.oper.checkNode(nodes[0], true, true);
//this.oper.selectNode(nodes[0], true);
}
}
$(selected).val(Utils.isEmpty(values)?"":values.substring(0,values.length-1));
}
}else{
var nodes = this.oper.getNodesByParam(idLabel, this.value, null);
if (nodes.length > 0) {
var nodeName = (nodes[0])[this.opts.textLabel];
$(selected).val(nodeName);
// 為下拉箭頭佔位符
this.oper.selectNode(nodes[0], true);
}
}
var enableMagic = function() {
menudivlist.hide();
selected.click(function() {
if (menudivlist.is(':visible')) {
menudivlist.hide();
} else {
menudivlist.show();
}
$(this).blur();
return false;
});
}// end enableMagic
enableMagic();

$(document).click(function (e) {
    var target_id = $(e.target).attr('id');
    if(target_id==null||target_id==''||target_id==undefined){
    menudivlist.hide();
    }else if(target_id.indexOf(treeId)==-1){
    menudivlist.hide();
    }
   
});
}


};


$.fn.droptree = function(options) {
return this.each(function() {
if (!$.data(this, 'droptree')) {
$.data(this, 'droptree', new DropTree(this, options));
}
});
};


})(jQuery)