Wie erhalte ich jqGrid auf das Backend mit ASP.NET + JSON zu arbeiten?

https://stackoverflow.com/questions/727502

05-09-2019
|

Frage

ok, ich bin zurück. Ich vereinfachte total mein Problem nur drei einfache Felder und ich bin immer noch auf der gleichen Linie mit der addJSONData Methode stecken. Ich habe seit Tagen auf diese stecken und egal, wie ich die Ajax-Aufruf überarbeiten, die json string, bla bla bla ... Ich kann nicht an die Arbeit! Ich kann nicht einmal bekommen es als eine Funktion zu arbeiten, wenn manuell eine Datenzeile hinzufügen. Kann jemand bitte eine Arbeitsprobe von jqGrid posten, die mit ASP.NET und JSON funktioniert? Werden Sie bitte 2-3 Felder (vorzugsweise string, integer und Datum?) Umfassen würde ich mich freuen, eine Arbeitsprobe von jqGrid zu sehen und nur die manuellen Zugabe eines JSON-Objekt der addJSONData Methode. Vielen Dank!! Wenn ich jemals diese Arbeit bekommen, werde ich eine vollständige Codebeispiel Post für alle anderen Posting um Hilfe von ASP.NET, JSON Benutzer auch auf diese stecken. Nochmal. VIELEN DANK!!

tbl.addJSONData (objGridData); // err: tbl.addJSONData ist keine Funktion !!

Hier ist, was Firebug zeigt, wenn ich diese Meldung:

• objGridData Objekt gesamt = 1 page = 1 Datensätze = 5 rows = [5]
    ○ Seite "1"
    Records "5"
    Total "1"
    Zeilen [Objekt ID = 1 = PartnerID BCN, Objekt ID = 2 PartnerID = BCN, Objekt-ID = 3 = PartnerID BCN, 2 ... 0 = mehr Objekt 1 = 2 = Object Objekt 3 Objekt 4 = = Object]
            (Index) 0
                      (Prop) ID (Wert) 1               (Prop) PartnerID (Wert) "BCN"                   (Prop) DateTimeInserted (Wert) Do 29. Mai 2008 00.08.45 GMT-0700 (Pacific Daylight Time)
        * Es gibt drei weitere Reihen

Hier ist der Wert der Variablen TBL (Wert) '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>

Dies ist die komplette Funktion:

 $('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")};

Lösung

Hier ist ein einfaches Beispiel ...

Sie müssen https://github.com/douglascrockford/JSON -js / Blob / Master / json2.js dies funktioniert ...

und natürlich die üblichen jquery-Dateien.

Fügen Sie diese zu einem Webservice

// 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;
    }
}

Fügen Sie diese zu Ihrer aspx Seite

<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>

Andere Tipps

In der Regel, wenn Sie die ‚blah keine Funktion‘ Fehler mit jqGrid bekommen es ist, weil das richtige Modul wird nicht eingelegt. Die addJSONData Funktion ist in der grid.base.js-Datei definiert. Können Sie Ihre jqGridInclude () Funktion in der jquery.jqGrid.js Datei überprüfen und sicherstellen, dass grid.base.js als Teil der Initialisierung Ihrer Module Variable enthalten wird?

Haben Sie die Tabl Variable überprüft Bezug auf Ihre jqGrid Instanz wird immer?

Versuchen Sie, eine ID zu Ihrem Tabellenelement hinzufügen und den Verweis auf die jqGrid erhalten wie:

var thegrid = jQuery("#mytableid")[0];

gut ich sehe eine Sache falsch hier:

var tbl = jQuery('table.scroll')[0];  
 //tbl.addJSONData(objGridData); //error received: addJSONData not a function

, wenn Sie in der Tat fragen, warum Sie diese Fehlermeldung erhalten, ist es, weil Tabl nicht diese Funktion hat.

Edit: Ich habe neugierig, und überprüft, ob jqGrid diese Methoden der DOM-Referenz-Objekt hinzugefügt. und sie taten. (I geprüft Firebug hier: http://trirand.com/jqgrid/jqgrid.html ).

Eine Sache, die hier passieren kann, ist, dass Sie mehrere Tabellen der Klasse ‚blättern‘ und Ihre jquery kehrt die falsche haben.

vielleicht in diesem Code etwas Hilfe hier auf Stack-Überlauf geschrieben? jqGrid mit asp.net Webmethod und json Arbeit mit Sortierung, Paging, suchen und LINQ - aber braucht dynamische Operatoren

Da wir viele Fragen für ASP.NET WebForms und jqGrid bekam, haben wir beschlossen, die „Komponente“ Weg zu gehen und etwas zu implementieren, die asp sehr ähnlich ist: Gridview. Auf diese Weise können Sie jqGrid steuert die vertrauten ASP.NET Seite Lebenszyklus verwendet, Ereignisse, Datenquellen, etc.

Sie können eine Beta dieses hier online sehen - mehr als 30 Proben verfügbar zur Zeit:

http://www.trirand.net/demo.aspx

Es wird höchstwahrscheinlich in kommerzielles Produkt wachsen und (Open-Source-Lizenzen verfügbar sein wird), wenn es Interesse daran ist. Unterdessen können Sie Reflector verwenden, um die Quellen für die Bezugnahme auf Check-out (bis wir einen Weg finden, um die Quelle online zur Verfügung zu haben). Wir verwenden SVN für ASP.NET zu GitHub für den js Kern Gegensatz, also haben wir etwas Arbeit in dieser Richtung.

Wir hoffen, dass die Gemeinschaft hilft.

Rumen Stankov Trirand

Dies ist eine sehr alte Frage, aber ich war erst vor kurzem das gleiche Problem haben. Ich stellte, wie ich das auf ein neues Blog erreichte Ich loszulegen bin versucht zu.

Es kann saubere Möglichkeiten, dies zu tun, aber das funktioniert für mich. Bisher konnte ich aus diesem Beispiel ziemlich leicht skalieren. Meine nächste Hürde ist immer die loadonce zu arbeiten.

Sie können mein Beispiel finden Sie hier:

http://programming.webdad3.com/?p=3

Webformular ausstirbt, so müssen wir auf neueste Technologien wie asp.net MVC konzentrieren. Ich habe eine neue asp.net jqGrid Integration hier http://www.techdoubts.net/2017/05/full-integration-dynamic-jqgrid-asp-net-mvc.html

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow