Question

我正在使用w3.js（https://www.w3schools.com/howto/howto_js_sort_table.asp）中的表格分类器另外，我使用setTimeout刷新每分钟页面以更新数据我想在刷新页面后保留排序结果我知道有一种方法是使用sessionStorage，但不知道如何使用它。
有人可以给我一些提示吗？

Answer 1

以下是SortTable中示例的更新摘要。我们使用浏览器cookie来恢复最后的排序信息，主要是排序列和方向。 W3school还有另一个例子，我从中获得了cookie处理（Cookies）。由于交叉来源政策，下面的代码段在网站上不起作用。当然，它还需要一些重构，但这是一个开始。

  public View getView(final int position,  View convertView, ViewGroup parent) {

    ViewHolder holder;
    if (convertView == null) {

        convertView = layoutInflater.inflate(R.layout.list_main, null);
        final View convertView1 = layoutInflater.inflate(R.layout.tab_fragment_1, null);

        final RelativeLayout calendartoshow = (RelativeLayout) row.findViewById(R.id.calendarlay);


        final RelativeLayout list_menu = (RelativeLayout) convertView.findViewById(R.id.list_menu);
        Button list_but = (Button) list_menu.findViewById(R.id.book_button);
        holder = new ViewHolder();

        //getView1();

        holder.icon = (ImageView)convertView.findViewById(R.id.image);
        holder.icon.setImageResource(listData[position]);
        holder.text = (TextView)convertView.findViewById(R.id.textv);
        final Button holder_but = (Button)convertView.findViewById(R.id.book_button);
        holder_but.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                calendartoshow.setVisibility(View.VISIBLE);
                System.out.println("ArrayLissst Of Values :");
                //new clickclass();
               // getView1(position,convertView1,parent);

            }
        });
        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
    }

    holder.text.setText(TEXTS[position]);


    return convertView;



}

编辑：另一个使用sessionStorage的代码段

<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th {
    cursor: pointer;
}

th, td {
    text-align: left;
    padding: 16px;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}
</style>
</head>
<body onload="checkCookie();">

<p><strong>Click the headers to sort the table.</strong></p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p>

<table id="myTable">
  <tr>
   <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->  
    <th onclick="sortTable(0)">Name</th>
    <th onclick="sortTable(1)">Country</th>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
</table>

<script>
function sortTable(n, dir) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  !dir && (dir = "asc"); 
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;      
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
  
  setCookie("sortBy", n, 30);
  setCookie("sortByDir", dir);
}


function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function checkCookie() {
    var sortBy=getCookie("sortBy");
    if (sortBy != "") {
        sortTable(parseInt(sortBy), getCookie("sortByDir"));
    }
}
</script>

</body>
</html>

页面刷新后保持表格排序结果？

1 个答案: