كيف يمكنني الحصول على JQGrid للعمل باستخدام ASP.NET + JSON على الخلفية؟

Question

حسنا لقد عدت. أقوم بتبسيط مشكلتي تماما إلى ثلاث حقول بسيطة فقط وما زلت عالقا على نفس السطر باستخدام طريقة Addjsondata. لقد علقت في هذا لعدة أيام وبغض النظر عن كيفية إعادة صياغة مكالمة أياكس، سلسلة JSON، بلاه بلاه بلاه ... لا أستطيع الحصول على هذا للعمل! لا أستطيع حتى الحصول عليها للعمل كدالة عند إضافة صف واحد من البيانات يدويا. هل يمكن لأي شخص الرجاء نشر عينة عمل من JQGrid يعمل مع ASP.NET و JSON؟ هل يرجى تضمين 2-3 حقول (سلسلة، عدد صحيح والتاريخ؟) سأكون سعيدا لرؤية عينة عمل من JQGrid وإضافة يدوية كائن JSON فقط باستخدام طريقة Addjsondata. شكرا جزيلا!! إذا حصلت على هذا العمل من أي وقت مضى، فسوف نشر نموذجا كاملا كاملا لجميع النشرات الأخرى للحصول على مساعدة من ASP.NET، عالق مستخدمي JSON على هذا أيضا. تكرارا. شكرا!!

tbl.addjsondata (objgriddata)؛ // err: tbl.addjsondata ليس وظيفة!

فيما يلي ما يظهره Firebug عندما أتلقى هذه الرسالة:

• OBJBRIDDATA كائن إجمالي = 1 صفحة = 1 سجلات = 5 صفوف = [5
○ الصفحة "1"
السجلات "5"
المجموع "1"
صفوف [معرف الكائن = 1 شريك = BCN، معرف الكائن = 2 شريك = BCN، كائن معرف = 3 شريك = BCN، 2 أكثر ... 0 = كائن 1 = كائن 2 = كائن 3 = كائن 4 = كائن 4 = كائن
(فهرس) 0
(PROP) معرف (القيمة) 1 (دعم) "BCN" (دعم) DateTimeImeSerted (القيمة) THU 29 مايو 2008 12:08:45 GMT-0700 (الوقت الدايلي المحيط الهادئ)
* هناك ثلاثة صفوف أكثر

إليك قيمة جدول TBL (القيمة) المتغير .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>

هنا هي الوظيفة كاملة:

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

Answer 1

اليك مثال بسيط...

سوف تحتاج https://github.com/douglascrockford/json-js/blob/master/json2.js..js.لهذا العمل ...

وبالطبع ملفات jquery المعتادة.

لصق هذا إلى خادم ويب

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

لصق هذا إلى صفحة ASPX الخاصة بك

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

Answer 2

عادة عند الحصول على خطأ "BLAH غير دالة" مع JQGrid، لأن الوحدة النمطية الصحيحة لم يتم تحميلها. يتم تعريف وظيفة addjsondata في ملف grid.base.js. يمكنك التحقق من وظيفة jqgridinclude () الخاص بك في ملف jquery.jqgrid.js وتأكد من أن grid.base.js يتم تضمينها كجزء من تهيئة متغير الوحدات الخاصة بك؟

Answer 3

هل قمت بالتحقق من متغير TBL هو الحصول على مرجع إلى مثيل JQGrid الخاص بك؟

حاول إضافة معرف إلى عنصر الجدول الخاص بك والحصول على مرجع إلى JQGrid مثل:

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

Answer 4

حسنا، أرى شيئا ما خطأ هنا:

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

إذا كنت تتساءل بالفعل لماذا تحصل على هذا الخطأ، فذلك لأن TBL لا يحتوي على هذه الوظيفة.

تحرير: حصلت على فضول، وفحص ما إذا أضاف JqGrid تلك الأساليب إلى كائن مرجع DOM. وفعلوا. (راجعت استخدام Firebug هنا: http://trirand.com/jqgrid/jqgrid.html.).

هناك شيء واحد قد يحدث هنا هو أن لديك جداول متعددة من التمرير "Scroll"، ويقوم مسجك بإرجاع الخطأ الخطأ.

Answer 5

ربما بعض المساعدة في هذا الرمز هنا نشر على تجاوز كومة؟jqgrid with asp.net webmethod و json العمل مع الفرز والترفيه والبحث واللينك - ولكن يحتاج إلى مشغلين ديناميكي

Answer 6

نظرا لأننا حصلنا على الكثير من الأسئلة ل ASP.NET Webforms و JqGrid، قررنا الذهاب إلى طريقة "المكون" وتنفيذ شيء مشابه جدا ل ASP: GridView. بهذه الطريقة، يمكنك التحكم في JQGrid باستخدام دورة حياة ASP.NET المألوفة، والأحداث، وفتحات البيانات، إلخ.

يمكنك رؤية بيتا من هذا عبر الإنترنت هنا - أكثر من 30 عينات متوفرة حاليا:

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

من المحتمل أن ينمو على الأرجح إلى منتج تجاري وكذلك (تراخيص مفتوحة المصدر ستكون متاحة) إذا كان هناك اهتمام بذلك. وفي الوقت نفسه، يمكنك استخدام العاكس للتحقق من المصادر للرجوع إليها (حتى نكتشف وسيلة لإتاحة المصدر عبر الإنترنت). نحن نستخدم SVN ل ASP.NET بدلا من Github من أجل JS الأساسية، لذلك لدينا بعض العمل في هذا الاتجاه.

نأمل أن يساعد هذا المجتمع.

Rumen Stankov تريراند

Answer 7

هذا سؤال قديم جدا، ومع ذلك، كنت أحصل على نفس القضية مؤخرا. لقد نشرت كيف حققت هذا على مدونة جديدة أحاول البدء.

قد تكون هناك طرق نظافة للقيام بذلك ولكن هذا عملت من أجلي. حتى الآن تمكنت من توسيع نطاق هذا المثال بسهولة إلى حد ما. العقبة التالية هي الحصول على loadonce للعمل.

يمكنك أن تجد مثالي هنا:

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

Answer 8

يتم وفاة الويب، لذلك نحتاج إلى التركيز على أحدث التقنيات مثل ASP.NET MVC. لقد وجدت تكامل asp.net jqgrid جديد هنا http://www.techdoubts.net/2017/05/full-integration-dynamic-jqgrid-asp-net-mvc.html.