如何从页面后面的 VB.NET 代码中获取 jqGrid 中 ID 列的值？

Question

我的 .ascx 页面有两个 jqGrid

$(document).ready(function () {
    var searchText = "";

    $("#cclist").jqGrid({

        //url: ResolveUrl() + '/CC_DoctorList',
        datatype: 'local',
        // postData: { "CaseNo": CaseNo },
        mtype: 'POST',
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        serializeGridData: function (jsondata) { return JSON.stringify(jsondata); },
        jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
        colNames: ['Remove', 'DoctorID', 'Last Name', 'First Name', 'Address'],
        colModel: [
            { name: 'RemoveAction', width: 80, fixed: true, sortable: false, resize: false, align: "center" },
            { name: 'ID', index: 'ID', width: 50, sortable: false, hidden: false },
            { name: 'LastName', index: 'LastName', width: 100, hidden: false, sortable: false },
            { name: 'FirstName', index: 'FirstName', width: 100, hidden: false, sortable: false },
            { name: 'Address', width: 420, hidden: false, sortable: false,
                jsonmap: function (obj) {
                    var street = obj.Address.Address1
                    var city = obj.Address.City
                    var state = obj.Address.StateProvince
                    var zip = obj.Address.PostalCode

                    if (street != '') { street = street + ', ' }
                    if (city != '') { city = city + ', ' }
                    if (state != '') { state = state + ', ' }

                    var Address = street + city + state + zip
                    return Address
                }
            }
        ],
        gridComplete: function () { addDeleteIcon(); },
        pager: '#ccpager',
        rowNum: 100,
        rowList: [100, 200],
        sortname: 'LastName',
        sortorder: 'desc',
        viewrecords: true,
        gridview: true,
        height: "100%",
        caption: 'Send Copy of Report To:',
        multiselect: false,
        shrinkToFit: false,
        loadui: "disabled"
    })//.jqGrid('navGrid', '#ccpager', { edit: false, add: true, del: false, search: true });

    $("#list").jqGrid({
        url: ResolveUrl() + '/DoctorList',
        datatype: 'local',
        postData: { "searchText": searchText },
        mtype: 'POST',
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        serializeGridData: function (jsondata) { return JSON.stringify(jsondata); },
        jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
        colNames: ['Add', 'DoctorID', 'Last Name', 'First Name', 'Address'],
        colModel: [
    { name: 'AddAction', width: 80, fixed: true, sortable: false, resize: false, align: "center" },
    { name: 'ID', index: 'ID', width: 50, sortable: false, hidden: false },
    { name: 'LastName', index: 'LastName', width: 100, hidden: false, frozen: true, sortable: false },
    { name: 'FirstName', index: 'FirstName', width: 100, hidden: false, frozen: true, sortable: false },

    { name: 'Address', width: 420, hidden: false, sortable: false,
        jsonmap: function (obj) {
            var street = obj.Address.Address1
            var city = obj.Address.City
            var state = obj.Address.StateProvince
            var zip = obj.Address.PostalCode

            if (street != '') { street = street + ', ' }
            if (city != '') { city = city + ', ' }
            if (state != '') { state = state + ', ' }

            var Address = street + city + state + zip
            return Address
        }
    }],
        gridComplete: function () {
            var ids = jQuery("#list").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                var rd = $("#list").getRowData(cl);
                var imageid = 'addImg_' + rd['ID']
                be = "<div><image style='height:22px;width:20px;'  alt='' src='" + ResolveUrl('//img/icons/add_black.png') + "'></image></div>"//"<input type='button' value='Remove' onclick=\"jQuery('#rowed2').editRow('" + cl + "');\"  />";

                jQuery("#list").jqGrid('setRowData', ids[i], { AddAction: be });
            }
        },
        pager: '#pager',
        rowNum: 5,
        rowList: [5, 10, 15, 20],
        sortname: 'LastName',
        sortorder: 'desc',
        viewrecords: true,
        gridview: true,
        caption: 'Search Result',
        multiselect: false,
        height: "100%",
        shrinkToFit: false
    })

    jQuery("#list").click(function (e) {
        var el = e.target;
        if (el.nodeName !== "TD") {
            el = $(el, this.rows).closest("td");
        }
        var iCol = $(el).index();
        var row = $(el, this.rows).closest("tr.jqgrow");
        var rowId = row[0].id;
        var noMatch = 0;

        if (iCol == 0) {
            var rd = $("#list").getRowData(rowId);
            var DoctorID = rd['ID'];
            //check if the doc already exists in the cc doc list
            var ids = jQuery("#cclist").jqGrid('getDataIDs');

            if (ids.length == 0) {
                ids.length = ids.length + 1;
            }
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                var ccrd = $("#cclist").getRowData(cl);

                var newrowid = ids.length + 1;

                var ccDoctorID = ccrd['ID'];


                if (DoctorID != ccDoctorID) {
                    noMatch = noMatch + 1;
                    if (noMatch == ids.length) {
                        var deleteImageIcon = "<div><image style='height:22px;width:20px;'  alt='' src='" + ResolveUrl('//img/icons/trashbin.png') + "'></image></div>"; // onclick=\"jQuery('#cclist').delRowData('" + rowId + "');\"

                        jQuery("#cclist").jqGrid('addRowData', newrowid, { RemoveAction: deleteImageIcon, ID: rd['ID'], LastName: rd['LastName'], FirstName: rd['FirstName'], Number: rd['Number'], Address: rd['Address'] });

                        // alert(ids);
                        // var hdnids = document.getElementById('hdnDocIDs').value;

                        // hdnids.value = rd['ID'];
                        //var hdnids = jQuery("#<%=hdnDocIds.ClientID %>").val();
                        //alert(hdnids);
                        //hdnids = rd['ID'];
                        //alert('hdnvalue :' + hdnids);
                        //$("#<%=hdnlbldocs.ClientID%>").val(rd['ID'].toString() + ',' + $("#<%=hdnlbldocs.ClientID%>").val())
                        //$("#<%=hdnlbldocs.ClientID%>").val(rd['ID']);
                        //alert($("#<%=hdnlbldocs.ClientID%>").val());
                        //alert($("#<%=hdnlbldocs.ClientID%>").val(rd['ID'] + ','));
                        //alert($("#<%=hdnlbldocs.ClientID%>").val());
                        //jQuery("#<%=hdnDocIDs.ClientID %>").val(rd['ID']);

                        //The below works as expected - working.
                        jQuery("#<%=hdnDocIDs.ClientID %>").val(jQuery("#<%=hdnDocIDs.ClientID%>").val() + ',' + rd['ID']);
                        alert('All hdn ids : ' + jQuery("#<%=hdnDocIDs.ClientID%>").val());
                        //Using hidden fields it concatenates the doc ids - working

                        //alert('in side the for loop ID 2:' + rd['ID'] + ' DoctorID : ' + DoctorID);
                        //var furl = ResolveUrl() + '/AddCCDoctor';
                        //var furl = '';
                        //var param = '{"CaseNo":"' + CaseNo + '", "DoctorID":"' + DoctorID + '"  }';
                        //var param = '{ "DoctorID":"' + DoctorID + '"  }';
                        //var callback = function (msg) { dataHasChanged(); jQuery("#cclist").trigger("reloadGrid"); };
                        // ajaxJsonCall(furl, param, callback);
                        //jQuery("#cclist").jqGrid('setGridParam', {datatype: 'json'}).trigger('reloadGrid');
                        function (msg) { dataHasChanged(); jQuery("#cclist").trigger("reloadGrid"); };
                    }
                }
            }

        }
    });

#list 网格通过单击上面代码中未发布的“搜索”按钮来加载。一旦#list jqGrid 被加载，用户可以点击他们感兴趣的行并且这些行被添加到#cclist jqgrid。

现在，为了使 .ascx 更通用，我需要能够在后面的代码中编写一个公共方法来返回添加到 #cclist jqGrid 的所有行 ID（doctorID）并将 ID 保存到数据库。

有人可以帮我解决这个问题吗？

Answer 1

感谢您花时间阅读我的帖子并发布您的 cmets。 我将代码放在下面的函数中，它按预期工作。

var hiddenField = $("#"); var selectedValues = "";

function updateSelectedRowsHidden() {

    var selectedRows = [];
    selectedRows = $('#cclist').jqGrid('getDataIDs');
    selectedValues = "";
    hiddenField.val("");

    for (var i = 0; i < selectedRows.length; i++) {
         var myRow = $('#cclist').jqGrid('getRowData', selectedRows[i]);
         selectedValues = selectedValues + myRow.ID + ",";
    }

    hiddenField.val(selectedValues);
}

Answer 2

您会看到这个answer，这里我从选定的行中获取数据并将其发送到服务器方法。在你的页面上有一个保存按钮，就像answer中的那个一样

现在，在您的情况下，您需要来自整个网格的数据。所以你的代码会是这样的。

$('#clickMe').click(function() {
   var rowsOnPage=[];
   var docId=[];
   rowsOnPage=$('#cclist').jqGrid('getDataIDs');
   for(var i=0;i<rowsOnPage.length;i++)
   {
   docId.push(rowsOnPage[i].ID);
   }
    $.ajax({
        type: 'POST',
        url: '@Url.Action("editMe")',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({DoctorID:docID })
        dataType: "json",
        success: function() {
            $('#grid').trigger("reloadGrid");
        },
        error: function() {
            alert("error");
        }
    }); 
});

服务器方法（在 ASP.NET MVC 中）将是您方法中的代码隐藏方法，如下所示。

//depends upon dataType of DoctorID(int or string)
public ActionResult editMe(string[] DoctorID)
{
}