如何从页面后面的VB.NET代码获取jqGrid中ID列的值? [英] How to get the values of a ID column in a jqGrid from VB.NET code behind page?
本文介绍了如何从页面后面的VB.NET代码获取jqGrid中ID列的值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的.ascx页面有两个jqGrids
$(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 $('#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)
{
}
My .ascx page has two jqGrids
$(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"); };
}
}
}
}
});
The #list grid gets loaded by clicking on the Search button that I have not posted in the above code. Once the #list jqGrid is loaded users can click on the rows they are interested in and those rows are added to the #cclist jqgrid.
Now, to make the .ascx more generic I need to be able to write a public method in the code behind to return all the rows IDs (doctorIDs) that are added to the #cclist jqGrid and save the IDs to the database.
Can someone help me out on how to do this?
解决方案
You see this answer, here I'm getting data out of selected rows and sending that to server method. Have a save button in your page like the one in answer
Now in your case you want data from entire grid. So for you code will be like this.
$('#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");
}
});
});
and the server method(in ASP.NET MVC) which will be your code behind method in your approach will be like this.
//depends upon dataType of DoctorID(int or string)
public ActionResult editMe(string[] DoctorID)
{
}
这篇关于如何从页面后面的VB.NET代码获取jqGrid中ID列的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
