筛选清单项目

Question

我有一个从SharePoint中提取的项目列表，想在我的自定义列表视图页面中对其进行过滤。

所以我的功能完全可以按照我想要的方式工作，但是看起来很杂乱，我希望有人可以指出或说明实现此目的的更好方法或我所做的“优化”版本。

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

在下面的代码示例中：

• incarr数组包含列表项。
• arri =从SharePoint列表收到的列表中的项目数

代码：

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>");
        };
    }                           
}

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

Answer 1

首先，我认为您可以将重复的代码拆分为单独的函数并重新使用

$("#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>");   
}