Question

我们正在用JQGrid替换旧网格。

我们希望从包含ColModel和ColNames的代码中绑定网格。列名和列模型将决定运行时间。

我们尝试了不工作：

使用HttpHandler + jQuery Ajax
使用WebMethods + jQuery Ajax

互联网上没有一个正在运行的应用程序。任何人都可以帮忙吗？

系统：从后端加载记录列表的ASPX Web表单。

我们使用了Stackoverflow上提供的所有选项，但没有运气。

Answer 1

我最近在我的一个项目中使用类似的工具（ASPX WebForms，WebMethods和jQuery AJAX）实现了类似的功能。

请务必阅读并理解VB.NET和JavaScript中的注释，以避免任何错误。

Template.documentEdit.helpers({
  getDocument: function () {
    var docId = FlowRouter.getParam('docId');
    var doc = Documents.findOne(docId) || {};
    return doc;
  }
});

ASPX中的AJAX调用

<template name="documentEdit">
  <div class="container">
    <h1>Edit document</h1>
    {{#if Template.subscriptionReady}}
      {{#with getDocument }}
        {{#autoForm collection="Documents" doc=this id="documentForm" type="update" meteormethod="documentUpdateMethod"}}
        <fieldset>
          {{> afQuickField name='title'}}
          {{> afQuickField name='content' rows=6}}
        </fieldset>
        <button type="submit" class="btn btn-primary">Update</button>
        <a class="btn btn-link" role="button" href="{{pathFor 'documentsList'}}">Back</a>
        {{/autoForm}}
      {{/with}}
    {{else}}
      Loading...
    {{/if}}
  </div>
</template>

jqGrid的HTML标记

'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

使用.NET Framework 4.0，jqGrid 4.6.0，jQuery 1.9.1

实现

JQGrid从ASPX的codeBehind动态读取Colmodel和ColNames

1 个答案: