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

以下全是测试数据：

任务描述：

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也能够灵活处理。