我們正在用JQGrid替換舊的網格。JQGrid從ASPX的codeBehind動態讀取Colmodel和ColNames
我們希望綁定來自代碼後面的網格，包括ColModel和ColNames。 列名和列模型將決定運行時間。
我們嘗試了非工作：
HttpHandler + jQuery阿賈克斯WebMethods + jQuery阿賈克斯沒有互聯網上一個工作中的應用。 任何人都可以幫忙嗎？
系統：ASPX web表單，它載入來自後端的記錄列表。
我們使用了Stackoverflow上提供的所有選項，但沒有運氣。
我最近在使用類似工具（ASPX WebForms，WebMethods和jQuery AJAX）的項目之一中實現了類似的功能。
請務必閱讀並理解VB.NET和JavaScript中的註釋以避免任何錯誤。在ASPX
'INCLUDE NAMESPACES REQUIRED FOR WEBMETHOD IMPLEMENTATION
Imports System.Web.Services
Imports System.Web.Script.Services
'WEB METHOD FOR AJAX CALL RETURNING JSON
<WebMethod()> _
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
Public Shared Function getJSONData(ByVal iRows As String) As String
'...
'YOUR DB LOGIC HERE
'LOAD YOUR DATA INTO A DATASET NAMED ds
'...
Dim dict As New Dictionary(Of String, Object)
For Each dt As DataTable In ds.Tables
Dim rows As New List(Of Dictionary(Of String, Object))()
Dim stDataType As String, stAlign As String, inWidth As Integer
Dim row As New Dictionary(Of String, Object)()
'PREPARE colModel
For Each col As DataColumn In dt.Columns
row = New Dictionary(Of String, Object)()
row.Add("index", col.ColumnName)
row.Add("name", col.ColumnName)
row.Add("label", col.ColumnName.Replace("_", " "))
row.Add("resizeable", True)
row.Add("search", True)
row.Add("sortable", True)
'GET COLUMN DATA TYPE, COLUMN ALIGNMENT AND COLUMN WIDTH
Select Case col.DataType.ToString
Case "Byte", "Int16", "Int32", "Integer", "Int64", "System.Byte", "System.Int16", "System.Int32", "System.Integer", "System.Int64"
stDataType = "integer" : stAlign = "right" : inWidth = 80
Case "money", "System.Single", "System.Decimal", "System.Double"
stDataType = "number" : stAlign = "right" : inWidth = 80
Case "String", "System.String", "System.Byte", "System.Char"
stDataType = "" : stAlign = "" : inWidth = 175
Case "bit", "Boolean", "System.Boolean"
row.Add("formatter", "checkbox")
stDataType = "" : stAlign = "center" : inWidth = 100
Case "datetime", "System.DateTime"
Select Case col.ColumnName
Case "Updated_On"
'dd/MM/yyyy HH:mm:ss FOR SPECIFIED COLUMNS DATE WITH TIME
row.Add("template", "dateTimeFormat")
Case Else
'dd/MM/yyyy FOR ALL OTHER COLUMNS DATE ONLY
row.Add("template", "dateOnlyFormat")
End Select
row.Add("formatter", "date")
stDataType = "date" : stAlign = "right" : inWidth = 150
Case Else
stDataType = "" : stAlign = "" : inWidth = 200
End Select
If stDataType.Length > 0 Then
row.Add("sorttype", stDataType)
row.Add("searchtype", stDataType) ' & ",searchrules:"{""required":true, "number":true, "maxValue":13}}
End If
If stAlign.Length > 0 Then row.Add("align", stAlign)
row.Add("width", inWidth)
rows.Add(row)
Next
't_Articles USED AS TABLENAME FOR THIS EXAMPLE
dict.Add(dt.TableName & "_ColModel", rows)
'GET DATA
rows = New List(Of Dictionary(Of String, Object))()
For Each dr As DataRow In dt.Rows
row = New Dictionary(Of String, Object)()
For Each col As DataColumn In dt.Columns
Select Case col.DataType.ToString
Case "datetime", "System.DateTime"
Select Case col.ColumnName
Case "Updated_On"
'FOR SPECIFIED COLUMNS DATE WITH TIME
row.Add(col.ColumnName, Format(dr(col), "dd/MM/yyyy HH:mm:ss"))
Case Else
'ALL OTHER COLUMNS DATE ONLY
row.Add(col.ColumnName, Format(dr(col), "dd/MM/yyyy"))
End Select
Case Else
row.Add(col.ColumnName, dr(col).ToString())
End Select
Next
rows.Add(row)
Next
dict.Add(dt.TableName & "_Data", rows)
Next
Dim serializer As New JavaScriptSerializer
Dim stResult As String = ""
stResult = serializer.Serialize(dict)
Return stResult
End Function
AJAX調用
<script type="text/javascript">
$(document).ready(function() {
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
var dateTemplateMapping = {
"dateOnlyFormat": { formatoptions: { srcformat: "d-m-Y", newformat: "d/m/Y"} },
"dateTimeFormat": { formatoptions: { srcformat: "d-m-Y H:i:s", newformat: "d/m/Y H:i:s"} }
};
$.ajax({
type: "POST",
url: sPage + '/getJSONData',
//PASS ANY PARAMETERS TO WEBMETHOD, IF REQUIRED
data: "{'iRows':'0'}",
contentType: 'application/json; charset=utf-8',
dataType: "json",
//FILTER JSON FOR INITIAL d IN OUTPUT PRO .NET 3.5
dataFilter: function (data) {
var resultData = eval('(' + data + ')');
if (resultData.hasOwnProperty('d')) {
return resultData.d;
} else {
return resultData;
}
},
success: function (resultData) {
//REPLACE t_Articles WITH THE TABLE NAME USED IN DATASET FOR ADDING THE TABLE
var colD = resultData.t_Articles_Data;
var colM = resultData.t_Articles_ColModel;
var i, cm;
//APPLY DATE, DATETIME FORMATTER
for (i = 0; i < colM.length; i++) {
cm = colM[i];
if (cm.hasOwnProperty("template") && dateTemplateMapping.hasOwnProperty(cm.template)) {
cm.template = dateTemplateMapping[cm.template];
}
}
$("#DataGridTable").jqGrid({
datatype: 'local',
data: colD,
colModel: colM,
multiselect: false,
pager: jQuery('#DataGridPager'),
loadComplete: function() {
//alert("ALL IS WELL");
}
});
//ANY OTHER JQGRID SETTINGS, IF REQUIRED
jQuery("#DataGridTable").jqGrid('navGrid', '#DataGridPager', { del: false, add: false, edit: false }, {}, {}, {}, { multipleSearch: true });
},
error: function (x, e) {
alert("Error with AJAX callback\nreadyState: " + x.readyState + "\nstatus: " + x.status + "\nmsg: " + e.msg);
}
});
});
</script>
HTML標記的jqGrid
<table id="DataGridTable">
<tr>
<td><img src="/design/camera-loader.gif" alt="Loading ..."/></td>
</tr>
</table>
<div id="DataGridPager"></div>
與.NET Framework 4.0中，jqGrid的4.6.0實施的jQuery 1.9.1