ztree动态设置节点颜色

最新推荐文章于 2024-04-26 15:21:07 发布

enAn_

最新推荐文章于 2024-04-26 15:21:07 发布

阅读量1.1w

点赞数 1

分类专栏： js 文章标签： ztree

本文链接：https://blog.csdn.net/yuxueyuanwj/article/details/88836875

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2019-03-27 0937 星期三

//注意点：
var nodeSearchJson     = {color:"blue"		,"font-weight":"normal"};//搜索功能,定位当前节点字体
zTreeObject.setting.view.fontCss = nodeSearchJson;//正确设置
 //zTreeObject.setting.view.fontCss["color"] = "blue";//错误设置,被网上的文档给带入误区了,ztree的api也是用的json设置

在这里插入图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.midea.com/mdp/taglib" prefix="m"%>
<%@ page import="com.midea.mdp.ui.support.el.MessageELFunction" %>
<script type="text/javascript">
	var nodeHighLightJson  = {color:"#A60000"	,"font-weight":"bold"};//高亮字体颜色
    var nodeCheckedYesJson = {color:"#333"		,"font-weight":"bold"};//选中字体颜色
    var nodeCheckedNoJson  = {color:"#333"		,"font-weight":"normal"};//没有选中字段颜色
    var nodeSearchJson     = {color:"blue"		,"font-weight":"normal"};//搜索功能,定位当前节点字体
	var paramId = '${paramId}';	
	var searchKeyWordJson = {
		"word":"",			//关键字
		"totalNmuber:":0,	//总个数
		"currentNumber":0,	//当前第几个
		"data":null,		//数据
		"isClick":"N"		//是否点击查询,默认是N,没有点击
	};//搜索关键字信息:2019-02-21,wenjian
	var paramMemberTree_setting = {
		view : {
			fontCss   : setFontCss,
			addDiyDom : addDiyDom
		},
		data : {
			simpleData : {
				enable : true
			}
		},
		check : {
			enable : true,
			chkStyle : "checkbox",
			chkboxType : {
				"Y" : "ps",
				"N" : "ps"
			}
		},
		callback : {
			onCheck : onCheck,
			onClick : paramMemberClick
		},
		async : {
			enable : true,
			url : '${ctx}/public-access/epm/platform/plnadapter/taskConfig.do?paramMemberList&paramId='+paramId, //异步请求地址  
			autoParam : [ "id", "level=lv"],
			dataFilter : filter,
			type : "post"
		}
	};

	$(document).ready(function() {
		loadParamMemberSelected();
		loadParamMemberTree();
	});
	
	var paramMemberTreeSetting = {
		toolbar : [ {
			id : 'delBtn',
			text : '<%=MessageELFunction.getMessage("pln.adapter.task.deselectAll")%>',
			icon : 'icon-file.png',
			onClick : function(item, component) {
				var paramMemberTree = $.fn.zTree.getZTreeObj("paramMemberTree");
				paramMemberTree.checkAllNodes(false);
			}
		}]
	};
	
	var paramMemberSelectedSetting = {
		toolbar : [ {
			id : 'delBtn',
			text : '<%=MessageELFunction.getMessage("pln.adapter.task.clear")%>',
			icon : 'icon-file.png',
			onClick : function(item, component) {
				$("#paramMemberSelected").html("");
			}
		}]
	};
	
	/**节点内容过长截取**/
	function addDiyDom(treeId, treeNode){
        var spanText = $("#" + treeNode.tId+'_span').html();
        $("#" + treeNode.tId + "_span").html(getSubString(28, treeNode.level, spanText));
	}
	
	function filter(treeId, parentNode, childNodes) {
		if (!childNodes)
			return null;
		for (var i = 0, l = childNodes.length; i < l; i++) {
			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
		}
		return childNodes;
	}

	/**参数成员点击事件**/
	function paramMemberClick(event, treeId, treeNode) {
    	var paramMemberTree = $.fn.zTree.getZTreeObj("paramMemberTree");
    	if(treeNode.checked){
    		paramMemberTree.checkNode(treeNode, false, true);
    	}else{
    		paramMemberTree.checkNode(treeNode, true, true);
    	}
		var nodes = paramMemberTree.getCheckedNodes(true);
		$("#paramMemberSelected li").remove();
		for (var i=0, l=nodes.length; i < l; i++) {
			var treeNode = nodes[i];
			if(treeNode.pId != null && treeNode.pId.indexOf("head") == -1){
				$("#paramMemberSelected").append('<li><span title=\"\" class=\"button level0 switch root_close\" treenode_switch=\"\"></span><a class=\"level1\" \"removeSelect($(this))\" target=\"_blank\" style=\"\" title=\"'+treeNode.name+'\"><span value=\"'+treeNode.code+'\">'+getSubString(28, 0, treeNode.name)+'</span></a></li>');
			}
		}
	}
	
	/**参数成员勾选事件**/
	function onCheck(event, treeId, treeNode) {
    	var paramMemberTree = $.fn.zTree.getZTreeObj("paramMemberTree");
		var nodes = paramMemberTree.getCheckedNodes(true);
		$("#paramMemberSelected li").remove();
		for (var i=0, l=nodes.length; i < l; i++) {
			var treeNode = nodes[i];
			if(treeNode.pId != null && treeNode.pId.indexOf("head") == -1){
				$("#paramMemberSelected").append('<li><span title=\"\" class=\"button level0 switch root_close\" treenode_switch=\"\"></span><a class=\"level1\" \"removeSelect($(this))\" target=\"_blank\" style=\"\" title=\"'+treeNode.name+'\"><span value=\"'+treeNode.code+'\">'+getSubString(28, 0, treeNode.name)+'</span></a></li>');
			}
		}
	}
	/**设置查询结果字体**/
    function setFontCss(treeId, treeNode) {
		return treeNode.highlight ? nodeHighLightJson: (treeNode.checked ? nodeCheckedYesJson : nodeCheckedNoJson);  
	};
