2017年2月27 周一 工作总结(Tab切换/多组条件查询--组内互斥)

本文介绍了一个基于SpringMVC、MyBatis和MySQL的前端数据交互系统的设计与实现细节,包括通过Tab进行数据切换、搜索功能实现、查询条件设置等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

以下全是测试数据:

任务描述:
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, truefalse);//指定选中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也能够灵活处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值