如何更新JQGrid中的行？
[英]How to update rows in JQGrid?
問題描述
我正在使用JQGrid顯示數據庫結果。 現在，我需要按用戶更新行。 我試圖使用Inline Navigator。 我使用以下代碼制作網格。
$("#MyGrid").jqGrid({
url: service,
datatype: "json",
mtype: 'GET',
colNames: ['Col1', 'Col2'],
colModel: [
{ name: 'Col1', index: 'Col1', sortable: true, resizable: true, editable: true, sorttype: "text" },
{ name: 'Col2', index: 'Col2', align: 'left', sortable: true, resizable: true, width: 50, editable: true },
pager: '#pagerLab',
rowNum: 1000,
rowList: [10, 30, 100, 1000],
sortname: 'modified',
viewrecords: true,
gridview: true,
loadonce: true,
editurl: '/Service.svc/UpdateGrid',
});
jQuery("#MyGrid").jqGrid('navGrid', "#pagerLab", { edit: true, add: false, del: false, search:false });
jQuery("#MyGrid").jqGrid('inlineNav', "#pagerLab");
}
現在，我不確定如何編寫服務器端代碼以將用戶的更改保存到數據庫中。 我正在使用啟用AJAX的Web服務。
這是我的Web服務代碼，用於顯示網格：
[OperationContract]
[WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json)]
public JQGridViewTable MyGrid(string ID)
{
Reader reader = new Reader();
return Reader.ReadDetails(ID);
}
還有我的Reader類中的C＃代碼（在數據模型中）：
public JQGridViewTable ReadDetails(string ID)
{
JQGridViewTable table = new JQGridViewTable();
// read data from database and store in table
return table;
}
我需要以下方面的幫助：
1-我需要使用Post而不是Get嗎？ 注意，我在一個函數中顯示和編輯網格。 2-我需要在Javascript中添加其他內容嗎？ 例如編輯或還原功能？ 在文檔中，它們具有內聯編輯但不具有內聯導航的編輯和還原功能。 3-以什么格式將數據發送到Web服務進行編輯？ 為了顯示，它采用JQGridView格式。 4-我不知道如何在Web服務中實現UpdateGrid方法，因為我不知道Inline Navigator函數到底在做什么，它向Web服務發送了什么數據以及期望從服務器獲得什么數據。
我搜索了整個網絡，但每個人都以不同的方式使用它。 我將不勝感激任何幫助。
1 個解決方案
解決方案1
0 2013-03-25 17:09:09
根據您的示例代碼，jqGrid將在
editurl: '/Service.svc/UpdateGrid'
您將需要在WCF服務上創建此方法。 jqGrid將調用和HTTP Post並調用此方法，以發送列值。
您將雜草為WCF服務添加類似於以下內容的操作：
[OperationContract]
[WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json)]
public void UpdateGrid(string col1, string col2)
{
//code to actually do the update to the database
}
WCF操作將可用於在數據庫表中實際定位右行（我假設您可以基於col1或col2中存儲的值執行此操作）並執行更新操作。
下面的代碼段來自於我的實現，以您的示例為起點：
[default.html]
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="Scripts/jqGrid/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.2.js"></script>
<link href="Content/ui.jqgrid.css" rel="stylesheet" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
var lastSel;
$(document).ready(function() {
var service = 'http://localhost:5127/Service.svc/GetData';
$("#MyGrid").jqGrid({
url: service,
datatype: "json",
height: 255,
width: 600,
colNames: ['Col1', 'Col2'],
colModel: [
{ name: 'Col1', index: 'Col1', sortable: true, resizable: true, editable: false, sorttype: "text" },
{ name: 'Col2', index: 'Col2', align: 'left', sortable: true, resizable: true, width: 50, editable: true },
],
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "",
repeatitems: false
},
rowNum: 1000,
rowList: [10, 30, 100, 1000],
pager: '#pagerLab',
sortname: 'Col1',
viewrecords: true,
gridview: true,
loadonce: true,
onSelectRow: function (id) {
if (id && id !== lastSel) {
$(this).restoreRow(lastSel);
lastSel = id;
}
jQuery(this).editRow(id, true);
},
editurl: 'http://localhost:5127/Service.svc/UpdateData',
ajaxRowOptions: { contentType: 'application/json; charset=utf-8' },
serializeRowData: function (data) {
return JSON.stringify(data);
}
});
jQuery("#MyGrid").jqGrid('navGrid', "#pagerLab",
{ edit: false, add: false, del: false, search: false }
);
jQuery("#MyGrid").jqGrid('inlineNav', "#pagerLab");
});
</script>
</head>
<body>
<table id="MyGrid"></table>
<div id="pagerLab"></div>
</body>
</html>
[IService.cs]
[ServiceContract]
public interface IService
{
[OperationContract]
[WebInvoke(Method="GET", BodyStyle=WebMessageBodyStyle.Bare, ResponseFormat=WebMessageFormat.Json)]
jqGridModel<GridListItem> GetData();
[OperationContract]
[WebInvoke(Method="POST", BodyStyle=WebMessageBodyStyle.WrappedRequest, RequestFormat=WebMessageFormat.Json)]
void UpdateData(string id, string oper, string Col1, string Col2);
}
[DataContract]
public class GridListItem
{
[DataMember]
public string Col1 { get; set; }
[DataMember]
public string Col2 { get; set; }
}
[DataContract]
public class jqGridModel<T>
{
public jqGridModel()
{
this.total = 0;
this.rows = null;
this.records = 0;
this.page = 0;
}
[DataMember]
public int total { get; set; }
[DataMember]
// this is the property where you store the actual data model
public IList<T> rows { get; set; }
[DataMember]
public int page { get; set; }
[DataMember]
public int records { get; set; }
}
}
[Service.svc.cs]
public class Service : IService
{
jqGridModel<GridListItem> IService.GetData()
{
jqGridModel<GridListItem> model = new jqGridModel<GridListItem>();
List<GridListItem> list = new List<GridListItem>();
GridListItem item = new GridListItem() { Col1 = "1", Col2 = "Dog" };
list.Add(item);
item = new GridListItem() { Col1 = "2", Col2 = "Cat" };
list.Add(item);
model.records = list.Count;
model.rows = list;
return model;
}
void IService.UpdateData(string id, string oper, string Col1, string Col2)
{
//do work here to save the updated data
}
}
ASP.NET WinForms C＃-如何使用在JQGrid中編輯的值更新Label
[英]ASP.NET WinForms C# - How to update Label with value edited in JQGrid
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.