jqgrid صفحة 1 من x pager

Question

أحاول معرفة كيفية استخدام وظيفة الترحيل الخاصة بـ JQGrid. حاليا أنا عالق في الصفحة 1 من 4. بغض النظر عما إذا كنت الضغط على الزر التالي أم لا. يبقى فقط على 1.

أنا أستخدم ASP.NET مع خدمة ويب لملء بيانات JSON الخاصة بي. كيف تلتقط الحدث من العميل إلى ملء العقار على خدمة الويب لإعادة القيمة الصحيحة؟

أي مساعدة موضع تقدير.

Answer 1

إذا الضغط على زر "التالي" ، فسيتم إرسال طلب جديد إلى الخادم. سيتضمن الطلب page=2 وعلى سبيل المثال ، rows=10 المعلمات كجزء من عنوان URL (إذا أراد المرء الحصول على الصفوف العشرة التالية من الصفحة الثانية).

يجب أن يقرأ رمز الخادم هذه المعلمات وإرسال صفوف البيانات المقابلة. يجب أن تبدو بيانات JSON التي ترسل من الخادم متابعة

{ 
  "total": "5", 
  "page": "2", 
  "records": "55",
  "rows" : [
    {"id" :"21", "cell" :["cell11", "cell12", "cell13"]},
    {"id" :"22", "cell" :["cell21", "cell22", "cell23"]},
      ...
    {"id" :"30", "cell" :["cell31", "cell32", "cell33"]},
  ]
}

(نرى http://www.trirand.com/jqgridwiki/doku.php؟id=wiki:Retrieving_Data#json_Data). لذلك يجب أن تحتوي البيانات على القيمة الصحيحة لـ page (الصفحة = 2). بشكل عام ، من الممكن ، أن لديك الآن بيانات أقل كما كان من قبل وتوصل إلى رقم الصفحة 1 عند الطلب للحصول على رقم الصفحة 2.

لذلك أقترح أن رمز الخادم الخاص بك حاليًا لا يعيد القيمة الصحيحة لـ page في الإخراج.

محدث: طيب جيف. أواصل إجابتي في JQGrid SetGridparam نوع البيانات: محلي ونشر كيف وعدت رمزًا بكيفية ترحيل جانب الخادم والفرز والبحث (أو البحث المتقدم).

بادئ ذي بدء ، لن أقوم بتنفيذ الفرز والبحث ومحاكاة الترحيل فقط حيث لديك مشكلة الآن. يجب تنفيذ الترحيل الحقيقي والفرز والبحث على أنه المقابل SELECT بيانات قاعدة بيانات SQL حيث توجد البيانات. الفرز يتبع إلى ORDER BY, ، البحث إلى WHERE والترحيل للإنشاءات مثل TOP(x), TOP(x) مع LEFT OUTER JOIN أو استخدام ROW_NUMBER() OVER(...) بنيات. لكن كل هذا ليس موضوع سؤالك. لذلك أقوم بتخفيض كل شيء إلى المحاكاة البسيطة لترحيل البيانات.

أبدأ برمز طريقة ويب ASMX:

public JqGridData TestMethod (int page, int rows, string sidx, string sord,
    bool _search, string searchField, string searchOper, string searchString) {
    // for advance search use "string filters" instead of the last three parameters
    int recordsCount = 205;

    int startIndex = (page - 1) * rows;
    int endIndex = (startIndex + rows < recordsCount) ?
                   startIndex + rows : recordsCount; 
    List<TableRow> gridRows = new List<TableRow> (rows);
    for (int i = startIndex; i < endIndex; i++) {
        gridRows.Add (new TableRow () {
            id = i,
            cell = new List<string> (2) {
                string.Format("Name{0}", i), 
                string.Format("Title{0}", i)
            }
        });
    }

    return new JqGridData () {
        total = (recordsCount + rows - 1) / rows,
        page = page,
        records = recordsCount,
        rows = gridRows
    };
}

حيث الفصول JqGridData و TableRow يتم تعريفها مثل ما يلي:

public class TableRow {
    public int id { get; set; }
    public List<string> cell { get; set; }
}
public class JqGridData {
    public int total { get; set; }
    public int page { get; set; }
    public int records { get; set; }
    public List<TableRow> rows { get; set; }
}

نتخطى أي التحقق من معلمات الإدخال من TestMethod لجعل رمز مثال أكثر قابلية للقراءة.

الآن رمز العميل:

$("#list").jqGrid({
    url: './MyTestWS.asmx/TestMethod',
    datatype: 'json',
    mtype: 'POST',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        if (postData.searchField === undefined) postData.searchField = null;
        if (postData.searchString === undefined) postData.searchString = null;
        if (postData.searchOper === undefined) postData.searchOper = null;
        //if (postData.filters === undefined) postData.filters = null;
        return JSON.stringify(postData);
    },
    jsonReader: {
        root: function (obj) { return obj.d.rows; },
        page: function (obj) { return obj.d.page; },
        total: function (obj) { return obj.d.total; },
        records: function (obj) { return obj.d.records; }
    },
    // you can also use following more simple form of jsonReader instead:
    // jsonReader: { root: "d.rows", page: "d.page", total: "d.total",
    //               records: "d.records", id: "d.names" }
    colModel: [
        { name: 'name', label: 'Name', width: 250 },
        { name: 'title', label: 'Title', width: 250 }
    ],
    rowNum: 10,
    rowList: [10, 20, 300],
    sortname: 'name',
    sortorder: "asc",
    pager: "#pager",
    viewrecords: true,
    gridview: true,
    rownumbers: true,
    height: 250,
    caption: 'My first grid'
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true});
//                {}, // use default settings for edit
//                {}, // use default settings for add
//                {}, // delete instead that del:false we need this
//                {multipleSearch : true} // enable the advanced searching
//                );

