jquery - 如何（加载时）显示选中的行并在按钮单击时保存新的选中行

Question

我想要做的是：如您所见，有一个网格、滑块和按钮Approve，Edit Vat以及Edit Language. 问题是我想记住加载页面时选中的行并显示它们已选中，以及当我检查其他行并单击Approve以记住它时。

这是我的代码：

<div class="FormTitleHeading" id="FormTitleHeading" style="width: 100%; vertical-align: middle;">
    <table style="width: 100%">
        <tr>
            <td style="padding: 0">
                <h2 style="padding-left: 25px">
                    Billing Item
                </h2>
            </td>
            <td style="padding: 0">
            </td>
        </tr>
    </table>
</div>
<table>
    <tr>
        <td style="vertical-align: top; border: 0; padding: 0">
            <table id="MenuContainer" style="float: left; vertical-align: top;">
                <tr>
                    <td style="padding: 0; height: 32px; text-align: left;">
                        <div id="nNavigation">Navigation</div><div id="tNavigation" style="position: absolute; z-index: 9999; top: 108px; left: 160px"><input id="btnToogleMenu" type="button" value="..." title="Toogle Navigation" onclick="toogleMenu()" /></div>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 0"><div id="meni-levo" style="width: 184px; float: left; vertical-align: top;">
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td style="vertical-align: top; border: 0; padding: 0; width: 100%">
            <table width="100%">
                <tr>
                    <td width="60px" height="13%">
                        <div style="padding: 5px 5px 5px 25px">
                            <img id="slikica" src="" alt="timeframe img" /></div>
                    </td>
                    <td height="80px" width="62%">
                        <div>
                            <div style="padding: 5px 5px 5px 63px; font-size: 14px; font-family: Arial Black;">
                                <asp:Label ID="lblData" runat="server" Text="" CssClass="k-content" Font-Bold="true"></asp:Label>
                            </div>
                            <div class="Sliderot" style="padding: 0 0px 0px 0px;">
                                <input id="Slider" style="width: 100%" />
                            </div>
                            <div>
                                <asp:Label ID="lblUpdate" runat="server" CssClass="labelata" Text="" style="padding-left:30px"></asp:Label></div>
                        </div>
                    </td>
                    <td width="25%">
                        <div style="padding: 5px 0px 5px 0px;">
                            <div>
                                <img id="Img1" src="../../Images/smallHourglass.png" alt="timeframe img" /><asp:Label
                                    ID="Label1" runat="server" Text=" - Outdated price list" CssClass="past"></asp:Label></div>
                            <div id="today" onclick="CurrentDate()">
                                <img id="Img2" src="../../Images/timemachinesmall.png" alt="timeframe img" /><asp:Label
                                    ID="Label2" runat="server" Text=" - Today's price list" CssClass="present"></asp:Label></div>
                            <div>
                                <img id="Img3" src="../../Images/smalldclock.png" alt="timeframe img" /><asp:Label
                                    ID="Label3" runat="server" Text=" - Scheduled price list" CssClass="future"></asp:Label></div>
                        </div>
                    </td>
                </tr>
            </table>
            <div style="width:100%">
            <div style="visibility: hidden">
                <%: Html.Kendo().Menu()
                    .Name("Change")

                    .Items(items =>
                    {
                        items.Add().Text("Approve");
                        items.Add().Text("Edit Vat");//.HtmlAttributes(new { style = "width:130px"});
                        //items.Add().Text("Edit Price");//.HtmlAttributes(new { style = "width:130px"});
                        items.Add().Text("Edit Language");//.HtmlAttributes(new { style = "width:130px"});
                        //items.Add().Text("History");//.HtmlAttributes(new { style = "width:130px"});

                    })
                    .Events(e => e.Select("Edit"))
                %>
            </div>
            <div style="width:100%">
                <%--<div id="gridot" style="width: 100%">
                </div>--%>
            <table id="gridot">
            <thead>
        <tr style="width:100%">
            <th style="width:10px; font-size:small"><input type="checkbox" onclick="selectall(this)" /></th>
            <%--<th style="font-size:small; display:none">ID</th>--%>
            <th style="font-size:small;text-align:center">Name</th>
            <%--<th style="font-size:small; display:none">Module ID</th>--%>
            <th style="font-size:small;text-align:center">Module Name</th>
            <th style="font-size:small;text-align:center">Vat</th>
            <%--<th style="font-size:small; display:none">Unit Type ID</th>--%>
            <th style="font-size:small;text-align:center">Unit Type Name</th>
            <%--<th style="font-size:small; display:none">Active</th>--%>
            <th style="font-size:small;text-align:right">Valid From</th>
        </tr>
    </thead>
    <tbody>
        <tr style="width:100%">
            <td style="width:10px"><input type="checkbox"/></td>
            <%--<td style="display:none"></td>--%>
            <td></td>
            <%--<td style="display:none"></td>--%>
            <td></td>
            <td></td>
            <%--<td style="display:none"></td>--%>
            <td></td>
            <%--<td style="display:none"></td>--%>
            <td></td>
            <%--<td></td>
            <td></td>--%>
        </tr>
    </tbody>
