时间戳

首页 > 解决方案 > 过滤列表项

javascript - 过滤列表项

问题描述

我有一个从 SharePoint 中提取的项目列表，并希望在我的自定义列表视图页面中过滤它们。

所以我的功能完全按照我想要的方式工作，但它看起来很乱，我希望有人能指出或解释实现这一目标的更好方法或我所做的“优化”版本。

我正在使用带有 if 的 for 循环来比较值并仅在 true 时显示。我有多个过滤器，这对我来说变得很棘手。

在下面的代码示例中：

代码：

function displaytable() {                               
    document.getElementById("myHTMLTable").innerHTML = "";
    $("#myHTMLTable").append("<tr align='middle'>" +
  "<th align='left'>"+"<b>Systems Affected</b>"+"</th>" +
  "<th width= 5% align='left'>"+"<b>Incident Date</b>"+"</th>" +                   
    "<th align='left'>"+"<b>Incident Number</b>"+"</th>" +
  "<th align='left'>"+"<b>Root Cause</b>"+"</th>" +
    "<th align='left'>"+"<b>Description</b>"+"</th>" + 
    "<th width= 6% align='left'>"+"<b>Attachments</b>"+"</th>" +                                         
  "</tr>");                 
    var filtery = document.getElementById("dropdownyear").value;
    var filterm = document.getElementById("dropdownmonth").value.toUpperCase();
    var filters = document.getElementById("dropdownsystem").value.toUpperCase();
    var filtersev = document.getElementById("dropdownseverity").value.toUpperCase();                
    for (i=0;i<arri;i++){
        //manual if statements until I can figure our a more effective way                                  
        if (incarr[i][6] == filtery && incarr[i][5] == filterm && incarr[i][0].toUpperCase() == filters && filtersev == incarr[i][7].toUpperCase()){                                                
            $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +  //full filter
        "<td align='left'>"+incarr[i][3]+"</td>" +
        "<td align='left'>"+incarr[i][4]+"</td>" + 
            "<td align='left'>"+incarr[i][8]+"</td>" +
            "</tr>");                       
        } else if (incarr[i][6] == filtery && incarr[i][5] == filterm && filters == "SYSTEM" && filtersev == incarr[i][7].toUpperCase() ) {
                $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +
        "<td align='left'>"+incarr[i][3]+"</td>" +  //system filter all
        "<td align='left'>"+incarr[i][4]+"</td>" +
                "<td align='left'>"+incarr[i][8]+"</td>" +                                                                    
        "</tr>");
        } else if (incarr[i][6] == filtery && filterm == "MONTH" && incarr[i][0].toUpperCase() == filters && filtersev == incarr[i][7].toUpperCase() ){
                $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +
        "<td align='left'>"+incarr[i][3]+"</td>" +  //Month filter all
        "<td align='left'>"+incarr[i][4]+"</td>" +
                "<td align='left'>"+incarr[i][8]+"</td>" +                                           
        "</tr>");
        } else if (incarr[i][6] == filtery && filterm == "MONTH" && filters == "SYSTEM" && filtersev ==  incarr[i][7].toUpperCase() ){
                $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +
        "<td align='left'>"+incarr[i][3]+"</td>" +  //Month & System filter all
        "<td align='left'>"+incarr[i][4]+"</td>" +
                "<td align='left'>"+incarr[i][8]+"</td>" +                                          
        "</tr>");
        } else if (filtery == "YEAR" && filterm == "MONTH" && incarr[i][0].toUpperCase() == filters && filtersev == incarr[i][7].toUpperCase() ){
                $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +
        "<td align='left'>"+incarr[i][3]+"</td>" +  //Year & Month filter all
        "<td align='left'>"+incarr[i][4]+"</td>" +
                "<td align='left'>"+incarr[i][8]+"</td>" +                                           
                "</tr>");
        } else if (incarr[i][6] == filtery && incarr[i][5] == filterm && filters == "SYSTEM" && filtersev == "SEVERITY" ) {
                $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +
        "<td align='left'>"+incarr[i][3]+"</td>" +  //system, severity filter all
        "<td align='left'>"+incarr[i][4]+"</td>" +
                "<td align='left'>"+incarr[i][8]+"</td>" +                                           
        "</tr>");
        } else if (incarr[i][6] == filtery && filterm == "MONTH" && incarr[i][0].toUpperCase() == filters && filtersev == "SEVERITY" ){
                $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +
        "<td align='left'>"+incarr[i][3]+"</td>" +  //Month, severity filter all
        "<td align='left'>"+incarr[i][4]+"</td>" +
                "<td align='left'>"+incarr[i][8]+"</td>" +                                            
        "</tr>");
        } else if (incarr[i][6] == filtery && filterm == "MONTH" && filters == "SYSTEM" && filtersev == "SEVERITY" ){
                $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +
        "<td align='left'>"+incarr[i][3]+"</td>" +  //Month & System & Severity filter all
        "<td align='left'>"+incarr[i][4]+"</td>" +
                "<td align='left'>"+incarr[i][8]+"</td>" +                                            
        "</tr>");
        } else if (filtery == incarr[i][6] &&  filterm == incarr[i][5] && incarr[i][0].toUpperCase() == filters && filtersev == "SEVERITY"){                                                                    
                $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +  //Severity filter all
        "<td align='left'>"+incarr[i][3]+"</td>" +
        "<td align='left'>"+incarr[i][4]+"</td>" +
                "<td align='left'>"+incarr[i][8]+"</td>" +                                           
                "</tr>");
        };
    }                           
}

选择过滤器时，它必须只显示与该列匹配的项目，并且我必须能够选择多个过滤器来过滤过滤后的列表（如果这有意义？）

标签： javascriptarraysfor-loop

解决方案

首先，我认为您可以将此重复的代码拆分为单独的功能并重用它

$("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +  //full filter
        "<td align='left'>"+incarr[i][3]+"</td>" +
        "<td align='left'>"+incarr[i][4]+"</td>" + 
            "<td align='left'>"+incarr[i][8]+"</td>" +
            "</tr>");

例子：

function appendTableRow(incarr) {
   $("#myHTMLTable").append("<tr align='middle'>" +
        "<td align='left'>"+incarr[i][0]+"</td>" +
        "<td align='left'>"+incarr[i][1]+"</td>" +
        "<td align='left'>"+incarr[i][2]+"</td>" +  //full filter
        "<td align='left'>"+incarr[i][3]+"</td>" +
        "<td align='left'>"+incarr[i][4]+"</td>" + 
            "<td align='left'>"+incarr[i][8]+"</td>" +
            "</tr>");   
}

推荐阅读