Question

我有一个页面，用户使用MVC提交查询，用户可以使用复选框选择显示的列。在用户选择要查看的查询参数和列之后，然后将用户发送到显示个人名单的另一页面。复选框数据使用本地存储进行存储，并在名单页面上使用，其中还有用户可用于隐藏或显示列的复选框。我有一个工作版本，但代码看起来很糟糕，我认为有更好的方法来做更少的代码行。

以下是查询页面上使用的复选框：

<div id="grpChkBox">
  <input type="checkbox" class="columnSelect" name="fullName" /> Full Name
  <input type="checkbox" class="columnSelect" name="type" /> Type
  <input type="checkbox" class="columnSelect" name="ID" /> ID Number
</div>

以下是用于在本地存储中选择列和设置值的脚本：

<script type ="text/javascript">
//Default is that all columns are selected
    $("#grpChkBox input:checkbox").attr("checked", "checked");
    localStorage.setItem("fullName", 1);
    localStorage.setItem("type", 1);
    localStorage.setItem("ID", 1);

  $(function () {
      if (localStorage.getItem("fullName") !== null) {
          $("input[name='fullName']").attr("checked", "checked");
      }
  });
  $("input[name='fullName']").click(function () {
        if ($(this).is(":checked")) {localStorage.setItem("fullName", 1);}
        else {localStorage.removeItem("fullName");}
  });

  $(function () {
      if (localStorage.getItem("type") !== null) {$("input[name='type']").attr("checked", "checked");}
  });
  $("input[name='type']").click(function () {
      if ($(this).is(":checked")) { localStorage.setItem("type", 1); }
      else {localStorage.removeItem("type"); }
  });

  $(function () {
      if (localStorage.getItem("ID")== null) { $("input[name='ID']").attr("checked", "checked"); }
  });
  $("input[name='ID']").click(function () {
      if ($(this).is(":checked")) { localStorage.setItem("ID", 1); }
      else { localStorage.removeItem("ID"); }
  });

正如您所看到的，我正在为每个复选框和相应的列创建一个函数，并且应该有一种方法可以枚举列/复选框以使用较少的代码行来完成此操作。只是不确定如何。

这是下一页生成的名单的HTML：

<table class="MainContent" style="width: 100%;" id="rosterTable">
<tr>
  <th class="fullName" title="Full Name">Name</a></th>
  <th class="type" title="Type">Type</a></th>
  <th class="ID" title="ID Number">ID Number</a></th>
</tr>
<tr>
  <td>Name 1</td>
  <td>Type 1</td>
  <td>ID Number 1</td>
</tr>
<tr>
  <td>Name 2</td>
  <td>Type 2</td>
  <td>ID Number 2</td>
</tr>
</table>

它也有与上一页相同的复选框：

<div id="grpChkBox">
  <input type="checkbox" class="columnSelect" name="fullName" /> Full Name
  <input type="checkbox" class="columnSelect" name="type" /> Type
  <input type="checkbox" class="columnSelect" name="ID" /> ID Number
</div>

以下是读取本地存储的脚本，并在生成名单后隐藏/显示列：

<script type="text/javascript">
// Reads local storage and check or unchecks, hides/displays
$(document).ready(function () {
    if (localStorage.getItem("fullName") !== null) {
        $("input[name='fullName']").attr("checked", "checked");
    }
    else {
        var index = $("#rosterTable th").filter(".fullName").index();
        $("#rosterTable").find('tr :nth-child(' + (index + 1) + ')').hide();
    }

    if (localStorage.getItem("type") !== null) {
        $("input[name='type']").attr("checked", "checked");
    }
    else {
        var index = $("#rosterTable th").filter(".type").index();
        $("#rosterTable").find('tr :nth-child(' + (index + 1) + ')').hide();
    }

    if (localStorage.getItem("ID") !== null) { $("input[name='ID']").attr("checked", "checked"); }
    else {
        var index = $("#rosterTable th").filter(".ID").index();
        $("#rosterTable").find('tr :nth-child(' + (index + 1) + ')').hide();
    }

//After roster is generated users can hide display columns
$(function () {
    var $chk = $("#grpChkBox input:checkbox");
    var $tbl = $("#rosterTable");
    var $tblhead = $("#rosterTable th");

    //$chk.prop("checked", true);


    $chk.click(function () {
        var colToHide = $tblhead.filter("." + $(this).attr("name"));
        var index = $(colToHide).index();
        $tbl.find('tr :nth-child(' + (index + 1) + ')').toggle();
    });
});
</script>

再一次，这应该使用比使用每个列和复选框的情况更少的代码行来完成。我需要将此解决方案部署到具有不同列的多个页面，因此我希望使用更多动态代码来执行此操作。我非常确定这可以通过更少的代码行来完成。

感谢所有帮助

Answer 1

看起来我自己找到了解决方案。这是我做的：首先，我用sessionStorage替换了localStorage。我用以下内容替换了我明确设置每个sessionStorage对象的部分：

var selected = [];
  $('#grpChkBox input[type=checkbox]').each(function () {
      if ($(this).attr("checked")) {
          sessionStorage.setItem(($(this).attr('name')), 1);
      } else { sessionStorage.removeItem(($(this).attr('name'))); }
  });

我替换了所有函数来检查每个sessionStorage值并用以下内容填充每个复选框：

for (var i = 0, len = sessionStorage.length; i < len; i++) {
      var key = sessionStorage.key(i);
      var value = sessionStorage[key];
      //document.write(key + " => " + value + "\n");
      if (sessionStorage.getItem(key) !== null) {
          $("input[name='" + key + "']").attr("checked", "checked");
      } 
  }

我用以下内容替换了每个复选框的所有点击功能：

$('#grpChkBox input[type=checkbox]').click(function () {
      if ($(this.name).attr("checked")) {sessionStorage.setItem(this.name, 1); }
      else {sessionStorage.removeItem(this.name);}
  })

在创建名单的页面上，我替换了所有函数以检查每个sessionStorage值并用以下内容填充每个复选框：

for (var i = 0, len = sessionStorage.length; i < len; i++) {
            var key = sessionStorage.key(i);
            var value = sessionStorage[key];
            //document.write(key + " => " + value + "\n");
            if (sessionStorage.getItem(key) !== null) {
                $("input[name='" + key + "']").attr("checked", "checked");
            }

        }

我没有检查已选中的复选框，而是使用未经检查的值，因为sessionStorage将删除相应的键/值。我替换了许多函数来确定隐藏哪个列：

var selected = [];
        $('#grpChkBox input:checkbox:not(:checked)').each(function() {
            var index = $("#rosterTable th").filter("."+($(this).attr('name'))).index();
            $("#rosterTable").find('tr :nth-child(' + (index + 1) + ')').hide();
        });

就是这样。如果我可以基于表头名称动态创建复选框，那么唯一可以使这个更简单的过度部署的东西。

使用jQuery，复选框和本地存储隐藏/显示列

1 个答案: