1. 首頁
  2. 問答
  3. 篩選行並在屏幕上只顯示選定的行

篩選行並在屏幕上只顯示選定的行

2016-10-01 263 views
0

我已經使用csv文件在屏幕上填充了表。我需要使用以逗號分隔的ID值（例如1,2,8,34）過濾此表格，並且只需點擊按鈕「過濾器」即可顯示這些值中使用的行。篩選行並在屏幕上只顯示選定的行

HTML文件 -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hello there</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script> 
    <!--<script type="text/javascript" src="JavaScript.js"></script>--> 
    <script type="text/javascript" src="JavaScript2.js"></script> 


    <style> 
     table, th, td { 
      border: 1px solid black; 
      border-collapse: collapse; 
     } 

     th, td { 
      padding: 15px; 
     } 

     th { 
      text-align: left; 
     } 

     table { 
      border-spacing: 5px; 
     } 

     .guide { 
      text-decoration: underline; 
      text-align: center; 
     } 

     .odd { 
      color: #fff; 
      background: #666; 
     } 

     .even { 
      color: #666; 
     } 

     .hot { 
      border: 1px solid #f00; 
     } 
    </style> 

</head> 
<body> 

    <div class="container"> 
     <div class="row"> 
      <h2>aaaaaaaaaaaaaaaaa</h2>    
     </div> 
     <div class="panel panel-primary"> 
      <div class="panel-heading">pppppp</div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-sm-12 col-sm-offset-1"> 

         <form id="form1" runat="server" class="form-horizontal"> 
          <div class="form-group"> 
           <div class="col-sm-5"> 
            <div class="col-sm-6"> 
             <input type="file" accept=".csv" id="fileUpload" /></div> 
            <div class="col-sm-6"> 
             <input type="button" id="upload" class="btn btn-primary" value="Upload" /></div> 

           </div> 
           <div class="col-sm-7"> 
            <div class="col-sm-2"> 
             <input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility: hidden" /></div> 
            <div class="col-sm-2"> 
             <input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility: hidden" /></div> 
           </div> 
          </div> 
         </form> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-sm-12"> 
         <div class="panel panel-default" style="align-self: center"> 
          <div class="panel-body" style="max-height: 400px; min-height: 400px; overflow-y: scroll;"> 
           <div class="row"> 
            <div class="col-sm-12"> 
             <center> 
                 <div class="input-append" id="filterDev" style="visibility:hidden"> 
                  <input name="search" id="inputFilter" placeholder="Enter ID to filter" /> 
                  <input type="button" value="Filter" id="filter" class="btn btn-primary" /> 
                   </div></center> 
            </div> 
            <br /> 
            <br /> 

           </div> 
           <div class="row"> 
            <div class="col-sm-12" id="dvCSV"></div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-sm-12"><p id="download" style="color:cornflowerblue; visibility:hidden"><strong>Please click the below links to download the processed file..</strong></p></div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <div class="col-sm-3"><p id="File1" style="color:cornflowerblue;text-decoration:underline;visibility:hidden">File1 Download</p></div> 
         <div class="col-sm-3"><p id="File2" style="color:cornflowerblue;text-decoration:underline;visibility:hidden">File2 Download</p></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 


</body> 
</html> 
<script type="text/javascript"> 

$("#cancel").on("click", function() { 
    $('input:checked').each(function() { 
     $(this).closest("tr").remove(); 
    }); 
}); 

$('#inputFilter').keyup(function() { 
    var that = this; 
    $.each($('tr'), 
    function (i, val) { 
     if ($(val).text().indexOf($(that).val()) == -1) { 
      $('#name').animate({ 
       marginTop: 0 
      }, 
      50, 
      function() { 
       $('tr').eq(i).hide(); 
      }); 
     } else { 
      $('#name').animate({ 
       marginTop: 0 
      }, 
      50, 
      function() { 
       $('tr').eq(i).show(); 
      }); 
     } 
    }); 
}); 

$(function() { 
    $("#process").bind("click", function() { 

     document.getElementById("File1").style.visibility = "visible"; 
     document.getElementById("File2").style.visibility = "visible"; 
     document.getElementById("download").style.visibility = "visible"; 

    }); 

}); 

</script>

JavaScript2.js

$(function() { 
    $("#upload").bind("click", function() { 

     var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; 
     if (regex.test($("#fileUpload").val().toLowerCase())) { 
      if (typeof (FileReader) != "undefined") { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        var table = $("<table id='name'/>"); 
        var rows = e.target.result.split("\n"); 
        for (var i = 0; i < rows.length; i++) { 
         var row = $("<tr />"); 
         var cells = rows[i].split(","); 

         $("<td/>").html('<input type="checkbox" id='+cells[0]+'>').appendTo(row); 
         //alert(cells[0]); 
         for (var j = 0; j < cells.length; j++) { 

          $("<td/>").html('<input type="text" disabled value=' +cells[j]+ '>').appendTo(row); 
         } 
         table.append(row); 
        } 
        $("#dvCSV").html(''); 
        $("#dvCSV").append(table); 
        document.getElementById("cancel").style.visibility = "visible"; 
        document.getElementById("process").style.visibility = "visible"; 
        document.getElementById("filterDev").style.visibility = "visible"; 
        //document.getElementById("filter").style.visibility = "visible"; 

       } 
       reader.readAsText($("#fileUpload")[0].files[0]); 
      } else { 
       alert("This browser does not support HTML5."); 
      } 
     } else { 
      alert("Please upload a valid CSV file."); 
     } 

    }); 
});

