使用JavaScript实现三级联动和实时搜索

目录

• 1. 前言
• 2. 三级联动
  • 2.1. 根据交互操作异步触发获取第一列数据
  • 2.2. 点击第一列数据异步获取第二列数据
  • 2.3. 点击第二列数据异步获取第三列数据
• 3. 实时搜索

前言

　　本篇仅对三级联动和实时搜索的核心给出说明，对于页面设计、整个工程结构等不做说明。

三级联动

根据交互操作异步触发获取第一列数据

//异步请求第一列数据-可选指标名称
 $.ajax({
     type: "POST",
     async: true,
     url: "../xxxxxx",
     data : {"indexId":chiose_index_id,"dimensionId":chiose_dimension_id,timeDimId:$("#time_select_time").val()},
     dataType: "json"
 }).done(function (data) {
     datalevel1 = data.rows1;
     datalevel2 = data.rows2;
     datalevel3 = data.rows3;

     var treeObj = $.fn.zTree.getZTreeObj("treeDemoTime");
     var checkedNode = treeObj.getCheckedNodes(true);
     var nodes = treeObj.getNodes();

     //判断已选数据有值，有的话进行默认选中
     if(chiose_dimension_length>0) {
         //默认选中第一维度中的选项
         dimension_html(1, datalevel1, $('#time_trend_level1'), "time_trend_name", chiose_index_id);
         //默认选中第二维度中的选项
         dimension_html(2, datalevel2, $('#time_trend_level2'), "time_trend_name", chiose_dimension_index_array[1].index_id);
         //默认选中第三维度中的选项
         if(chiose_dimension_index_array[1].index_id == "1"){
             dimension_html(3, datalevel3, $('#time_trend_level3'), "time_trend_name", time_info.glt_id, "radio");
         } else {
             dimension_html(3, datalevel3, $('#time_trend_level3'), "time_trend_name", chiose_dimension_index_array[1].chiose.id, "checkbox");
         }


     }else{
         //没有默认数据的时候，直接回调第一维度选项（但没有选中的项）
         dimension_html(1,datalevel1,$('#time_trend_level1'),"time_trend_name",chiose_index_id);
         //同样调用level2 level3的渲染，但数据源传空
         dimension_html(2, datalevel2, $('#time_trend_level2'), "time_trend_name");
         dimension_html(3, {}, $('#time_trend_level3'), "time_trend_name");
     }

     // 省略其他各种业务逻辑... ...
 });

点击第一列数据异步获取第二列数据

//绑定第一维度的li点击事件
$("#time_trend_level1").on('click',"li",function(){
    //从第一维度的每个li上的data中取出绑定的数据
    var currentLevel1_id = $(this).data("time_trend_name").id;
    var currentLevel1_name = $(this).data("time_trend_name").name;
    var is_url_rel = $(this).data("time_trend_name").isUrlRel;

    //获取当前行<tr>标签上绑定的数据
    var currentTrElement = $("#time_line_index_tab table tr").eq(time_tab_index + 1);
    var currentDataObj = currentTrElement.data("indInformationAll");

    //已选指标的类型-单选/多选
    var chiose_index_type = currentDataObj && currentDataObj.chiose_index ? currentDataObj.chiose_index.type : "";

    var time_trend_chiose_tit_info_index = $("#time_trend_chiose_tit_info_index>dt");
    var time_trend_chiose_tit_info_index_dd = $("#time_trend_chiose_tit_info_index>dd");

    var time_trend_chiose_tit_info_dimension_dd = $("#time_trend_chiose_tit_info_dimension>dd");

    //选中项背景高亮
    $("#time_trend_level1>li").removeClass("active");
    $("#time_chiose_tit_info>dd").remove();
    $(this).addClass("active");

    //第一列指标名称一旦点击，就把第二列“可选维度”置空
    $("#time_trend_level2").html("");
    //根据新选择的指标名称，获取并渲染第二维度数据
    $.ajax({
        type : "POST",
        async : true,
        url : "../xxxxxx",
        data : {"Level1Id":currentLevel1_id},
        dataType : "json",
        success : function(data) {
            datalevel2 = data.rows2;
            dimension_html(2,datalevel2,$('#time_trend_level2'),"time_trend_name");
            var requriedDimId = [];
            for(var i = 0;i < datalevel2.length;i++) {
                var dim = datalevel2[i]['level' + (i+1)]['level1_name'];
                if (dim.is_required == 1){
                    requriedDimId.push(dim.id);
                }
            }
            $("#time_trend_chiose_tit_info_index>dd").eq(0).data("required_dim_id",requriedDimId);
        }
    });
});

点击第二列数据异步获取第三列数据

　　道理同上，不再重复。

---

实时搜索

　　实时搜索是一个和三级联动结合在一起的功能（当然也可以分开使用）。当每一列的数据选项有很多时，就可以提供一个搜索框，根据用户输入进行实时筛选（这个过程中是没有查询请求的，所有数据已经取回，渲染在列表中，只要监听相应事件进行筛选即可）

//可选指标搜索
    $("#time_trend_chiose_con_search_indexname_input").on("input", function (event) {
        //获取当前搜索框内容
        var searchVal = $("#time_trend_chiose_con_search_indexname_input").val().toLowerCase();
        
        //每次查询都先将所有子标签显示，在此基础上筛选
        $("#time_trend_level1 li").each(function () {
            $(this).removeClass("hide");
        });

        //如果子标签li中没有搜索字符串，则隐藏
        $("#time_trend_level1 li").each(function () {
            if($(this).html().toString().toLowerCase().indexOf(searchVal) == -1){
                $(this).addClass("hide");
            }
        })
    });