以下全是测试数据:
任务描述:
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也能够灵活处理。