</script>
<table style="width: 100%;height:100%" class="ui-form-table">
	<tr>
		<td width="350px" align="left">
   		 	<m:panel header='<%=MessageELFunction.getMessage("pln.adapter.task.parameterMemberList")%>' height="430px" width="100%" setting="paramMemberTreeSetting">
				<table  style="width: 100%;">
					<tr>
						<td class="name" nowrap="nowrap">关键字：</td>
						<td class="text" nowrap="nowrap"><input id="keyword" style="border: 1px solid #e5e5e5;width: 130px;height: 20px;"/></td>
						<td>
							<input type="button" id="btnSearch" name="btnSearch" onclick="doSearch();return false;" class="btnSearch" value="查询">
						</td>
						<td colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
					</tr>
					<tr>
						<td style="width: 20%;"></td>
						<td colspan="5" style="width: 80%;">
							<div>
								<!-- 解释为什么排倒的,因为按常规排是反的,固这样排,非得按常规排,需要查看mdp-ui.js -->
								<ul class="ui-toolbar">
									<li id="searchLast" class="ui-toolitem">
										<a class="ui-toolitem-a" href="javascript:void(0)">
											<strong><img src="/epm-web/resource/icons/toolbar/icon-file.png">最后一个</strong>
										</a>
									</li>
								</ul>
								<ul class="ui-toolbar">
									<li id="searchDown" class="ui-toolitem">
										<a class="ui-toolitem-a" href="javascript:void(0)">
											<strong><img src="/epm-web/resource/icons/toolbar/icon-file.png">下一个</strong>
										</a>
									</li>
								</ul>
								<ul class="ui-toolbar">
									<li id="searchUp" class="ui-toolitem">
										<a class="ui-toolitem-a" href="javascript:void(0)">
											<strong><img src="/epm-web/resource/icons/toolbar/icon-file.png">上一个</strong>
										</a>
									</li>
								</ul>
								<ul class="ui-toolbar">
									<li id="searchFirst" class="ui-toolitem">
										<a class="ui-toolitem-a" href="javascript:void(0)">
											<strong><img src="/epm-web/resource/icons/toolbar/icon-file.png">第一个</strong>
										</a>
									</li>
								</ul>
							</div>
						</td>
					</tr>
					<tr>
						<td style="width: 20%;"></td>
						<td colspan="5" style="width: 80%;">&nbsp;&nbsp;&nbsp;&nbsp;搜索结果:<font id="searchResultMsg" color="red"></font></td>
					</tr>
				</table>
				<div style="height: 280px;overflow:scroll;">
					<ul id="paramMemberTree" class="ztree"></ul>
				</div>
				
			</m:panel>
   		</td>
		<td width="350px" align="left" valign="top">
			<m:panel header='<%=MessageELFunction.getMessage("pln.adapter.task.selected")%>' height="430px" width="100%" setting="paramMemberSelectedSetting">
				<ul id="paramMemberSelected" class="ztree"></ul>
			</m:panel>
   		</td>
	</tr>
</table>
<script type="text/javascript">	
	/**加载参数成员树**/
	function loadParamMemberTree() {
		$.fn.zTree.init($("#paramMemberTree"), paramMemberTree_setting);
	}
	
	/**加载已选成员**/
	function loadParamMemberSelected() {
		var paramMemberSelected = eval('${paramMemberSelected}');
		for(var i=0;i<paramMemberSelected.length;i++){
		   $("#paramMemberSelected").append('<li ><span title=\"\" class=\"paramMember level0 switch root_close\" treenode_switch=\"\"></span><a class=\"level1\" \"removeSelect($(this))\" target=\"_blank\" style=\"\" title=\"'+paramMemberSelected[i].name+'\"><span value=\"'+paramMemberSelected[i].code+'\">'+getSubString(28, 0, paramMemberSelected[i].name)+'</span></a></li>');
		}
	}
	
	/**文本超长截取**/
	function getSubString(num, level, value){
		var len = 0;
		var result = "";
		for(var i=0; i<value.length; i++){
			var c = value.charCodeAt(i);
			if(len < (num-level*2)){
	        	//单字节加1
	        	if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
	                len += 0.5;
	            }else {
	                len ++;
	            }
	        	result += value[i];
	        }else{
	        	result += "...";
	        	break;
	        }
		}
        return result;
    }
	
	/**删除已选**/
	function removeSelect(select){
		select.parent("li").remove();
	}
	
	/**窗口返回结果**/
	function dialogResult() {
		return getSelectedParamMembers();
	}
	
	/**获取已选成员**/
	function getSelectedParamMembers(){
		var paramMembers = '[';
		var i = 0;
		if($("#paramMemberSelected").html()==""){
			return "";
		}else{
			$("#paramMemberSelected li a span").each(function(){
				paramMembers += '{"code": "'+$(this).attr("value")+'","name": "'+$(this).text()+'"},'
			});
			paramMembers = paramMembers.substring(0,paramMembers.length-1);
			paramMembers += ']'
			return paramMembers;
		}
	}
	
	/**按钮列表查询**/     
	function doSearch() {
		var zTreeId = "paramMemberTree";//左边ztree树的id
		var keyword = $.trim($("#keyword").val());
		var zTreeObject = $.fn.zTree.getZTreeObj(zTreeId);  
		var node = zTreeObject.getNodes(); 
    	var nodes = zTreeObject.transformToArray(node);
    	/*********先取所有的高亮*************/
		for(var i=0; i<nodes.length; i++) {
			nodes[i].highlight = false;
			zTreeObject.setting.view.fontCss = nodeCheckedNoJson;//重置为普通
			zTreeObject.updateNode(nodes[i]);
		}
		/**关键字查询**/
		searchKeyWordJson.currentNumber = 0;//当前第几个,默认第一个为0
		searchKeyWordJson.isClick = "Y";//是否已经点击查询
		searchKeyWordJson.word = keyword;//关键字
		if(keyword != null && keyword != ""){
			var nodeList = zTreeObject.getNodesByParamFuzzy("name", keyword); //调用ztree的模糊查询功能，得到符合条件的节点 
			if(nodeList.length == 0){
				//***搜索关键字信息[关键字,总个数,当前第几个]*******/
				searchKeyWordJson.totalNmuber = 0;//总个数
				searchKeyWordJson.data = null;//数据
				altSearchResultMsg("查询无结果！");
				return;
			}else{
				searchKeyWordJson.totalNmuber = nodeList.length;//总个数
				searchKeyWordJson.data = nodeList;//数据
				zTreeObject.selectNode(searchKeyWordJson.data[0]);//选中,默认第一个
				altSearchResultMsg("有:" + nodeList.length + "个结果" + ".当前在:"+ 1 + "/" +  searchKeyWordJson.totalNmuber);
			}
			/**高亮显示查询结果**/
	    	for(var i=0; i<nodeList.length; i++) {    
	    		nodeList[i].highlight = true;
	    		zTreeObject.setting.view.fontCss = nodeHighLightJson;//重置为高亮
		        zTreeObject.updateNode(nodeList[i]);
	            expandParentNodes(zTreeObject, nodeList[i]);
				addDiyDom(zTreeId,nodeList[i]);         
		    }
		    console.log("查询.设置动态节点颜色");
		    zTreeObject.setting.view.fontCss = nodeSearchJson;//正确设置
		    //zTreeObject.setting.view.fontCss["color"] = "blue";//错误设置,被网上的其他人写的文档给带入误区了,ztree的api也是用的json设置
		    zTreeObject.updateNode(searchKeyWordJson.data[0]);
		}else{
			searchKeyWordJson.word = "";//关键字
			searchKeyWordJson.totalNmuber = 0;//总个数
			searchKeyWordJson.data = null;//数据
			altSearchResultMsg("暂末输入查询条件!");
		}//end,keyword    		
	}
	
	/**展开:递归得到指定节点的父节点的父节点....直到根节点**/
    function expandParentNodes(zTreeObject, node){
    	var parentNode = node.getParentNode();
        if (parentNode != null) {
            zTreeObject.expandNode(parentNode, true, false, true);
            expandParentNodes(zTreeObject, parentNode);
        }
    }
/**********搜索功能:第一个/上一个/下一个/最后一个,2019-02-22,begin*****************************************/
	function searchUpDown(action){		
		var keyword 		= $.trim($("#" + "keyword").val());
		var zTreeObject 	= $.fn.zTree.getZTreeObj("paramMemberTree");
		var totalNmuber 	= searchKeyWordJson.totalNmuber;
		var currentNumber 	= searchKeyWordJson.currentNumber;
		var data 			= searchKeyWordJson.data;
		var word 			= searchKeyWordJson.word;
		var isClick 		= searchKeyWordJson.isClick;//是否已经点击
		var number = 0;
		var timestamp = (new Date()).getTime();//当前时间戳,如:1495302061441
		if( keyword == null || keyword == ""){
			altSearchResultMsg("请输入关键字查询后,再点击!");
			return;
		}else if((totalNmuber == 0 && data == null) || isClick == "N"){
			altSearchResultMsg("无查询结果,稍后点击!");
			return;
		}
		/********判断是点击了哪一个*****************/ 
		var firstOrLastMsg = "";
	  	if(action == "first"){//第一个
	  		number = 0;
	  	}else if(action == "up"){ //向上
		 	if(currentNumber == 0){
		 		number = 0;
		 		firstOrLastMsg = ".已经是第一个了!";				 
		 	}else{
		 		number = currentNumber -1;
		 	}
	  	}else if(action == "down"){ //向下
		 	if(currentNumber == (totalNmuber-1)){
		 		 number = (totalNmuber -1) ;
		 		 firstOrLastMsg = ".已经是最后一个了!";				
		 	}else{
		 		number = currentNumber + 1 ;
		 	}
	 	}else if(action == "last"){//最后一个
	 		number = (totalNmuber -1) ;
	 	}
	 	 searchKeyWordJson.currentNumber = number;
		 zTreeObject.selectNode(data[number]);//选中,节点定位
		 altSearchResultMsg("当前在:"+ (number+1) + "/" +  totalNmuber + firstOrLastMsg);
		 /**搜索功能,定位节点颜色改变,begin**/
	     for(var i=0; i< totalNmuber; i++) { 
	    	if(i == number){
	    		zTreeObject.setting.view.fontCss = nodeSearchJson;//当前节点改变颜色
	    	}else{
	    		zTreeObject.setting.view.fontCss = nodeHighLightJson;//重新设置成高亮
	    	}
	    	zTreeObject.updateNode(data[i]);  
		 }
		/**搜索功能,定位节点颜色改变,end**/
	}
	$("#searchFirst").click(function(){
		searchUpDown('first');//搜索按钮:第一个
	}); 
	$("#searchUp").click(function(){
		searchUpDown('up');//搜索按钮:上一个
	}); 
	$("#searchDown").click(function(){
		searchUpDown('down');//搜索按钮:下一个
	}); 
	$("#searchLast").click(function(){
		searchUpDown('last');//搜索按钮:最后一个
	}); 
	 /*提示信息*/
	function altSearchResultMsg(msg){
		$("#searchResultMsg").html("");//清空原来的信息
		$("#searchResultMsg").html(msg);
	}
/**********搜索功能:第一个/上一个/下一个/最后一个,2019-02-22,begin*****************************************/ 
</script>

enAn_

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
ztree动态设置节点颜色

2019-03-27 0937 星期三<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://www.gongsi.com/mdp/taglib" prefix="m"%><%@ page import...
复制链接

扫一扫

专栏目录