क्या कोई भी JQuery ग्रिड प्लगइन, jqGrid को कार्यान्वित करने में सक्षम है? मैं जेएसओएन पेजिंग को लागू करने की कोशिश कर रहा हूं, और मुझे लगता है कि मैं करीब आ रहा हूं, लेकिन मुझे अपरिहार्य विवरणों से भी जा रहा है। अगर कोई नमूना कोड पोस्ट कर सकता है, तो मैं इसकी सराहना करता हूं।एएसपी.NET और JSON स्वरूपण के साथ jQuery के jgGrid को कार्यान्वित करना
अपनी पोस्ट के लिए यह करने का प्रयास करते समय अपनी पोस्ट मिली। मुझे यह काम मिल गया। भविष्य में इसकी आवश्यकता रखने वाले किसी भी व्यक्ति के लिए, जेकजीड जेएसओएन और एएसपी.नेट के साथ बॉक्स से बाहर काम नहीं करेगा। आपको grid.base.js. में कुछ छोटे बदलाव करने की आवश्यकता है लाइन 829 के आसपास, निम्नलिखित के साथ json मामले वर्ग को प्रतिस्थापित:
case "json":
gdata = JSON.stringify(gdata); //ASP.NET expects JSON as a string
$.ajax({ url: ts.p.url,
type: ts.p.mtype,
dataType: "json",
contentType: "application/json; charset=utf-8", //required by ASP.NET
data: gdata,
complete: function(JSON, st) { if (st == "success") { addJSONData(cleanUp(JSON.responseText), ts.grid.bDiv); if (loadComplete) { loadComplete(); } } },
error: function(xhr, st, err) { if (loadError) { loadError(xhr, st, err); } endReq(); },
beforeSend: function(xhr) { if (loadBeforeSend) { loadBeforeSend(xhr); } } });
if (ts.p.loadonce || ts.p.treeGrid) { ts.p.datatype = "local"; }
break;
तो निम्नलिखित समारोह जोड़ें:
function cleanUp(responseText) {
var myObject = JSON.parse(responseText); //more secure than eval
return myObject.d; //ASP.NET special
}
तुम भी JSON parser and stringifier शामिल करने के लिए की आवश्यकता होगी। एएसपी.नेट के साथ काम करने के साथ, यह संशोधित कोड भी more secure है क्योंकि eval स्टेटमेंट चला गया है।
संपादित करें: मैं होना चाहिए यह भी कहा कि आप grid.celledit.js, grid.formedit.js, grid.inlinedit.js, और grid.subgrid.js के लिए इसी तरह संपादन करने के लिए हो सकता है।
मैं बस सबकुछ एक साथ खींचने की कोशिश कर रहा हूं। मेरी पहली चिंता बस एक सही JSON प्रतिक्रिया उत्पन्न कर रही है। मेरी लौटाई गई कक्षा को 'डी' नामक संपत्ति के रूप में क्रमबद्ध किया गया है - क्या यह एक JQuery चीज है, या एएसपी.Net वेब विधि सम्मेलन है? मुझे डर है कि jqGrid नजर रखेंगे हूँ डेटा, शीर्ष स्तर के होने के लिए जबकि asp.net एक संपत्ति बुलाया 'प' में रख देगा:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object GetData() {
TestClass tc = new TestClass() { One = "Hello", Two = "World" };
return tc;
}
$("#divResults").click(function() {
$.ajax({
type: "POST",
url: "GridData_bak.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(test) {
// Replace the div's content with the page method's return.
$("#divResults").text(test.d.One);
},
error: function(msg) {
$("#divResults").text(msg);
}
});
});
FlexGrid प्लगइन में हालांकि doumentation पर काफी विरल है डेमो पेज पर एक छोटा सा अनुभाग एक जेसन सीरियलाइज्ड ऑब्जेक्ट बनाने पर एक टट है, यह थोड़ा भ्रामक है क्योंकि ग्रिड को एक विशिष्ट प्रारूप की आवश्यकता होती है, मैंने एक छोटे बंदर ग्रीस के साथ एक्सएमएल विकल्प के लिए PHP कोड पोर्ट किया है, आप वही कर सकते हैं json स्वरूपण
heres मेरी एक्सएमएल बंदरगाह के लिए
the setup for the grid
$("#tableToFlex").flexigrid({
url: 'WebService.asmx/getData'}
... *other configs* ...);
webservice.asmx वर्ग
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Xml)> _
Public Function getData(ByVal page As Integer, _
ByVal qtype As String, _
ByVal Query As String, _
ByVal rp As Integer, _
ByVal sortname As String, _
ByVal sortorder As String) As System.Xml.XmlDocument
'note these parameters are inputted to determine paging and constrains for the resultant rows
'Sample list to send to the grid
Dim list = New List(Of ApplicationStateInformation)
'Sample row object that holds name , surname , address, idnumber ...
list.Add(New RowObjects("test1", "test1", "test1", "12345"))
list.Add(New RowObjects("test2", "test2", "test2", "12345"))
list.Add(New RowObjects("test3", "test3", "test3", "12345"))
list.Add(New RowObjects("test4", "test4", "test4", "12345"))
'retun a xml doc, as we are using the xml format on the flexgrid
Dim returnDoc = New System.Xml.XmlDocument()
returnDoc.Load(New IO.StringReader(ToXmlResult(list)))
Return returnDoc
End Function
Private Function ToXmlResult(ByVal list As List(Of RowObjects)) As String
'this is the xml document format the grid understands
Dim result As String = "<?xml version=""1.0"" encoding=""utf-8""?>" & vbCrLf
result += "<rows>" & vbCrLf
result += String.Format("<page>{0}</page>" & vbCrLf, "1")
result += String.Format("<total>{0}</total>" & vbCrLf, "10")
For Each item In list
result += ConvertRowData(item)
Next
result += "</rows>" & vbCrLf
Return result
End Function
Private Function ConvertRowData(ByVal row As RowObjects) As String
Dim result As String = String.Format("<row id='{0}'>" & vbCrLf, row.IdNumber.ToString)
'THESE SHOULD BE HTML ENCODED (the format arg) but I left it out
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Name)
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.Surname)
result += String.Format("<cell><![CDATA[{0}]]></cell>" & vbCrLf, row.IdNumber)
result += "</row>" & vbCrLf
Return result
End Function
मेरे पास jQuery और ASP.NET के साथ क्लाइंट-साइड पेजिंग करने के लिए बस jTemplates हैं। मैंने उस पर एक ब्लॉग पोस्ट किया था जिसे आप यहां पा सकते हैं: http://www.aaron-powell.com/blog.aspx?id=1209
यह एक टेम्पलेट डेटा स्थान बनाने के तरीके को देखता है, एएसपी.NET से डेटा वापस कर देता है और फिर पेजिंग समाधान लागू करता है।
मुझे लगता है कि आप grid.base.js और अन्य jqgrid फ़ाइलों को संशोधित किए बिना & asp.net json साथ jqgrid काम कर सकते हैं, आप अपने स्वयं के कस्टम ajax कॉल को परिभाषित करने के डेटाप्रकार संपत्ति का उपयोग करें और एक json पाठक, jqgrid को परिभाषित करने के लिए है फिर ग्रिड रीलोड होने पर हर बार अपने कस्टम AJAX कॉल और रीडर का उपयोग करेंगे।
प्रक्रिया xml के लिए समान है, आप बस एक jsonreader के बजाय xmlreader को परिभाषित करते हैं।
सभी jsonreader के गुणों के तहत live demo page में के लिए कस्टम डेटा-प्रकार के उदाहरण देखने "डेटाप्रकार के रूप में समारोह" online documentation
में परिभाषित कर रहे हैं
अच्छा बिंदु। यदि आप केवल डेटा पुनर्प्राप्त कर रहे हैं, तो यह काम करता है। दुर्भाग्यवश jqGrid में संपादन कार्यक्षमता कस्टम अजाक्स की अनुमति नहीं देती है जब तक कि आप jqGrid कोड में परिवर्तन नहीं करते हैं, कम से कम जहां तक मैं कह सकता हूं। – nshaw
मेरे "नई 3.3 में" लागू:
डेटा: "{'पृष्ठ': '" + gdata.page + "', 'पंक्तियां': '" + gdata.rows + "', 'sidx': '" + gdata.sidx + "', 'sord': '"+ gdata.sord +"', 'nd': '"+ gdata.nd +"', '_ search': '"+ gdata._search +"', 'searchField': '"+ ts.p.searchdata .searchField + "',' searchString ':'" + ts.p.searchdata.searchString + "', searchOper': '" + ts। p.searchdata.searchOper + "'}",
सफलता: फ़ंक्शन (जेएसओएन, सेंट) { अगर (सेंट == "सफलता") {addJSONData (JSON.d, ts.grid.bDiv); अगर (लोड पूर्ण) {loadComplete(); }}
पूर्ण AJAX ईवेंट उपयोग सफलता घटना का उपयोग करके स्थापित किया गया। इस तरह डबल जेसन seralize को रोकने के लिए है।
बस एक चीज जिसे मैंने सेल संपादन के साथ महसूस नहीं किया: मान लें कि मैं एक ही डेटा प्रकार (int) के साथ कई सेल्स संपादित करना चाहता हूं। मेरे पास केवल एक वेब विधि है! और मैं अलग नाम के साथ एक ही डेटा प्रकार के साथ oveload cant नहीं कर सकता! क्या कोई इस तरह की समस्या हल करता है?
आप ग्रिड को पॉप्युलेट करने के लिए एएसपी.NET एमवीसी जेसनरसल्ट का उपयोग कर सकते हैं।
व्यक्ति कक्षा
public class Person
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime Birthday { get; set; }
public static IEnumerable<Person> GetABunchOfPeople()
{
// Get a bunch of People.
}
}
अपने नियंत्रक में आप होगा:
public JsonResult GetABunchOfPeopleAsJson()
{
var rows = (Person.GetABunchOfPeople()
.Select(c => new
{
id = c.ID,
cell = new[]
{
c.ID.ToString(),
c.Name,
c.Birthday.ToShortDateString()
}
})).ToArray();
return new JsonResult
{
Data = new
{
page = 1,
records = rows.Length,
rows,
total = 1
}
};
}
और यूआरएल के लिए jqGrid विन्यास होगा:
url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',
इन हैक्स अभी भी की आवश्यक के रूप में कर रहे हैं jqGrid 3.4? –