zTree框架实用Demo

$.fn.searchPersion = function(opt) {
var opts = $.extend({
//以下为该插件的属性及其默认值
appraisalByDlgId : '', //对话框的id
appraisalByTreeId : '', //显示树的id
appraisalByKeyId : '', //快速查询的 id
appraisalSubmitId : '', //确定事件的 id
appraisalByShowName : '', //要显示选中撰写人的 name 的 input id
appraisalByHiddenId : '', //隐藏的input id,用于给出选中撰写人的id;
appraisalByUrl : '',//数据url
persionRole : ''//


}, opt || {});
var perisonRole;
var status = opts.persionRole;
var userOrgs = '';
if (status == 0) {
persionRole = "请选择撰写人";
userOrgs = persons.reporters;
} else if (status == 1) {
persionRole = "请选择勘察员";
userOrgs = persons.all;
}
setTimeout(function(){
$('#' + opts.appraisalByDlgId).dialog({
title : persionRole,
width : 300,
height : 500,
closable : true,
modal : true
});
},500);

var setting = {
check : {
enable : true,
chkStyle : "radio",
radioType : "all"
},
data : {
key : {
name : "text",
title : "type"
},
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pid",
rootPId : -1
}
},
view : {
fontCss : getFontCss,
nameIsHTML : true
},
callback : {
beforeClick : beforeClick,
onClick : onClick,
onCheck : onCheck
}
};


var key;


var datas;
key = $("#" + opts.appraisalByKeyId);
$.ajax({
url : opt.appraisalByUrl,
type : "get",
dataType : "json",
async : false,
contentType : "application/x-www-form-urlencoded;charset=UTF-8",
success : function(data) {
datas = data;
jsons = eval(userOrgs);

initTree(jsons);
}
});
function initTree(dtreeNodes) {
//初始化时，将查询框置空
key.val('');
$.fn.zTree.init($("#" + opts.appraisalByTreeId), setting,
dtreeNodes);
var zTree = $.fn.zTree.getZTreeObj(opts.appraisalByTreeId);
zTree.expandAll(true);
var node = zTree.transformToArray(zTree.getNodes());
// if (opts.appraisalByHiddenId != null) {
// var id = $('#' + opts.appraisalByHiddenId).val();
//
// for (var t = 0; t < node.length; t++) {
// if (node[t].id == id) {
// //console.log("id==="+id+"===node==="+node[t].text);
// node[t].checked='true';
// //zTree.checkNode(node[t], true, true, true);
// zTree.selectNode(node[t]);
// //zTree.checkNode(, true, true);
// $('#' + opts.appraisalByShowName).attr('value',
// node[t].text);
// }
// }
// }
var localObj = window.location;
var contextPath = localObj.pathname.split("/")[1];
var basePath = localObj.protocol + "//" + localObj.host + "/"
+ contextPath;
var server_context = basePath;
var hiddenId='';
if (opts.appraisalByHiddenId != null) {
hiddenId = $('#' + opts.appraisalByHiddenId).val();

}
if (node.length > 0) {
for (var t = 0; t < node.length; t++) {
//判断是否有默认值，有的话默认选中，并在input中显示名字
if(node[t].id == hiddenId){
node[t].checked='true';
zTree.selectNode(node[t]);
$('#' + opts.appraisalByShowName).attr('value',
node[t].text);
}
//node的text名字赋给node.name
node[t].name = node[t].text;
if (node[t].type == "dept") {
node[t].type = "组织";
node[t].nocheck = true;
if (node[t].text == "总部") {
node[t].icon = server_context
+ "/resources/js/plugins/jquery-ztree-3.5.15/css/zTreeStyle/img/diy/1_open.png";
} else {
node[t].icon = server_context
+ "/resources/style/images/extjs_icons/org_16px.png";
}


} else if (node[t].type == "user") {
node[t].type = "人员";
node[t].icon = server_context
+ "/resources/style/images/extjs_icons/people_16px.png";
} 
//循环将有任务数据的用户名称赋值
for (var i = 0; i < datas.length; i++) {
if (node[t].id == datas[i].id) {
if(datas[i].name!=null){
node[t].text=datas[i].name;
}
}
}
zTree.updateNode(node[t]);
}


}
key.bind("focus", focusKey)
   .bind("blur", blurKey)
   .bind("propertychange", searchNode)
.bind("input", searchNode);
}
function beforeClick(treeId, treeNode, clickFlag) {
if (treeNode.type == "组织") {
// parent.$.messager.alert('提示3', '请选择正确的人员！', 'info');
return false;
}
}
//双击事件：当被点击时执行
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(opts.appraisalByTreeId);
var type = treeNode.type;
if (type == "组织") {
updateNodes(false);
getFontCss(treeId, treeNode);
return false;
}
//updateNodes(false);
if(treeNode.checked=='true'){
return false;
}{
zTree.checkNode(treeNode, true, null, true);
return false;
}
$('#' + opts.appraisalByDlgId).dialog('close');
}
       //checkBox事件，当点击时执行
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(opts.appraisalByTreeId),
nodes = zTree.getCheckedNodes(true),
v = "";
vid = "";
for (var i = 0, l = nodes.length; i < l; i++) {
var type = nodes[i].type;
if (type == "组织") {
updateNodes(false);
getFontCss(treeId, treeNode);
return false;
}
v += nodes[i].name + ",";
vid += nodes[i].id + ",";
}
if (v.length > 0)
v = v.substring(0, v.length - 1);
if (vid.length > 0)
vid = vid.substring(0, vid.length - 1);


var cityObj = $("#" + opts.appraisalByShowName);
var hiddenObj = $("#" + opts.appraisalByHiddenId);
hiddenObj.attr("value", vid);
cityObj.attr("value", v);
if (!treeNode.checked) {
zTree.cancelSelectedNode(nodes[0]);
} else {
zTree.selectNode(nodes[0]);
$('#' + opts.appraisalByDlgId).dialog('close');
}
}
function focusKey(e) {
if (key.hasClass("empty")) {
key.removeClass("empty");
}
}
function blurKey(e) {
if (key.get(0).value === "") {
key.addClass("empty");
}
}
var lastValue = "", nodeList = [], fontCss = {};
function clickRadio(e) {
lastValue = "";
searchNode(e);
}

function searchNode(e) {
var zTree = $.fn.zTree.getZTreeObj(opts.appraisalByTreeId);


var value = $.trim(key.get(0).value);
var keyType = "text";


// if (key.hasClass("empty")) {
// value = "";
// }
if (lastValue === value)
return;
lastValue = value;
// if (value === "")
// return;
// updateNodes(false);
//
// nodeList = zTree.getNodesByParamFuzzy(keyType, value);
// updateNodes(true);
if(value==""){
                var nodes = zTree.getNodesByParam("isHidden", true);
                zTree.showNodes(nodes);
            }
            else{
//               if(!expandall){
//                   zTree.expandAll(true);                    
//                   expandall=true;
//                }
                var nodes = zTree.getNodesByParam("isHidden", false);
                zTree.hideNodes(nodes);
                var nodes = zTree.getNodesByFilter(filter);
                
                zTree.showNodes(nodes);
                showParent(zTree,nodes);
            }
            zTree.expandAll(true);
            
}
function showParent(zTree,nodes){
            for(i=0;i<nodes.length;i++){
                var node=nodes[i];
                if(typeof(node.pid)!="undefined" && node.pid!=null)
                    showParentNode(zTree,node);
            }
        }
        
        function showParentNode(zTree,node){
        if(node!=null){
             if(typeof(node.pid)!="undefined" && node.pid!=null){
                  var pNode=node.getParentNode();                  
                  zTree.showNode(pNode);
                  showParentNode(zTree,pNode);                  
             }
             else{
                 zTree.showNode(node);
             }
        }
        }
function filter(node) {
var value = $.trim(key.get(0).value);
            if(node.type == "组织")  return false;         
            return (node.text.indexOf(value)>=0);
        }
function updateNodes(highlight) {
var zTree = $.fn.zTree.getZTreeObj(opts.appraisalByTreeId);
for (var i = 0, l = nodeList.length; i < l; i++) {
nodeList[i].highlight = highlight;
zTree.updateNode(nodeList[i]);
}
}
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? {
color : "#A60000",
"font-weight" : "bold"
} : {
color : "#333",
"font-weight" : "normal"
};
}
$("#" + opts.appraisalSubmitId).click(function(){
$('#' + opts.appraisalByDlgId).dialog('close');
});



}