في الكود الذي أستخدمه نفس التقنية مثل في JQGrid SetGridparam نوع البيانات: محلي لكن مدونة serializeGridData الوظيفة مختلفة قليلا. لأننا نستخدم post وعدم الحصول على طريقة للحصول على البيانات من الخادم يجب دائمًا تعيين جميع معلمات الإدخال لطريقة الويب. على الجانب الآخر ، مجموعة JQGrid ليست دائمًا معلمات searchField, searchOper و searchString, ، ولكن فقط إذا _search=true. على سبيل المثال في الحمل الأول من JQGrid ، _search=false و searchField, searchOper و searchString لم يتم تعريفها في postData. لإصلاح المشكلة ، نهيئة المعلمات غير المحددة مع null.

لتنفيذ فرز واحد يحتاج إلى استخدام sidx (فهرس فرز) و sord (فرز الاتجاه: "asc" أو "desc") المعلمات.

لتنفيذ البحث الذي يحتاج المرء إلى استخدام معلمات أخرى _search, searchField, searchOper, searchString.

أثناء البحث المتقدم بدلاً من searchField, searchOper, searchString المعلمات المعلمة filters يجب استخدامها (انظر الخطوط المعلقة). يجب فك تشفير البيانات فيما يتعلق بسلسلة JSON. لذلك يجب تعيين multipleSearch : true في jqgrid. ال serializeGridData يجب استبدال الوظيفة

serializeGridData: function (postData) {
    if (postData.filters === undefined) postData.filters = null;
    return JSON.stringify(postData);
}

ويجب تغيير النموذج الأولي لطريقة الويب إلى

public JqGridData TestMethod (int page, int rows, string sidx, string sord,
    bool _search, string filters)

لفك تشفير المعلمة filters يمكن للمرء استخدام مثل هذا الرمز البسيط:

if (_search && !String.IsNullOrEmpty (filters)) {
    JavaScriptSerializer serializer = new JavaScriptSerializer ();
    jqGridSearchFilter searchFilter =
        serializer.Deserialize<jqGridSearchFilter> (filters);
    // use the searchFilter here
}

حيث الفصل jqGridSearchFilter يمكن تعريفها مثل ما يلي:

public class jqGridSearchFilterItem {
    public string field { get; set; }
    public string op { get; set; }
    public string data { get; set; }
}
public class jqGridSearchFilter {
    public string groupOp { get; set; }
    public List<jqGridSearchFilterItem> rules { get; set; }
}

آمل أن تكون هذه المعلومات كافية لك لتنفيذ أي نوع من استخدام JQGrid فيما يتعلق بأسلوب الويب ASMX.

لقد استخدمت هنا أبسط بيانات إرسال من الخادم إلى العميل مع إضافي id خارج البيانات الرئيسية. إذا كان أحد الأعمدة التي لديك في الجدول هي id, ، يمكنك تقليل البيانات قليلاً إلى الخادم. نرى JQGrid 3.7 لا يعرض الصفوف في Internet Explorer لمزيد من التفاصيل.

Answer 2

حسنًا ، أنا أجيب على هذا الأمر لأنني أخذت ما قاله أوليغ أعلاه ، لكنني اكتشف بالضبط ما يعنيه.

مكالمة .ajax الخاصة بي في وظيفة تمر بعد postdata كمعلمة. لم أتمكن من العثور على أي وثائق حول هذه المعلمة ، لكنني اعتقدت أن هذا هو المكان الذي تم فيه احتواء قيمة الصفحة. كما ترون ، قمت بتنبيه مع postdata.page و low وها ، لقد حصلت على قيمة (استنادًا إلى نقرة الزر التالي).

لذلك قمت بإنشاء معلمة في خدمة الويب الخاصة بي تسمى الصفحة (عدد صحيح).

مثل ملاحظة جانبية ، يمكنك تمرير قيمة عدد صحيح من jQuery إلى ASP.NET WebService مثل هذا:

data: "{'page':'" + postdata.page + "'}"

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

function processrequest(postdata) {
alert(postdata.page);
$(".loading").show();
$.ajax({
    type: "POST",
    data: "{'page':'" + postdata.page + "'}",
    datatype: "json",
    url: "../webServices/myTestWS.asmx/testMethod",
    contentType: "application/json; charset-utf-8",
    complete: function (jsondata, stat) {
        if (stat == "success") {
            var thegrid = jQuery("#list")[0];
            var jsonObject = (eval("(" + jsondata.responseText + ")"));
            thegrid.addJSONData(jsonObject.d);
            $(".loading").hide();
        } else {
            $(".loading").hide();
            alert("Error with AJAX callback");
        }
    }
});

}