事情是這樣的 -

ExamplePicture

EDIT＃1

使用@ user3273700腳本後，雖然過濾器功能正常，但每當我的表的最後一列顯示'未定義'。 CSV文件看起來是這樣的 -

CSV file uploaded

而且表看起來是這樣的 -

Table

修改HTML -

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html> 
<html> 
<head> 
    <title>J---</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script> 
    <!--<script type="text/javascript" src="JavaScript.js"></script>--> 
    <script type="text/javascript" src="JavaScript4.js"></script> 


    <style> 
     table, th, td { 
      border: 1px solid black; 
      border-collapse: collapse; 
     } 

     th, td { 
      padding: 15px; 
     } 

     th { 
      text-align: left; 
     } 

     table { 
      border-spacing: 5px; 
     } 

     .guide { 
      text-decoration: underline; 
      text-align: center; 
     } 

     .odd { 
      color: #fff; 
      background: #666; 
     } 

     .even { 
      color: #666; 
     } 

     .hot { 
      border: 1px solid #f00; 
     } 
    </style> 

</head> 
<body> 

    <div class="container"> 
     <div class="row"> 
      <h2>SAS</h2> 
     </div> 
     <div class="panel panel-primary"> 
      <div class="panel-heading">Aa</div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-sm-12 col-sm-offset-1"> 

         <form id="form1" runat="server" class="form-horizontal"> 
          <div class="form-group"> 
           <div class="col-sm-5"> 
            <div class="col-sm-6"> 
             <input type="file" accept=".csv" id="fileUpload" /> 
            </div> 
            <div class="col-sm-6"> 
             <input type="button" id="upload" class="btn btn-primary" value="Upload" /> 
            </div> 

           </div> 
           <div class="col-sm-7"> 
            <div class="col-sm-2"> 
             <input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility: hidden" /> 
            </div> 
            <div class="col-sm-2"> 
             <input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility: hidden" /> 
            </div> 
           </div> 
          </div> 
         </form> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-sm-12"> 
         <div class="panel panel-default" style="align-self: center"> 
          <div class="panel-body" style="max-height: 400px; min-height: 400px; overflow-y: scroll;"> 
           <div class="row"> 
            <div class="col-sm-12"> 
             <center> 
                 <div class="input-append" id="filterDev" style="visibility:hidden"> 
                  <input name="search" id="inputFilter" placeholder="Enter ID to filter" /> 
                  <input type="button" value="Filter" id="filter" class="btn btn-primary" /> 
                   </div></center> 
            </div> 
            <br /> 
            <br /> 

           </div> 
           <div class="row"> 
            <div class="col-sm-12" id="dvCSV"> 
             <table id="my-table"> 

             </table> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-sm-12"> 
         <p id="download" style="color: cornflowerblue; visibility: hidden"><strong>Please click the below links to download the processed file..</strong></p> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <div class="col-sm-3"> 
          <p id="File1" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File1 Download</p> 
         </div> 
         <div class="col-sm-3"> 
          <p id="File2" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File2 Download</p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 


</body> 
</html> 
<script type="text/javascript"> 

    $("#cancel").on("click", function() { 
     $('input:checked').each(function() { 
      $(this).closest("tr").remove(); 
     }); 
    }); 


    $(function() { 
     $("#process").bind("click", function() { 

      document.getElementById("File1").style.visibility = "visible"; 
      document.getElementById("File2").style.visibility = "visible"; 
      document.getElementById("download").style.visibility = "visible"; 

     }); 

    }); 

    $("#filter").click(function() { 
     ids = $("#inputFilter").val(); 
     if (ids != "") { 
      idsArray = ids.split(","); 
      $("#my-table tr:gt(0)").hide(); 
      $.each(idsArray, function (i, v) { 
       $("#my-table tr[data-id=" + v + "]").show(); 
      }) 
     } else { 
      $("#my-table tr").show(); 
     } 
    }); 

</script>

修改JavaScript4.js -

$(function() { 
    $("#upload").bind("click", function() { 

     var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; 
     if (regex.test($("#fileUpload").val().toLowerCase())) { 
      if (typeof (FileReader) != "undefined") { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        //var table = $("<table id='name'/>"); 
        var lines = e.target.result.split("\n"); 
        var result = []; 
        var headers = lines[0].split(","); 
        //alert(headers); 

        for (var i = 1; i < lines.length; i++) { 
         var obj = {}; 
         var currentline = lines[i].split(","); 

         for (var j = 0; j < headers.length; j++) { 
          obj[headers[j]] = currentline[j]; 
         } 
         result.push(obj); 
        } 


        populateTable(result); 
        document.getElementById("cancel").style.visibility = "visible"; 
        document.getElementById("process").style.visibility = "visible"; 
        document.getElementById("filterDev").style.visibility = "visible"; 
       } 
       reader.readAsText($("#fileUpload")[0].files[0]); 
      } 
     } 

    }); 
}); 

$(function() { 
    $("#process").bind("click", function() { 

     document.getElementById("File1").style.visibility = "visible"; 
     document.getElementById("File2").style.visibility = "visible"; 

    }); 

}); 

function populateTable(finalObject) { 

    var obj = finalObject; 
    var table = $("<table id='my-table' />"); 
    table[0].border = "1"; 
    var columns = Object.keys(obj[0]); 

    var columnCount = columns.length; 
    var row = $(table[0].insertRow(-1)); 

    for (var i = 0; i < columnCount; i++) { 
     var headerCell = $("<th />"); 
     headerCell.html([columns[i]]); 
     row.append(headerCell); 
    } 

    $.each(obj, function (i, obj) { 
     row = '<tr data-id="' + obj.ID + '"><td>' + obj.ID + '</td><td>' + obj.NAME + '</td><td>' + obj.CITY + '</td><td>' + obj.ADDRESS + '</td></tr>'; 
     table.append(row); 
    }); 


    var dvTable = $("#dvCSV"); 
    dvTable.html(""); 
    dvTable.append(table); 

}

來源

2016-10-01 harryOsborn

+0

所以呢？ ............ – Viney

+0

你可以使用jQuery數據api添加一個自定義屬性，然後使用這個引用來過濾你的表格行 –

回答

0

將行附加到表中然後使用此引用過濾表時，可以向每行添加自定義屬性（data-id）。

試試這個工作示例

$(function() { 
 
    var data = [{ 
 
    id: "1", 
 
    name: "Ravi", 
 
    city: "Mumbai", 
 
    address: "Address1", 
 
    designation: "programer" 
 
    }, { 
 
    id: "2", 
 
    name: "Mohit", 
 
    city: "Delhi", 
 
    address: "Address1", 
 
    designation: "Project Manager" 
 
    }, { 
 
    id: "3", 
 
    name: "Mohan", 
 
    city: "Mumbai", 
 
    address: "Address1", 
 
    designation: "CEO" 
 
    }, { 
 
    id: "4", 
 
    name: "John", 
 
    city: "Landon", 
 
    address: "Address1", 
 
    designation: "programer" 
 
    }, { 
 
    id: "5", 
 
    name: "Jane", 
 
    city: "Landon", 
 
    address: "Address1", 
 
    designation: "programer" 
 
    }]; 
 

 

 
    //set table header 
 
    var headRow = '<tr>'; 
 
    $.each(data[0], function(attr, val) { 
 
    headRow += '<th>' + attr + '</th>' 
 
    }); 
 
    headRow += '</tr>'; 
 
    $("#my-table").append(headRow); 
 

 
    //add data rows to table 
 

 
    $.each(data, function(i, obj) { 
 
    row = '<tr data-id="' + obj.id + '"><td>' + obj.id + '</td><td>' + obj.name + '</td><td>' + obj.city + '</td><td>' + obj.address + '</td><td>' + obj.designation + '</td></tr>'; 
 
    $("#my-table").append(row); 
 
    }); 
 

 
    $("#filter-btn").click(function() { 
 
    ids = $("#filter-box").val(); 
 
    if (ids != "") { 
 
     idsArray = ids.split(","); 
 
     $("#my-table tr:gt(0)").hide(); 
 
     $.each(idsArray, function(i, v) { 
 
     $("#my-table tr[data-id=" + v + "]").show(); 
 
     }) 
 
    } else { 
 
     $("#my-table tr").show(); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="filter-box"> 
 
<button id="filter-btn">filter</button> 
 
<table id="my-table"> 
 

 
</table>

我希望這將有助於

來源

2016-10-01 07:48:30

+0

我使用了腳本和過濾功能，但是我的表格的最後一列沒有人口稠密。請檢查＃Edit1部分 – harryOsborn

0

因爲上面寫的標題行的最後一欄爲「地址\ R」你越來越爲未定義（與回車）而不是「ADDRESS」。當你使用它來創建你的對象數組時，它會設置一個屬性「ADDRESS \ r」而不是「ADDRESS」。

所以你需要像這樣從你的標題數組中刪除它。

var headers = lines[0].split(",").map(function(obj){ 
    return obj.replace(/(?:\\[rn]|[\r\n]+)+/g,''); 
});

這裏是工作提琴https://jsfiddle.net/1av8gzo5/

來源

2016-10-04 11:14:23

相關問題

 相關問題