[英]How do I get jqGrid to work using ASP.NET + JSON on the backend?
好的,我回來了。 我完全將我的問題簡化為三個簡單的字段,並且仍然使用addJSONData方法停留在同一行。 我已經被困在這幾天了,無論我如何重寫ajax調用,json字符串,等等等等......我無法讓它工作! 在手動添加一行數據時,我甚至無法將其作為函數工作。 任何人都可以發布一個與ASP.NET和JSON一起使用的jqGrid的工作示例嗎? 請你包括2-3個字段(字符串,整數和日期最好?)我很樂意看到jqGrid的工作示例,只是使用addJSONData方法手動添加JSON對象。 非常感謝!! 如果我得到這個工作,我將發布一個完整的代碼示例,用於所有其他發布以獲得ASP.NET的幫助,JSON用戶也堅持這一點。 再次。 謝謝!!
tbl.addJSONData(objGridData); //錯誤:tbl.addJSONData不是函數!!
以下是Firebug在收到此消息時顯示的內容:
•objGridData對象總數= 1頁= 1條記錄= 5行= [5]
○頁面“1”
記錄“5”
總計“1”
行[對象ID = 1 PartnerID = BCN,對象ID = 2 PartnerID = BCN,對象ID = 3 PartnerID = BCN,2更多... 0 =對象1 =對象2 =對象3 =對象4 =對象]
(指數)0
(prop)ID(值)1(prop)PartnerID(值)“BCN”(prop)DateTimeInserted(value)2008年5月29日星期二12:08:45 GMT-0700(太平洋夏令時)
*還有三行
這是變量tbl(value)'Table.scroll'的值
<TABLE cellspacing="0" cellpadding="0" border="0" style="width: 245px;" class="scroll grid_htable"><THEAD><TR><TH class="grid_sort grid_resize" style="width: 55px;"><SPAN> </SPAN><DIV id="jqgh_ID" style="cursor: pointer;">ID <IMG src="http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images/sort_desc.gif"/></DIV></TH><TH class="grid_resize" style="width: 90px;"><SPAN> </SPAN><DIV id="jqgh_PartnerID" style="cursor: pointer;">PartnerID </DIV></TH><TH class="grid_resize" style="width: 100px;"><SPAN> </SPAN><DIV id="jqgh_DateTimeInserted" style="cursor: pointer;">DateTimeInserted </DIV></TH></TR></THEAD></TABLE>
這是完整的功能:
$('table.scroll').jqGrid({
datatype: function(postdata) {
mtype: "POST",
$.ajax({
url: 'EDI.asmx/GetTestJSONString',
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "text", //not json . let me try to parse
success: function(msg, st) {
if (st == "success") {
var gridData;
//strip of "d:" notation
var result = JSON.parse(msg);
for (var property in result) {
gridData = result[property];
break;
}
var objGridData = eval("(" + gridData + ")"); //creates an object with visible data and structure
var tbl = jQuery('table.scroll')[0];
alert(objGridData.rows[0].PartnerID); //displays the correct data
//tbl.addJSONData(objGridData); //error received: addJSONData not a function
//error received: addJSONData not a function (This uses eval as shown in the documentation)
//tbl.addJSONData(eval("(" + objGridData + ")"));
//the line below evaluates fine, creating an object and visible data and structure
//var objGridData = eval("(" + gridData + ")");
//BUT, the same thing will not work here
//tbl.addJSONData(eval("(" + gridData + ")"));
//FIREBUG SHOWS THIS AS THE VALUE OF gridData:
// "{"total":"1","page":"1","records":"5","rows":[{"ID":1,"PartnerID":"BCN","DateTimeInserted":new Date(1214412777787)},{"ID":2,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125000)},{"ID":3,"PartnerID":"BCN","DateTimeInserted":new Date(1212088125547)},{"ID":4,"PartnerID":"EHG","DateTimeInserted":new Date(1235603192033)},{"ID":5,"PartnerID":"EMDEON","DateTimeInserted":new Date(1235603192000)}]}"
}
}
});
},
jsonReader: {
root: "rows", //arry containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false,
id: "ID" //index of the column with the PK in it
},
colNames: [
'ID', 'PartnerID', 'DateTimeInserted'
],
colModel: [
{ name: 'ID', index: 'ID', width: 55 },
{ name: 'PartnerID', index: 'PartnerID', width: 90 },
{ name: 'DateTimeInserted', index: 'DateTimeInserted', width: 100}],
rowNum: 10,
rowList: [10, 20, 30],
imgpath: 'http://localhost/DNN5/js/jQuery/jqGrid-3.4.3/themes/sand/images',
pager: jQuery('#pager'),
sortname: 'ID',
viewrecords: true,
sortorder: "desc",
caption: "TEST Example")};
這是一個簡單的例子......
您需要https://github.com/douglascrockford/JSON-js/blob/master/json2.js才能使用...
當然還有通常的jquery文件。
將其粘貼到Web服務
// The lower case properties here are required to be lower case
// I cant find a way to rename them when they are serialized to JSON
// XmlElement("yournamehere") does not work for JSON :(
public class JQGrid
{
public class Row
{
public int id { get; set; }
public List<string> cell { get; set; }
public Row()
{
cell = new List<string>();
}
}
public int page { get; set; }
public int total { get; set; }
public int records { get; set; }
public List<Row> rows { get; set; }
public JQGrid()
{
rows = new List<Row>();
}
}
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyWebService : System.Web.Services.WebService
{
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public JQGrid GetJQGrid(int page, int pageSize, string sortIndex, string sortDirection)
{
DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.CONN_STRING, "udsp_GetMyData",pageIndex, pageSize);
if (ds == null || ds.Tables.Count < 1)
throw new Exception("Unable to retrieve data.");
JQGrid jqGrid = new JQGrid();
int i = 1;
foreach (DataRow dataRow in ds.Tables[0].Rows)
{
JQGrid.Row row = new JQGrid.Row();
row.id = Convert.ToInt32(dataRow["MyIdColumn"]);
row.cell.Add(dataRow["MyIdColumn"].ToString());
row.cell.Add(dataRow["MyColumn"].ToString());
projectGrid.rows.Add(row);
}
jqGrid.page = 1; // Set this when you are actually doing paging... this is just a sample
jqGrid.records = jqGrid.rows.Count;
jqGrid.total = jqGrid.rows.Count; // Set this to total pages in your result...
return jqGrid;
}
}
將其粘貼到您的aspx頁面
<script type="text/javascript">
function getData(pdata) {
var params = new Object();
params.page = pdata.page;
params.pageSize = pdata.rows;
params.sortIndex = pdata.sidx;
params.sortDirection = pdata.sord;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/CLM/CLM.asmx/GetProjectGrid2",
data: JSON.stringify(params),
dataType: "json",
success: function(data, textStatus) {
if (textStatus == "success") {
var thegrid = $("#testGrid")[0];
thegrid.addJSONData(data.d);
}
},
error: function(data, textStatus) {
alert('An error has occured retrieving data!');
}
});
}
var gridimgpath = '/clm/css/ui-lightness/images';
$(document).ready(function() {
$("#testGrid").jqGrid({
datatype: function(pdata) {
getData(pdata);
},
colNames: ['My Id Column', 'My Column'],
colModel: [
{ name: 'MyIdColumn', index: 'MyIdColumn', width: 150 },
{ name: 'My Column', index: 'MyColumn', width: 250 }
],
rowNum: 10,
rowList: [10, 20, 30],
imgpath: gridimgpath,
pager: jQuery('#pagerdt'),
sortname: 'id',
viewrecords: false,
sortorder: "desc",
caption: "Projects",
cellEdit: false
});
});
</script>
通常當你用jqGrid得到'blah not a function'錯誤時,因為沒有加載正確的模塊。 addJSONData函數在grid.base.js文件中定義。 你可以檢查jquery.jqGrid.js文件中的jqGridInclude()函數,並確保grid.base.js作為模塊變量初始化的一部分包含在內嗎?
也許在這里的代碼中有一些幫助發布在堆棧溢出? jqgrid與asp.net webmethod和json一起使用排序,分頁,搜索和LINQ - 但需要動態運算符
好吧,我在這里看到一件事:
var tbl = jQuery('table.scroll')[0];
//tbl.addJSONData(objGridData); //error received: addJSONData not a function
如果您確實想知道為什么會出現此錯誤,那是因為tbl沒有該功能。
編輯:我很好奇,並檢查jqGrid是否將這些方法添加到DOM引用對象。 他們做到了。 (我在這里使用firebug進行了檢查: http : //trirand.com/jqgrid/jqgrid.html )。
這里可能發生的一件事是你有多個類'scroll'的表,你的jquery返回錯誤的表。
你驗證了tbl變量是否正在引用你的jqgrid實例?
嘗試向表元素添加一個id並獲取對jqgrid的引用,如:
var thegrid = jQuery("#mytableid")[0];
由於我們對ASP.NET WebForms和jqGrid提出了很多問題,因此我們決定采用“組件”方式並實現與asp:GridView非常相似的東西。 這樣,您可以使用熟悉的ASP.NET頁面生命周期,事件,數據源等來控制jqGrid。
您可以在此處在線查看此測試版 - 目前有超過30個樣本:
http://www.trirand.net/demo.aspx
如果對此感興趣,它很可能會成長為商業產品(開源許可證將可用)。 同時,您可以使用Reflector檢查參考源(直到我們找到一種在線提供源的方法)。 我們使用SVN for ASP.NET而不是js Core的gitHub,所以我們在這個方向上有一些工作。
我們希望這有助於社區。
Rumen Stankov Trirand
這是一個非常古老的問題,但是,最近我遇到了同樣的問題。 我發布了如何在我試圖開始的新博客上實現這一目標。
可能有更簡潔的方法,但這對我有用。 到目前為止,我已經能夠相當容易地從這個例子中擴展。 我的下一個障礙是讓loadonce工作。
你可以在這里找到我的例子:
WebForm正在消亡,所以我們需要關注像asp.net MVC這樣的最新技術。 我在這里找到了一個新的asp.net jQGrid集成http://www.techdoubts.net/2017/05/full-integration-dynamic-jqgrid-asp-net-mvc.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.