<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>测试</title>
<meta name="decorator" content="default" />
<script type="text/javascript">
var setting = {
async : {
enable : true,
url : "${ctx}/sys/area/treeData4Async",
autoParam : [ "id=nodeId", "name" ],
// otherParam : {
// "otherParam" : "zTreeAsyncTest"
// },
// dataType: "text",//默认text
// type:"get",//默认post
dataType : "json",
dataFilter : filter
//异步返回后经过Filter
},
data : {
simpleData : {
enable : true
// idKey:"id",
// pIdKey:"pId",
}
},
view: {
dblClickExpand: true,
selectedMulti: false,
expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast"
},
callback : {
// beforeAsync: zTreeBeforeAsync, // 异步加载事件之前得到相应信息
asyncSuccess : zTreeOnAsyncSuccess,//异步加载成功的fun
asyncError : zTreeOnAsyncError, //加载错误的fun
//onNodeCreated: search_ztree //异步加载
}
};
//treeId是treeDemo
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('', '');
}
return childNodes;
}
function zTreeOnAsyncError(event, treeId, treeNode) {
alert("异步加载失败!");
}
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
}
/***********************当你点击父节点是,会异步访问servlet,把id传过去*****************************/
var zNodes = [];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
/**
* 展开树
* @param treeId
*/
function expand_ztree(treeId){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//表示 展开 全部节点
treeObj.expandAll(true);
}
/**
* 收起树：只展开根节点下的一级节点
* @param treeId
*/
function close_ztree(treeId){
//必须在初始化 zTree 以后才可以使用此方法。用户可以随时使用此方法获取需要进行操作的 zTree 对象
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//将 zTree 使用的标准 JSON 嵌套格式的数据转换为简单 Array 格式
var nodes = treeObj.transformToArray(treeObj.getNodes());
var nodeLength = nodes.length;
for (var i = 0; i < nodeLength; i++) {
if (nodes[i].id == '0') {
//根节点：展开 1.需要 展开的节点数据 2.全部子孙节点展开 3.展开操作后，通过设置焦点保证此焦点进入可视区域内 4 执行此方法时触发 beforeExpand / onExpand 或 beforeCollapse / onCollapse 事件回调函数
treeObj.expandNode(nodes[i], true, true, false);
} else {
//非根节点：收起
treeObj.expandNode(nodes[i], false, true, false);
}
}
}
/**
* 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
* @param treeId
* @param searchConditionId 文本框的id
*/
function search_ztree(treeId, searchConditionId){
searchByFlag_ztree(treeId, searchConditionId, "");
}
/**
* 搜索树，高亮显示并展示【模糊匹配搜索条件的节点s】
* @param treeId
* @param searchConditionId 搜索条件Id
* @param flag 需要高亮显示的节点标识
*/
function searchByFlag_ztree(treeId, searchConditionId, flag){
//<1>.搜索条件
var searchCondition = $('#' + searchConditionId).val();
//<2>.得到模糊匹配搜索条件的节点数组集合
var highlightNodes = new Array();
if (searchCondition != "") {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//根据节点数据的属性搜索，获取条件模糊匹配的节点数据 JSON 对象集合 1.需要模糊匹配的属性名称 2.需要模糊匹配的属性值,3匹配模糊搜索的节点数据集合
highlightNodes = treeObj.getNodesByParamFuzzy("name", searchCondition, null);
}
//<3>.高亮显示并展示【指定节点】
highlightAndExpand_ztree(treeId, highlightNodes, flag);
}
/**
* 高亮显示并展示【指定节点s】
* @param treeId
* @param highlightNodes 需要高亮显示的节点数组
* @param flag 需要高亮显示的节点标识
*/
function highlightAndExpand_ztree(treeId, highlightNodes, flag){
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//<1>. 先把全部节点更新为普通样式
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
for (var i = 0; i < treeNodes.length; i++) {
treeNodes[i].highlight = false;
//更新某节点数据，主要用于该节点显示属性的更新。
treeObj.updateNode(treeNodes[i]);
}
//<2>.收起树, 只展开根节点下的一级节点
close_ztree(treeId);
//<3>.把指定节点的样式更新为高亮显示，并展开
if (highlightNodes != null) {
for (var i = 0; i < highlightNodes.length; i++) {
if (flag != null && flag != "") {
if (highlightNodes[i].flag == flag) {
//高亮显示节点，并展开
highlightNodes[i].highlight = true;
//更新某节点数据，主要用于该节点显示属性的更新。
treeObj.updateNode(highlightNodes[i]);
//高亮显示节点的父节点的父节点....直到根节点，并展示
//获取 treeNode 节点的父节点。
var parentNode = highlightNodes[i].getParentNode();
//递归得到指定节点的父节点的父节点....直到根节点
var parentNodes = getParentNodes_ztree(treeId, parentNode);
//展开指定的节点
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
} else {
//高亮显示节点，并展开
highlightNodes[i].highlight = true;
treeObj.updateNode(highlightNodes[i]);
//高亮显示节点的父节点的父节点....直到根节点，并展示
var parentNode = highlightNodes[i].getParentNode();
//递归得到指定节点的父节点的父节点....直到根节点
var parentNodes = getParentNodes_ztree(treeId, parentNode);
treeObj.expandNode(parentNodes, true, false, true);
treeObj.expandNode(parentNode, true, false, true);
}
}
}
}
/**
* 递归得到指定节点的父节点的父节点....直到根节点
*/
function getParentNodes_ztree(treeId, node){
if (node != null) {
var treeObj = $.fn.zTree.getZTreeObj(treeId);
//获取 treeNode 节点的父节点。
var parentNode = node.getParentNode();
return getParentNodes_ztree(treeId, parentNode);
} else {
return node;
}
}
</script>
</head>
<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
按名字过滤：<input type="text" id="dicKey" onclick="search_ztree('treeDemo', 'dicKey')">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>
</html>
现在只能异步点击父节点 搜索查询不进后台查不到 是什么情况
然后怎么改？可以实现
2 个解决方案
#1
@RequiresPermissions("user")
@ResponseBody
@RequestMapping(value = "treeData4Async")
public List<Map<String, Object>> treeData4Async(@RequestParam(required=false) String nodeId,String name, HttpServletResponse response) {
List<Map<String, Object>> mapList = Lists.newArrayList();
List<Area> list = areaService.findChildren(nodeId,name);
for (int i=0; i<list.size(); i++){
Area e = list.get(i);
List<Area> lists = areaService.findChildren(e.getId(),null);
Map<String, Object> map = Maps.newHashMap();
map.put("id", e.getId());
map.put("pId", e.getParentId());
map.put("name", e.getName());
if(lists.size()>0){
map.put("isParent", true);
}
mapList.add(map);
}
return mapList;
}
这是后台的
@ResponseBody
@RequestMapping(value = "treeData4Async")
public List<Map<String, Object>> treeData4Async(@RequestParam(required=false) String nodeId,String name, HttpServletResponse response) {
List<Map<String, Object>> mapList = Lists.newArrayList();
List<Area> list = areaService.findChildren(nodeId,name);
for (int i=0; i<list.size(); i++){
Area e = list.get(i);
List<Area> lists = areaService.findChildren(e.getId(),null);
Map<String, Object> map = Maps.newHashMap();
map.put("id", e.getId());
map.put("pId", e.getParentId());
map.put("name", e.getName());
if(lists.size()>0){
map.put("isParent", true);
}
mapList.add(map);
}
return mapList;
}
这是后台的
#2
就是现在的问题是搜索的时候没有进后台 js都执行了
#1
@RequiresPermissions("user")
@ResponseBody
@RequestMapping(value = "treeData4Async")
public List<Map<String, Object>> treeData4Async(@RequestParam(required=false) String nodeId,String name, HttpServletResponse response) {
List<Map<String, Object>> mapList = Lists.newArrayList();
List<Area> list = areaService.findChildren(nodeId,name);
for (int i=0; i<list.size(); i++){
Area e = list.get(i);
List<Area> lists = areaService.findChildren(e.getId(),null);
Map<String, Object> map = Maps.newHashMap();
map.put("id", e.getId());
map.put("pId", e.getParentId());
map.put("name", e.getName());
if(lists.size()>0){
map.put("isParent", true);
}
mapList.add(map);
}
return mapList;
}
这是后台的
@ResponseBody
@RequestMapping(value = "treeData4Async")
public List<Map<String, Object>> treeData4Async(@RequestParam(required=false) String nodeId,String name, HttpServletResponse response) {
List<Map<String, Object>> mapList = Lists.newArrayList();
List<Area> list = areaService.findChildren(nodeId,name);
for (int i=0; i<list.size(); i++){
Area e = list.get(i);
List<Area> lists = areaService.findChildren(e.getId(),null);
Map<String, Object> map = Maps.newHashMap();
map.put("id", e.getId());
map.put("pId", e.getParentId());
map.put("name", e.getName());
if(lists.size()>0){
map.put("isParent", true);
}
mapList.add(map);
}
return mapList;
}
这是后台的
#2
就是现在的问题是搜索的时候没有进后台 js都执行了