GridView是ASP.NET Web Forms中最常用的控件之一,它可以快速簡單地展現一個數據列表。但是,如果需要在列表中進行一些特定的操作,如排序、篩選、分頁等,就需要使用一些復雜的代碼。這時,可以使用jQuery來幫助解決這些問題。
首先,需要引入jQuery代碼,可以通過以下方式:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
然后,可以通過以下代碼來對GridView進行一些常用的操作:
<script> $(document).ready(function () { // 對GridView進行排序 $('th').click(function () { var table = $(this).parents('table').eq(0); var rows = table.find('tr:gt(0)').toArray().sort(compare($(this).index())); this.asc = !this.asc; if (!this.asc) { rows = rows.reverse(); } for (var i = 0; i < rows.length; i++) { table.append(rows[i]); } }); // 對GridView進行篩選 $('select').change(function () { var table = $(this).parents('table').eq(0); var rows = table.find('tr').not(':first'); rows.each(function (index) { var cells = $(this).find('td'); if (cells.length > 0) { var value = cells.eq($(this).parents('table').find('th').index($('select').parent())).text().toLowerCase(); if (value.indexOf($('select option:selected').text().toLowerCase()) < 0) { $(this).hide(); } else { $(this).show(); } } }); }); }); // 排序函數 function compare(index) { return function (a, b) { var valA = getCellValue(a, index); var valB = getCellValue(b, index); return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB); } } // 獲取單元格值 function getCellValue(row, index) { return $(row).children('td').eq(index).text(); } </script>
以上代碼實現了GridView的排序和篩選功能。在頁面中添加相應的HTML代碼即可:
<table> <tr> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>張三</td> <td>20</td> </tr> <tr> <td>李四</td> <td>22</td> </tr> <tr> <td>王五</td> <td>25</td> </tr> <tr> <td>趙六</td> <td>30</td> </tr> </table> <select> <option value="0">不限</option> <option value="1">20</option> <option value="2">22</option> <option value="3">25</option> <option value="4">30</option> </select>
以上代碼實現了一個簡單的GridView列表,并且通過jQuery實現了其中的排序和篩選功能。