Question

问题陈述：

我正在使用codeplex（Codeplex grid.mvc）提供的网格在我的应用程序中实现网格。所有操作都正常工作。最近我在网格中添加了复选框，用于选择多行来执行某些操作基于多选的操作。即使我能够对多项选择进行各种操作。

问题我面临的问题：

我无法保留用户选中的复选框状态从一页切换到另一页。
无法在标题部分添加全选复选框以选择全部网格中的复选框。

如何做到这一点？经过一些研究后我才知道网格中的复选框状态可以通过两种方式保留：

我们可以在客户端存储cookie，并在页面加载后保留它。
当用户更改复选框状态时，我们可以将其存储在服务器端可以进行ajax调用来更改复选框状态。保持状态服务器端，构建页面布局时。

任何人都可以详细说明这个.. ???或者任何人都可以建议我解决我的两个问题的方法???

Razor查看代码：

    @model IEnumerable<Web.Areas.Smart.Models.OrderModel>

    @using GridMvc.Html
    @{
        ViewBag.Title = "Index";
    }

    <h2>Details</h2>
    <hr />

    <div>
        @Html.Grid(Model).Columns(columns =>
        {

        columns.Add()
        .Encoded(false)
        .Sanitized(false)
        .SetWidth(30)
        .RenderValueAs(itm => @Html.CheckBox("checked", itm.InputModel.ChkStatus, new { @class = "check-item", ID= itm.InputModel.AssetID}));
        columns.Add(itm => itm.OrderNumber).Titled("Order #");
        columns.Add(itm  => itm.OrderDate).Format("{0:MM/dd/yyyy}").Titled("Order Date");
        columns.Add(itm => itm.InvoiceNumber).Titled("Invoice #");
        columns.Add(itm => itm.InvoiceDate).Format("{0:MM/dd/yyyy}").Titled("Invoice Date");
        columns.Add(itm => itm.ID).Titled("ID");           

        }).WithPaging(5).Sortable(true).Filterable(true)

        <br />
        <input type="button" class="btn btn-primary" value="Create" onclick="@("location.href='"
         + Url.Action("Index", "Plan")
         + "'")" />

    </div>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        <script type='text/javascript'>
            $(function () {
                $('.datepicker').datepicker({
                    format: "mm/dd/yyyy",
                }).on('changeDate', function (e) {
                    $(this).datepicker('hide');
                });
            })
            $(function () {
                $(".check-item").click(function () {
                    //alert("item clicked, id = " + $(this).attr("ID"));
                    var assetID = $(this).attr("ID")
                    var Url = "@Url.Content("~/Plan/GetCount")";
                    $.ajax({
                        url: Url,
                        dataType: 'json',
                        data: { ID: id},
                        success: function (data) {

                        }
                    });
                });
            });

        </script>
       }

您参考的图片：

enter image description here

Answer 1

为什么不保存客户端？其中selectedCheckbox是一个全局变量。

var selectedCheckbox = [];

$("input[type='checkbox']").click(function () {
    if($(this)[0].checked)
    {
        selectedCheckbox.push($(this).attr("id"));
    }
    else
    {
        selectedCheckbox = $.grep(selectedCheckbox , function (item) {
            return item != $(this).attr("id");
        });
    }
});

渲染表后：

$("input[type='checkbox']").each(function () {
    if($.inArray($(this).attr("id"), selectedCheckbox) > -1)
    {
        $(this).attr("checked","checked");
    }
});

Answer 2

尝试使用Localstorage

localStorage.setItem("Idofcheckbox",true)

localStorage.getItem("Idofcheckbox")

注意：Localstorage会将值存储为字符串。

Answer 3

以下解决方案有效：

网格MVC：在网格的开头添加一列

columns.Add()
                 .Titled("<input class='checkAll' type='checkbox' name='checkAll' value='.checkAll'/>")
                 .Encoded(false)
                 .Sanitized(false)
                 .SetWidth(20)
                 .RenderValueAs(item => @Html.CheckBox("checked", false, new { @class = "check-item", ID = item.Id}));

JavaScript：

$('.checkAll:checkbox').change(function () {
    if ($(this).prop("checked")) {
       $('input:checkbox').prop('checked', true);
      }
    else {
         $('input:checkbox').prop('checked', false);
        }
});

在MVC Razor中保持页面到页面的Grid MVC复选框状态

3 个答案: