Colmodel的jqGrid的动态读取和从$ ColNamesÇASPX的$ cBehind [英] JQGrid Dynamic Reading of Colmodel and ColNames from codeBehind of ASPX

问题描述

我们与jqGrid的替换旧电网。

We are replacing older grid with JQGrid. 

我们想从code网绑定背后包括 Col​​Model 和 Col​​Names 。
列名和列模式将决定运行时间。

We want to bind grid from code behind including ColModel and ColNames. Column names and column model will be decided run time.

我们尝试了非工作：

1. 使用的HttpHandler + 的jQuery 阿贾克斯


2. 使用的WebMethods + 的jQuery 阿贾克斯

1. Using HttpHandler + jQuery Ajax
2. Using WebMethods + jQuery Ajax

有没有互联网上一个工作的应用程序。
谁能帮帮忙？

There is not a single working application on internet. Can anyone help out?

系统：ASPX网页形式，从后台记录加载列表

System: ASPX web form which load list of records from backend.

我们用这里提供＃2的所有选项，但没有运气。

We used all the options provided here on Stackoverflow, but no luck.

推荐答案

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

I have recently implemented a similar functionality in one of my projects using similar tools (ASPX WebForms, WebMethods and jQuery AJAX).

请务必阅读和理解VB.NET和JavaScript的意见，以避免任何错误。

Be sure to read and understand the comments in VB.NET and JavaScript to avoid any errors.

'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

在ASPX AJAX调用

AJAX call in ASPX

<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

HTML markup for 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

Implemented with .NET Framework 4.0, jqGrid 4.6.0, jQuery 1.9.1

这篇关于Colmodel的jqGrid的动态读取和从$ ColNamesÇASPX的$ cBehind的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！