以下全是测试数据：
任务描述：
1.左侧Tab可以切换，切换的同时右侧的结果相应变动
2.左侧的搜索是对树中结点的搜索，支持模糊查询，查到结点设置高亮且展开父节点
3.右侧的查询条件只会更新右侧下半部分的列表
右侧的查询条件指
这个部分要求：点双次取消(同时本组的”全部“高亮)， 单数次高亮，另外点击“全部”不会取消高亮
4.根据条件统计，并将结果按产品给的模版导出
5. 3和2点击完则触发查询，关键字查询则是按钮触发
6.右侧的多组查询条件 组内互斥，组间&组合
web层采用SpringMVC + Mybatis(持久层) + MySQL数据库
前端：jQuery + Beetl + jQuery.validate(表单验证) + bootstrap
注释没加(另外Util_Common是自己做的封装，有些地方没必要写)
1.主界面数据初始化及Tab切换
$(
function
() {
$.zThreeLeftMenuLoad(
'treeDemo1'
, commonLeftMenuZtreeSetting, url);
Util_Common.openModel(url,
'metadate_count_charts'
);
Util_Common.openModel(url,
'query_metadate_conditions'
, {type: 1});
var
dataArray = formArrayUtil($(
"#query_metadate_conditions_form"
).serializeArray())[0];
//这句话没什么用可以去掉
Util_Common.queryPage(1, 10, url,
'metadata_table_info_grids'
, dataArray);
$(
'#treeSearchBtn'
).click(
function
() {
eachTreeNode();
});
$(
'#addFormDemo'
).click(
function
() {
window.location.href = url;
});
});
function
changeTab(index) {
switch
(index) {
case
1:
$.zThreeLeftMenuLoad(
'treeDemo'
+ index, commonLeftMenuZtreeSetting, url,
null
);
Util_Common.openModel(url,
'metadate_count_charts'
, {type: 1});
Util_Common.openModel(url,
'query_metadate_conditions'
, {type: 1});
break
;
case
2:
$.zThreeLeftMenuLoad(
'treeDemo'
+ index, commonLeftMenuZtreeSetting, url,
null
);
Util_Common.openModel(url,
'metadate_count_charts'
, {type: 2});
Util_Common.openModel(url,
'query_metadate_conditions'
, {type: 2});
break
;
case
3:
$.zThreeLeftMenuLoad(
'treeDemo'
+ index, commonLeftMenuZtreeSetting, url,
null
);
Util_Common.openModel(url,
'metadate_count_charts'
, {type: 3});
Util_Common.openModel(url,
'query_metadate_conditions'
, {type: 3});
break
;
default
:
break
;
}
Util_Common.queryPage(1, 10, url,
'metadata_table_info_grids'
,
'query_metadate_conditions_form'
);
}
2.点双次取消(同时本组的”全部“高亮)， 单数次高亮，另外点击“全部”不会取消高亮
$(
function
() {
try
{
$(
'#conditionsTable'
).find(
'td[class="options"]'
).find(
'span'
).each(
function
(index, obj) {
$(
this
).click(
function
() {
//console.log($(this).parent().find("span:first"));
var
flag = $(
this
).parent().find(
"span:first"
).text() == $(
this
).text();
var
className = $(
this
).attr(
'class'
).indexOf(
'curr'
) != -1 && !flag ?
'ops'
:
'ops curr'
;
$(
this
).parent().find(
'span'
).attr(
'class'
,
'ops'
);
$(
this
).attr(
'class'
, className);
$(
this
).attr(
'class'
).indexOf(
'curr'
) == -1 && !flag ? $(
this
).parent().find(
"span:first"
).attr(
'class'
,
'ops curr'
) :
''
;
//组装参数查询
SourceCount.queryPage(1, 10);
});
});
}
catch
(e) {
console.log(e);
}
$(
'#conditionSearchBtn'
).click(
function
() {
var
tableChName = $(
'#conditionsTable [name="tableChName"]'
).val();
SourceCount.queryPage(1, 10,
null
, {tableChName: tableChName});
});
});
3.JS 文件
/**
* 2017-02-25 xiexf add
*/
var
SourceCount = {
queryPage : queryPage
}
function
queryPage(pageNum, pageSize, treeNode, extendParam) {
var
dataArray =
new
Array();
dataArray = getConditionParam(dataArray);
dataArray = getTreeParam(dataArray, treeNode);
//dataArray = Util_Common.formArrayUtil(dataArray, dataArray.length)[0];
if
(extendParam) {
dataArray = $.extend({}, dataArray, extendParam);
}
//console.log(dataArray);
Util_Common.queryPage(pageNum, pageSize, url,
'metadata_table_info_grids'
, dataArray);
}
/**
* 获取右侧的查询条件 组内互斥，组间&组合
*/
function
getConditionParam(dataArray) {
$(
'#conditionsTable'
).find(
'span[class="ops curr"]'
).each(
function
(index, obj) {
var
value = $(
this
).attr(
'value'
);
var
name = $(
this
).parent().parent().attr(
'name'
);
//保存了对应control里对应变量的属性名
if
(value) {
//var temp = {"name": name, "value": value};
var
temp =
new
Array();
temp[name] = value;
dataArray = $.extend({}, dataArray, temp);
//dataArray.push(temp);
}
});
return
dataArray;
}
/**
* 获取左侧树的查询条件 注意：JSON的key对应control里对应变量的属性名
*/
function
getTreeParam(dataArray, treeNode) {
try
{
var
tabIndex = $(
'#myTabContent'
).find(
'div[class="tab-pane fade active in"]'
).attr(
'tab_index'
);
var
temp;
var
nodeId;
if
(treeNode) {
nodeId = treeNode.id;
}
else
{
var
zTreeMenu = $.fn.zTree.getZTreeObj(
"treeDemo"
+ tabIndex);
var
nodes = zTreeMenu.getSelectedNodes(
true
);
if
(nodes.length > 0) {
nodeId = nodes[0].id;
}
}
//这里可以优化
switch
(parseInt(tabIndex)) {
case
1:
temp = {
"xxxId"
: nodeId};
break
;
case
2:
temp = {
"xxxId"
: nodeId};
break
;
case
3:
temp = {
"xxxId"
: nodeId};
break
;
default
:
break
;
}
if
(nodeId && nodeId != -1) {
dataArray = $.extend({}, dataArray, temp);
}
//dataArray.push(temp);
}
catch
(e) {
console.log(e);
}
return
dataArray;
}
/**
* 点击树组装查询条件 触发查询
*/
function
leftMenuTreeCilck(treeNode) {
try
{
//查询 右侧的五个统计图
var
dataArray =
new
Array();
dataArray = getTreeParam(dataArray, treeNode);
Util_Common.openModel(url,
'metadate_count_charts'
, dataArray);
dataArray = getConditionParam(dataArray);
//dataArray = dataArray.length > 1 ? Util_Common.formArrayUtil(dataArray, dataArray.length)[0] : dataArray;
//console.log(dataArray);
Util_Common.queryPage(1, 10, url,
'metadata_table_info_grids'
, dataArray);
}
catch
(e) {
console.log(e);
}
}
/**
* 遍历树 模糊查询结点 设置高亮 展开对应结点
*/
function
eachTreeNode() {
var
name = $(
'#myTabContent #treeNodeName'
).val();
var
tabIndex = $(
'#myTabContent'
).find(
'div[class="tab-pane fade active in"]'
).attr(
'tab_index'
);
var
zTreeMenu = $.fn.zTree.getZTreeObj(
"treeDemo"
+ tabIndex);
var
childNodes = zTreeMenu.transformToArray(zTreeMenu.getNodes());
var
pId;
var
selectedNode;
$.each(childNodes,
function
(index, node) {
if
(name && node.name.indexOf(name) != -1) {
pId = node.pId;
selectedNode = node;
}
});
if
(selectedNode) {
var
pNode = zTreeMenu.getNodeByParam(
"id"
, pId);
zTreeMenu.selectNode(selectedNode,
true
);
//指定选中ID的节点
zTreeMenu.expandNode(pNode,
true
,
false
);
//指定选中ID节点展开
}
}
/**
* 查看详情
*/
function
openDetailModal(id) {
Util_Common.openModel(url,
'tableMateDetailModal'
, {xxxId: id}, showWin,
'modal4TableMetaDetail'
);
}
/**
* 弹窗Util_Common.openModel的回调函数
*/
function
showWin(winId) {
$(
"#"
+ winId).modal({
show:
true
,
modalwidth: 800,
//设置弹窗的宽度
modalheight: 300,
//设置弹窗中间内容的宽度
modaltop: 50,
//设置弹窗头部的距离
});
}
/**
* 关闭弹窗
*/
function
cancelTableMateDetail(){
$(
'#modal4TableMetaDetail'
).modal(
'hide'
);
}
jQuery强大的选择器和方便易记的书写方式，配合SpringMVC的参数接收数据交互非常方便。另外：springMVC返回值(结构很灵活)jQuery也能够灵活处理。