基于ztree的封装
1.使用方法
/*** 初始化化方法 给树的父级的上一个元素加入点击事件* treeId 树的id* treeType 树的种类 当前种类* methods 传入的方法 ，现在支持的方法 onclick filter* multiSel 是否单选*/
function initSelTree(treeId, treeType,methods,multiSel) {//后台访问树的URLvar treeUrl ="/tree/"+treeType+"/getTreeNode";var isShowIcon = true;$("#"+treeId).attr("treeType",treeType);$.fn.zTree.init($("#"+treeId), getSetting(treeUrl,methods,isShowIcon,multiSel), null);
//给父类元素加上click事件 $("#"+treeId).parent().parent().click(function(event){
//点击输入框不弹出if(event.target.type||event.target.type=="text"){hideMenu(treeId);return ;}
//如果已经显示则隐藏 if(! $("#"+treeId).is(":visible")){showSelMenu(treeId);}});
}
/*** 显示下拉框* */
function showSelMenu(treeId) {var treePrev= $("#"+treeId).parent().prev();if(treePrev.val()==""){var ztree=$.fn.zTree.getZTreeObj(treeId);ztree.checkAllNodes(false);}var treeWidth= $("#"+treeId).parent().prev().width();$("#"+treeId).parent().slideDown("fast");if(treeWidth+14<180){$("#"+treeId).parent().css("width","180px");$("#"+treeId).parent().css("right",(treeWidth+14-180)/2+"px");}else{$("#"+treeId).parent().css("width",(treeWidth+14)+"px");}$("body").bind("mousedown",{treeId:treeId}, onBodyDown);}
/*** * @param url url* @param methods 定义的方法 * @returns setting*/
function getSetting(url,methods,isShowIcon,multiSel){//onclick事件var onclick=onclickSel;//返回值成功调用事件var filter=ajaxDataFilter;var oncheck = onCheck;//是否显示图标var showIcon = false;var otherParam = {};var onAsyncSuccessCy =onAsyncSuccess ;if(methods&&methods.hasOwnProperty("onAsyncSuccess")){onAsyncSuccessCy = methods.onAsyncSuccess;}if(methods&&methods.hasOwnProperty("onclick")){onclick = methods.onclick;oncheck = methods.onclick;}if(methods&&methods.hasOwnProperty("filter")){filter = methods.filter;}if(methods&&methods.hasOwnProperty("oncheck")){oncheck = methods.oncheck;}if(methods&&methods.hasOwnProperty("otherParam")){otherParam = methods.otherParam;}if(methods&&methods.hasOwnProperty("showIcon")){showIcon = methods.showIcon;}var beforeClickFun = null;var beforeCheckFun = null;if(multiSel){beforeClickFun = clearSel;beforeCheckFun = clearSel;}var setting = {view: {dblClickExpand: false,showIcon: showIcon,showLine: false,},data: {key:{name:"NAME"},simpleData: {enable: true},showIcon: showIcon},callback: {onCheck: oncheck,onClick: onclick,onAsyncSuccess: onAsyncSuccessCy,beforeCheck:beforeCheckFun,beforeClick:beforeClickFun},async: {enable: true,url:url,autoParam:["ID=p_ID","ATTCODE=p_ATTCODE","PID=p_PID"],otherParam:otherParam,type:"get",dataFilter: filter},check:{enable:true,chkStyle:"checkbox",chkboxType:{"Y":"","N":""}//表示子 父 节点不关联}};return setting;}/*** 绑定鼠标移除事件* @param treeId*/
function hideMenu(treeId) {$("#"+treeId).parent().fadeOut("fast");$("body").unbind("mousedown",{foo:treeId}, onBodyDown);
}
/*** 按其他的元素时取消* @param event*/
function onBodyDown(event) {var treeId = event.data.treeId;var treeObj = $.fn.zTree.getZTreeObj(treeId);
//隐藏位置 树的class 点击是树的父类 点击的父类有treeSelDiv这个属性
// if (!(event.target.id == "menuBtn" || event.target == $("#"+treeId).parent() || $(event.target).parents(".treeSelDiv").length>0)) {
// hideMenu(treeId);
// }if (!(event.target.id == "menuBtn"|| $(event.target).parents(".treeSelDiv").length>0)) {hideMenu(treeId);}}
/*** 调用成功时去掉没有元素的父节点* @param event* @param treeId* @param treeNode* @param msg*/
function onAsyncSuccess(event, treeId, treeNode, msg) {if(msg.length==2){ztree=$.fn.zTree.getZTreeObj(treeId);treeNode.isParent = false;ztree.updateNode(treeNode);}else{}
}/*** onCheck方法 会将复选框中的非父类的勾选元素 id和name 放入 父类的上一个元素* @param e* @param treeId* @param treeNode*/
function onCheck(e, treeId, treeNode) {onclickSel(e, treeId, treeNode);
}
function onclickSel(e, treeId, treeNode){var tree = $("#"+treeId);var treeNode_treeSel = tree.attr("treeNode_treeSel");//获取运维单位IDvar checked_treeSel = tree.attr("checked_treeSel")=="true";if(checked_treeSel==true){treeNode.checked = true;}else{var checked_tree = tree.attr("checked_treeSel");if(e.type=="click"){//判断是点的文本还是选择框 click是点的文本//if(!treeNode.isParent){ //判断是不是父节点 不是父节点就进去ztree=$.fn.zTree.getZTreeObj(treeId);if(checked_tree&&treeNode_treeSel==treeNode.ID){treeNode.checked = checked_treeSel;}treeNode.checked = !treeNode.checked;ztree.updateNode(treeNode);setTreeValue(e, treeId, treeNode);//}}else{ztree=$.fn.zTree.getZTreeObj(treeId);if(checked_tree&&treeNode_treeSel==treeNode.ID){treeNode.checked = !checked_treeSel;}setTreeValue(e, treeId, treeNode); }var fn =tree.attr("clickOrCheck");if(fn){var str =fn+"("+treeNode+")";eval(str);}}
}function setTreeValue(e, treeId, treeNode){var tree = $("#"+treeId);var zTree = $.fn.zTree.getZTreeObj(treeId),nodes = zTree.getCheckedNodes(true),v = "";ids="";var attcodes ="";for (var i=0, l=nodes.length; i 0 ) v = v.substring(0, v.length-1);if (ids.length > 0 ) ids = ids.substring(0, ids.length-1);if (attcodes.length > 0 ) attcodes = attcodes.substring(0, attcodes.length-1);var treePrev = $("#"+treeId).parent().prev();if(treePrev.prev().val()!=ids){var fn =treePrev.prev().attr("clickmethod");if(fn){var str =fn+"('"+ids+"')";eval(str);}}tree.attr("treeNode_treeSel",treeNode.ID);treePrev.val(v);treePrev.prev().val(ids);treePrev.prev().attr("attcode",attcodes);treePrev.prev().attr("parentid",treeNode.PARENT_ID);treePrev.prev().attr("speciaid",treeNode.ID);treePrev.prev().attr("isUser",treeNode.isUser);
}function ajaxDataFilter(treeId, parentNode, responseData) {if (responseData) {for(var i =0; i < responseData.length; i++) {//by tsvar code = (responseData[i].ATTCODE==undefined?responseData[i].ATTRIBUTECODE:responseData[i].ATTCODE);responseData[i].iconSkin = getIconSkin(code);if(responseData[i].children){ajaxDataFilter(null,null,responseData[i].children);}}}return responseData;
};
/*** 根据类型换成iconskin* type attcode* .ztree li span.button.county_ico_docu{margin-right:2px; background: url(./img/county.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}.ztree li span.button.county_ico_open,.ztree li span.button.county_ico_close{margin-right:2px; background: url(./img/county.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}* skin css中定义的属性* @param attcode* @returns*/
function getIconSkin(attcode) {if(attcode){var type =["COUNTY"];var skin =["county"];for (var i = 0; i < type.length; i++) {if(attcode == type[i]){return skin[i];}}}
};
/*** 单选* @param treeId* @param treeNode* @param clickFlag* @returns*/
function clearSel(treeId, treeNode, clickFlag) {var tree = $("#"+treeId);var ztree=$.fn.zTree.getZTreeObj(treeId);if(treeNode){/*if(treeNode.isParent){}else{*/var checked_treeSel = treeNode.checked;tree.attr("checked_treeSel",checked_treeSel);//}}if(checked_treeSel==true){treeNode.checked = true;}else{ztree.checkAllNodes(false); }}; 本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！