</table>
</div>
</div>  
            <label id="hiddenLabel1" style="visibility: hidden">
            </label>
            <label id="hiddenLabel2" style="visibility: hidden">
            </label>
            <div id="NewLanguageWindow">
            </div>
            <div id="VatWindow">
            </div>
            <%--<div id="PriceWindow">
            </div>--%>
            <%--<div id="HistoryWindow">
            </div>--%>
        </td>
        <td style="vertical-align: top; border: 0; padding: 0"></td>
    </tr>
</table>
<%--<td style="display:none">${ ID }</td>
<td style="display:none">${ Module_ID }</td>
<td style="display:none">${ UnitType_ID }</td>
<td style="display:none">${ Active }</td>--%>
<script id="Odobri_Billing_template" type="text/x-kendo-tmpl">
            <tr id="row-${ Name }" style="width:100%">
                <td style="width:10px"><input type="checkbox"/></td>
                <td align="center">${ Name }</td>
                <td align="center">${ ModuleName }</td>
                <td align="center">${ Vat_ID }</td>
                <td align="center">${ UnitTypeName }</td>
                <td align="right">#=kendo.format("{0:yyyy-MM-dd}", ValidFrom)#</td>
            </tr>
            </script>

<script type="text/javascript">

    var indexes = new Array();
    var row = "";
    var selectedItem_ID = "";
    var selectedItem_Base = "";
    var selectedItem_Aditional = "";
    var selectedItem_ValidFrom = "";
    var selectedBillingItem_ID = "";
    var selectedBase;
    var selectedVat_ID;
    var UsersGrid = "";
    var RolesGrid = "";
    var gridUsersToBeAdded = "";
    var Module_ID = "";
    var Vat_ID = "";
    var value;
    var gridvalue;
    var minimum;
    var maximum;
    var datum;
    var today;
    var denes;
    var SelectedCell = "";

    $(document).ready(function () {
        window.location.hash = '#FormTitleHeading';
        $("#Change")[0].childNodes[1].style.visibility = "visible";
        $("#Change")[0].childNodes[0].style.visibility = "visible";
        $("#Change")[0].childNodes[0].title = "Edit Vat";
        $("#Change")[0].childNodes[1].title = "Edit Language";
        $("#Change")[0].childNodes[2].title = "Approve";
        $("#Change")[0].childNodes[2].style.visibility = "visible";
        today = new Date();
        denes = parseInt(Number(today) / 86400 / 1000 + 25567);
        value = denes;
        document.getElementById("MainContent_lblData").className = 'present';
        document.getElementById("slikica").src = '../../Images/timemachine.png';
        document.getElementById("MainContent_lblData").textContent = "Showing as of:  " + today.toLocaleDateString();
        document.getElementById("MainContent_lblUpdate").textContent = "";

        $.getJSON("http://" + servername + "/uBillingServices/Administration/Administration.svc/getVatIntervals", { UserName: userName, Workstation: workStation }, function (json) {
            $("#Slider").kendoSlider({
                increaseButtonTitle: "Next Day",
                decreaseButtonTitle: "Previous Day",
                change: SliderOnChange,
                showButtons: true,
                tickPlacement: "none",
                slide: SliderOnSlide,
                min: json[0].MinValidFrom,
                value: json[0].TodayDate,
                max: json[0].MaxValidFrom,
                tooltip: [{ enabled: true}],
                smallStep: 1,
                largeStep: 7
            }).data("kendoSlider");
            gridvalue = parseInt($("#Slider").getKendoSlider().element[0].value);
            datum = new Date((json[0].TodayDate - (25567)) * 86400 * 1000);
        });

        $("#gridot").kendoGrid({
            dataSource: {
                type: "application/jsonp",
                transport: {
                    read: {
                        url: "http://" + servername + "/uBillingServices/Administration/Administration.svc/getBillingItems",
                        dataType: "json",
                        data: {
                            ValidFrom: denes,
                            Language_ID: 'EN',
                            UserName: userName,
                            Workstation: workStation
                        }
                    }
                },
                batch: false,
                pageSize: 10,
                schema: {
                    model: {
                        fields: {
                            //ID: { type: "number", editable: false, validation: { required: true }, nullable: false },
                            Name: { type: "string", editable: true, validation: { required: true }, nullable: false },
                            //Module_ID: { type: "number", editable: true, validation: { required: true }, nullable: false },
                            ModuleName: { type: "string", editable: true, validation: { required: true }, nullable: false },
                            Vat_ID: { type: "string", editable: true, validation: { required: true }, nullable: false },
                            //UnitType_ID: { type: "number", editable: true, validation: { required: true }, nullable: false },
                            UnitTypeName: { type: "string", editable: true, validation: { required: true }, nullable: false },
                            //Active: { type: "number", editable: true, validation: { required: true }, nullable: false },
                            ValidFrom: { type: "date", editable: true, validation: { required: true} }
                        }
                    }
                }
            },
            change: function (arg) {

                var selectedr = this.select();
                selectedBillingItem_ID = this.dataItem(selectedr).ID;
                selectedItem_ID = this.dataItem(selectedr).Name;
                selectedModule_ID = this.dataItem(selectedr).Module_ID;
                selectedModuleName = this.dataItem(selectedr).ModuleName;
                selectedVat_ID = this.dataItem(selectedr).Vat_ID;
                selectedUnitType_ID = this.dataItem(selectedr).UnitType_ID;
                selectedUnitTypeName = this.dataItem(selectedr).UnitTypeName;
                selectedActive = this.dataItem(selectedr).Active;
                //var tempselectedValidFrom = this.dataItem(Selectedrow).ValidFrom;
                //selectedValidFrom = formatDate(tempselectedValidFrom);
            },
            dataBound: function (e) {
                e.sender.select(e.sender.tbody.find(">tr:first"));
            },
            rowTemplate: kendo.template($("#Odobri_Billing_template").html()),
            height: 380,
            scrollable: true,
            selectable: true,
            sortable: {
                mode: "single",
                allowUnsort: true
            },
            filterable: true,
            pageable: {
                numeric: true,
                pageSizes: true,
                previousNext: true
            },
            columns: [
                    { field: "" },
                    {field: "Name",
                    headerAttributes: {
                        style: "text-align:center"
                    },
                    attributes: { style: "text-align:left" }
                },
                    {field: "ModuleName",
                    headerAttributes: {
                        style: "text-align:center"
                    },
                    attributes: { style: "text-align:left" }
                },
                    { field: "Vat_ID",
                        headerAttributes: {
                            style: "text-align:center"
                        },
                        attributes: { style: "text-align:left" }
                    },
            //{ field: "UnitType_ID"},
                    {field: "UnitTypeName",
                    headerAttributes: {
                        style: "text-align:center"
                    },
                    attributes: { style: "text-align:right" }
                },
            //{ field: "Active" },
                    {
                    field: "ValidFrom",
                    title: "Valid From",
                    format: "{0:yyyy-MM-dd}",
                    headerAttributes: {
                        style: "text-align:right"
                    },
                    attributes: { style: "text-align:right" }
                }
                    ]
        });
    });

    function Edit(e) {
        if (e.item.textContent == "Edit Vat") {
            var winwon = $("#VatWindow").kendoWindow(
                      {
                          width: "300px",
                          height: "170px",
                          title: "Edit Vat",
                          content: "../../Administration/EditVat",
                          actions: ["Close"],
                          modal: true,
                          resizable: false,
                          visible: false

                      }).data("kendoWindow");

            //winwon.refresh();
            winwon.center();
            winwon.open();
            //$("#Vat")[0].innerHTML = selectedItem_ID;

        }

        else if (e.item.textContent == "Approve") {



        }

        else {
            var winw = $("#NewLanguageWindow").kendoWindow(
            {
                width: "440px",
                height: "250px",
                title: "Edit Language",
                content: "../../Administration/EditLanguage",
                actions: ["Close"],
                modal: true,
                resizable: false,
                visible: false

            }).data("kendoWindow");

            //winw.refresh();
            winw.center();
            winw.open();
        }
    }

    function Approve() {
    }

    function CurrentDate(e) {
        today = new Date();
        document.getElementById("MainContent_lblData").className = 'present';
        document.getElementById("slikica").src = '../../Images/timemachine.png';
        document.getElementById("MainContent_lblData").textContent = "Showing as of:  " + today.toLocaleDateString();
        denes = parseInt(Number(today) / 86400 / 1000 + 25567);
        $("#Slider").data("kendoSlider").value(denes);
        $("#gridot").getKendoGrid().dataSource.transport.options.read.data.ValidFrom = denes;
        $("#gridot").getKendoGrid().dataSource.read();
        window.location.hash = '#FormTitleHeading';
        document.getElementById("MainContent_lblUpdate").textContent = "";
    }

    function SliderOnChange(e) {
        var datumm = new Date((e.value - (25567)) * 86400 * 1000);
        //window.location.hash = '#FormTitleHeading';
        var today = new Date();
        if ((datumm.getFullYear() == today.getFullYear()) && (datumm.getMonth() == today.getMonth()) && (datumm.getDate() == today.getDate())) {
            document.getElementById("MainContent_lblData").className = 'present';
            document.getElementById("slikica").src = '../../Images/timemachine.png';
        }
        else if ((datumm.getFullYear() < today.getFullYear()) || (datumm.getMonth() < today.getMonth() && datumm.getFullYear() == today.getFullYear()) || (datumm.getMonth() == today.getMonth() && datumm.getDate() < today.getDate() && datumm.getFullYear() == today.getFullYear())) {
            document.getElementById("MainContent_lblData").className = 'past';
            document.getElementById("slikica").src = '../../Images/theHourglass.png';
        }
        else {
            document.getElementById("MainContent_lblData").className = 'future';
            document.getElementById("slikica").src = '../../Images/thedclock.png';
        }
        document.getElementById("MainContent_lblData").textContent = "Showing as of:  " + datumm.toLocaleDateString();
        gridvalue = e.value;
        $("#gridot").getKendoGrid().dataSource.transport.options.read.data.ValidFrom = e.value;
        window.location.hash = '#FormTitleHeading';
        $("#gridot").getKendoGrid().dataSource.read();
        document.getElementById("MainContent_lblUpdate").textContent = "";
    }

    function SliderOnSlide(e) {
        window.location.hash = '#FormTitleHeading';
        var datumm = new Date((e.value - (25567)) * 86400 * 1000);
        today = new Date();
        if ((datumm.getFullYear() == today.getFullYear()) && (datumm.getMonth() == today.getMonth()) && (datumm.getDate() == today.getDate())) {
            document.getElementById("MainContent_lblData").className = 'present';
            document.getElementById("slikica").src = '../../Images/timemachine.png';
        }
        else if ((datumm.getFullYear() < today.getFullYear()) || (datumm.getMonth() < today.getMonth() && datumm.getFullYear() == today.getFullYear()) || (datumm.getMonth() == today.getMonth() && datumm.getDate() < today.getDate() && datumm.getFullYear() == today.getFullYear())) {
            document.getElementById("MainContent_lblData").className = 'past';
            document.getElementById("slikica").src = '../../Images/theHourglass.png';
        }
        else {
            document.getElementById("MainContent_lblData").className = 'future';
            document.getElementById("slikica").src = '../../Images/thedclock.png';
        }
        document.getElementById("MainContent_lblData").textContent = "Showing as of:  " + datumm.toLocaleDateString();
        document.getElementById("MainContent_lblUpdate").textContent = "";
        window.location.hash = '#FormTitleHeading';
    }

    function selectall(e) {
        var grid = $("#gridot").data("kendoGrid");
        var checkbox = $(e);
        grid.table.find("tr").find("td:first input").attr("checked", checkbox.is(":checked"));
    }
    function formatDate(value) {
        var mesec = value.getMonth() + 1;
        return value.getFullYear() + "-" + mesec + "-" + value.getDate();
    }
