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¶mId='+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"> </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%;"> 搜索结果:<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>
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
