需求
页面上需要进行模糊查询匹配，使用js完成，效果如下：
通过主题和名称组成的多条件查询
首先，要把数据组装成下面的格式：
var treejson=[{
id:'theme0',
nodename:'经济主题',//节点名称
children:[{id:'1',nodename:'规模增长及增速'},{id:'2',nodename:'产业构成'},{id:'3',nodename:'社会消费品构成'}]
},{
id:'theme1',
nodename:'人口主题',//节点名称
children:[{id:'4',nodename:'规模增长及增速'},{id:'5',nodename:'贫困特征'}]
}]
前端js代码的格式如上面的格式，由于在前端不好组装数据，所以在后台进行数据的组装，后台代码 如下：
List<Map<String,Object>> list = themeService.getThemes();
List<Map<String,Object>> listJson = new ArrayList<Map<String,Object>>();
for (Map<String, Object> map2 : list) {
String themeId = map2.get("id").toString();
//获取图元数据
List<Map<String, Object>> info = service.getInfo(themeId);
//查询数据的组装
Map<String,Object> jmap = new HashMap<String, Object>();
Object obj = map2.get("id");
jmap.put("id", obj);
Object obj1 = map2.get("name");
jmap.put("nodename", obj1);
jmap.put("children", info);
listJson.add(jmap);
}
//查询数据
setAttribute("charInfoListJson", JsonUtil.toJson(listJson));
这样就可以把数据组装成上面所对应的格式了，下面就是所对应的前端代码了，jsp代码如下
<div class="message" id="animate">
<div class="line">
<div class="lineC" id="1">
<span class="text">人口主题</span> <em></em>
</div>
<ul style="display: block;">
<li class="active" id="1" onclick="gb1(this);">人口流入</li>
<li id="2" onclick="gb1(this);">就业人口行业分布</li>
<li id="3" onclick="gb1(this);">近年人口增长率</li>
<li id="4" onclick="gb1(this);">人口流出</li>
<li id="5" onclick="gb1(this);">近年失业率统计</li>
<li id="6" onclick="gb1(this);">文化程度分析</li>
<li id="7" onclick="gb1(this);">近年婚姻状况分析</li>
<li id="8" onclick="gb1(this);">各年龄段人口数</li>
</ul>
</div>
</div>
<div class="rightInfo fr w84 economic-left">
<div class="tuyuan w100" id="tuyuan">
<div class="fonud">
<span>主题：</span> <select name="" id="father">
<option value="main">全部</option>
<option value="1">人口主题</option>
<option value="8a90fb266095aca7016095d66fff0006">法人主题</option>
<option value="8a90fb266095aca7016095d688f80007">农业主题</option>
<option value="8a90fb266095aca7016095d6ac6f0008">经济主题</option>
<option value="8a90fb266095aca7016095d6c2770009">旅游主题</option>
</select> <span>名称：</span> <input id="son" type="text" class="form-control"
value=""> <a href="javascript:search()">查询</a>
</div>
<div class="chart" id="chart" style="overflow: auto;">
<div id="box">
<div class="ztBox" id="1">
<div class="zt-title">
<i></i> <span>人口主题</span>
</div>
<div class="ztinfo clearfix">
<div class="w33 fl checked" data-num="1" data-type="10">
<div class="pixel" onclick="preview(this);">
<div id="drop11" class="w100"></div>
</div>
<div class="pixel-txt" onclick="revise(this);">人口流入</div>
</div>
<div class="w33 fl" data-num="2" data-type="1">
<div class="pixel" onclick="preview(this);">
<div id="drop12" class="w100"></div>
</div>
<div class="pixel-txt" onclick="revise(this);">就业人口行业分布</div>
</div>
<div class="w33 fl" style="margin-right: 0px;" data-num="3"
data-type="2">
<div class="pixel" onclick="preview(this);">
<div id="drop13" class="w100"></div>
</div>
<div class="pixel-txt" onclick="revise(this);">近年人口增长率</div>
</div>
<div class="w33 fl" data-num="4" data-type="11">
<div class="pixel" onclick="preview(this);">
<div id="drop14" class="w100"></div>
</div>
<div class="pixel-txt" onclick="revise(this);">人口流出</div>
</div>
<div class="w33 fl" data-num="5" data-type="8">
<div class="pixel" onclick="preview(this);">
<div id="drop15" class="w100"></div>
</div>
<div class="pixel-txt" onclick="revise(this);">近年失业率统计</div>
</div>
<div class="w33 fl" style="margin-right: 0px;" data-num="6"
data-type="9">
<div class="pixel" onclick="preview(this);">
<div id="drop16" class="w100"></div>
</div>
<div class="pixel-txt" onclick="revise(this);">文化程度分析</div>
</div>
<div class="w33 fl" data-num="7" data-type="8">
<div class="pixel" onclick="preview(this);">
<div id="drop17" class="w100"></div>
</div>
<div class="pixel-txt" onclick="revise(this);">近年婚姻状况分析</div>
</div>
<div class="w33 fl" data-num="8" data-type="5">
<div class="pixel" onclick="preview(this);">
<div id="drop18" class="w100"></div>
</div>
<div class="pixel-txt" onclick="revise(this);">各年龄段人口数</div>
</div>
</div>
</div>
对应的js代码如下：
function search(){
var theme=$('#father').find("option:selected").text();
var value=$('#son').val();
//删除列表及图元的选中状态
$('#box .w33').removeClass("checked");
$('#animate li').removeClass("active");
//隐藏主题及下属的chart
if(theme=="全部"){//全部主题时的查询方法
if(value.length==0){
$("#box .ztBox").css("display","block");
$("#box .w33").css("display","block");
//根据主题的索引index去匹配左侧树，及右侧树的层级结构：
$("#box .ztBox").each(function(i,v){
if($(v).index()==0){
$(v).find(".w33").each(function(i1,v1){
if($(v1).index()==0){
$(v1).css("display","block");
$(v1).addClass("checked");
}
else{
$(v1).css("display","block");
}
})
}
});
$("#animate .line").each(function(i,v){
if($(v).index()==0){
$(v).find("ul li").each(function(i1,v1){
if($(v1).index()==0){
$(v1).addClass("active");
}
});
}
});
}
else{
$("#box .ztBox").css("display","none");
$("#box .w33").css("display","none");
for(var t=0;t<treejson.length;t++){
var children=treejson[t].children;
var id=treejson[t].id;
var index;
for(var i=0;i<children.length;i++ ){
//模糊匹配
if(children[i].nodename.indexOf(value)>=0){
var theme=treejson[t].nodename;
var child_id=children[i].id;
$('#box .ztBox').each(function(i,v){
if($(v).find('span').text()==theme){
$(this).css("display","block");
}
});
$("#box .w33").each(function(i,v){
if ($(v).attr("data-num") == child_id) {
$(this).css("display","block");
$(this).addClass("checked");
}
})
$("#animate li").each(function(i1,v1){
if($(v1).attr("id") == child_id){
$(this).addClass("active");
}
})
}
}
}
}
}
else{//有特定主题的查询方法
$("#box .ztBox").css("display","none");
$("#box .w33").css("display","none");
for(var j=0;j<treejson.length;j++){
if(treejson[j].nodename==theme){
var children=treejson[j].children;
var id=treejson[j].id;
var index;
$("#box .ztBox").each(function(i,v){
if ($(v).attr("id") == id) {
$(this).css("display","block");
index=$(this).index();
}
})
if(value.length>0){
var flag=0;
for(var i=0;i<children.length;i++ ){
//模糊匹配
if(children[i].nodename.indexOf(value)>=0){
flag++;
var child_id=children[i].id;
$("#box .w33").each(function(i,v){
if ($(v).attr("data-num") == child_id) {
$(this).css("display","block");
$(this).addClass("checked");
}
})
$("#animate li").each(function(i1,v1){
if($(v1).attr("id") == child_id){
$(this).addClass("active");
}
})
}
}
}
else if(value.length==0){
//根据主题的索引index去匹配左侧树，及右侧树的层级结构：
$("#box .ztBox").each(function(i,v){
if($(v).index()==index){
$(v).find(".w33").each(function(i1,v1){
if($(v1).index()==0){
$(v1).css("display","block");
$(v1).addClass("checked");
}
else{
$(v1).css("display","block");
}
})
}
});
$("#animate .line").each(function(i,v){
if($(v).index()==index){
$(v).find("ul li").each(function(i1,v1){
if($(v1).index()==0){
$(v1).addClass("active");
}
});
}
});
}
}
}
//主题循环查询结束
}
//else结束
}