</script>`

Answer 1

 $('#checkbox').change(function () {
                var c = this.checked;
                $('p').css('color', c);
            });

            var podatoci = "";

            var gridContent = $("#gridot").data("kendoGrid")._data;

            for (var i = 0; i < gridContent.length; i++) {
                podatoci = podatoci + gridContent[i].ID + "-" + gridContent[i].Active + ";";
            }
            //                var strLen = podatoci.length;
            //                podatoci = podatoci.slice(0, strLen - 1);

            if (podatoci != '') {
               jsonData = "Podatoci=" + podatoci + "&UserName=" + userName + "&Workstation=" + workStation;
                $.ajax({
                   type: 'GET',
                   crossDomain: true,
                    url: 'http://' + servername + '/uBillingServices/Administration/Administration.svc/SaveBillingItems',
                    dataType: 'jsonp',
                    contentType: "application/json",
                    async: false,
                    data: jsonData,
                    success: function (data) {
                        var data = [{}];
                        grdRoles.getKendoGrid().dataSource.data(data)
                        grdRoles.getKendoGrid().dataSource.read();
                    },
                    error: function (data) {


                        var data = [{}];
                        billingGrid.getKendoGrid().dataSource.data(data)
                        billingGrid.getKendoGrid().dataSource.read();
                    }
                });