ملخص استخدام jqgrid (الكل كلاسيكي)

يدعم أنواعًا متعددة من مجموعات البيانات للتعاون كمصادر بيانات

يمكن لـ JQGrid ربط ثلاثة أنواع من البيانات: XML و JSON والصفائف. إن استخدام أنواع البيانات المختلفة هو تعيين سمة نوع البيانات بشكل أساسي ، وقيمها هي "XML" ، "JSON" ، "محلي" (صفيف)

 $ ("#grid1"). jqgrid (........ نوع البيانات: "xml" ، .......) ؛

ما يلي يسرد تنسيقات أنواع البيانات المختلفة

تنسيق XML:

 <Rows> <page> </page> <total> </total> <rasks> </rearce> <row id = "rowid"> value1 </cell> .........

تنسيق JSON

{"Page": "Number" ، "الصفوف": [{name1: 'value1' ، name2: 'value2' ، .... namen: 'valuen'} ، .... {..}] ،

تنسيق الصفيف

 var datas = [{name1: 'value1' ، name2: 'value2' ، ...... namen: 'valuen'} ، .... {....}] ؛ mydata [i]) ؛}

أو تعيين سمة البيانات

 $ ("#grid1").

وظيفة العمليات الإحصائية

اضبط FootRrow على حدث True وربط GridComplete.

 $ ("#grid1"). sum_total = $ ("#grid1"). getCol ('total' ، false ، 'sum') ؛ $ ("#grid1")

عند الإحصائيات ، استخدم طريقة getCol. المعلمة الأولى هي قيمة اسم Colmode ، ويتم تعيين المعلمة الثانية على False. خلاف ذلك ، سيتم إرجاع صفيف بدلاً من البيانات. والثالث هو تعيين طريقة الإحصائيات ، بما في ذلك "Sum" و "Avg" و "Count".

نوع

فقط انقر على عنوان العمود وفرز العمود بترتيب تصاعدي أو تنازلي. اضبط ما إذا كان العمود يسمح بالفرز ، وضبط الفرز في خصائص العمود. في الوقت نفسه ، بالنسبة لأنواع البيانات المختلفة ، يجب تعيين SortType المقابل ، بما في ذلك عدد صحيح Int/INTEGR ، وعفو/رقم/عملة نوع النقطة العائمة ، وتاريخ التاريخ ، ونص النص ، ووظائف الوظائف لتنفيذ قواعد الفرز المخصصة.

 $ ("#grid1").

التجميع

 var mydata = [{id: "1" ، invdate: "2010-05-24" ، الاسم: "اختبار" ، ملاحظة: "ملاحظة" ، ضريبة: "10.00" ، المجموع: "2111.00"} ، {id: "2" ، invdate: "2010-05-25" ، الاسم: "Test2" ، ملاحظة: "Note2" ، الضريبة: "20.00" ، المجموع: "320.00"} ، {id: "3" ، invdate: "2007-09-01" ، name: "430.00"} ، {id: "4" ، invdate: "2007-10-04" ، الاسم: "اختبار" ، ملاحظة: "ملاحظة" ، ضريبة: "10.00" ، المجموع: "210.00"} ، {id: "5" ، invdate: "2007-10-05" ، الاسم: ، المجموع: "320.00"} ، {id: "6" ، invdate: "2007-09-06" ، الاسم: "Test3" ، ملاحظة: "Note3" ، الضريبة: "30.00" ، Total: "10.00" ، المجموع: "210.00"} ، {id: "8" ، invdate: "2007-10-03" ، الاسم: "Test2" ، ملاحظة: "note2" ، المبلغ: "300.00" ، الضريبة: "Test3" ، ملاحظة: "Note3" ، المبلغ: "400.00" ، الضريبة: "30.00" ، المجموع: "430.00"} ، {id: "11" ، invdate: "2007-10-01" ، name: .00 "} ، {id:" 12 "، invdate:" 2007-10-02 "، الاسم:" Test2 "، ملاحظة:" Note2 "، المبلغ:" 300.00 "، الضريبة:" 20.00 "، المجموع:" 320.00 "، {id: TE3 "، المبلغ:" 400.00 "، الضريبة:" 30.00 "، المجموع:" 430.00 "} ، {id:" 14 "، invdate:" 2007-10-04 "، الاسم: nvDate: "2007-10-05" ، الاسم: "Test2" ، ملاحظة: "Note2" ، المبلغ: "300.00" ، الضريبة: "20.00" ، المجموع: "320.00"} ، {id: "16" ، invdate: "2007-09-06" ، الاسم: .00 "، الضريبة:" 30.00 "، المجموع:" 430.00 "} ، {id:" 17 "، invdate: 03 "، الاسم:" Test2 "، ملاحظة:" Note2 "، المبلغ:" 300.00 "، الضريبة:" 20.00 "، المجموع:" 320.00 "} ، {id:" 19 "، invdate:" 2007-09-01 ، name: ، المجموع: "430.00"} ، {id: "21" ، invdate: "2007-10-01" ، الاسم: "اختبار" ، ملاحظة: "ملاحظة" ، المبلغ: "200.00" ، الضريبة: "10.00" ، المجموع: "210.00"} ، {id: "22" ، ملاحظة: "Note2" ، المبلغ: "300.00" ، الضريبة: "20.00" ، المجموع: "320.00"} ، {id: "23" ، invdate: "2007-09-01" ، الاسم: ، {id: "24" ، invdate: "2007-10-04" ، الاسم: "اختبار" ، ملاحظة: "ملاحظة" ، المبلغ: "200.00" ، الضريبة: "10.00" ، المجموع: "210.00"} ، {id: "25" ، invdate: "2007-10-05" ، الاسم: ount: "300.00" ، الضريبة: "20.00" ، المجموع: "320.00"} ، {id: "26" ، invdate: "2007-09-06" ، الاسم: E: "2007-10-04" ، الاسم: "اختبار" ، ملاحظة: "ملاحظة" ، المبلغ: "200.00" ، الضريبة: "10.00" ، المجموع: "210.00"} ، {id: "28" ، invdate: "2007-10-03" ، name: x: "Local" ، الارتفاع: "Auto" ، Rownum: 30 ، Rowlist: [10،20،30] ، Colnames: ['inv no' ، 'date' ، 'client' ، 'come' ، 'Total' ، 'Total' ، 'Notes'] ، Colmodel: [{name: "id" ، exp: "id" ، width: 60 ، SortType: "int"} ، {name: 'invdate' ، index: 'invdate' ، width: 90 ، sorttype: "date" ، formatter: "date"} ، {name: "name" ، expe: "name" ، width: 100 ، editable: true} ، Formatter: "Number" ، edability: true} ، {name: 'tax' ، index: 'tax' ، width: 80 ، align: "right" ، sorttype: "float" ، exable: true} ،} Fortable: false}] ، pager: "#plist48" ، viewRecords: true ، sortname: 'name' ، setwing: true ، groupingview: {groupfield: ['name']} ، Caption:

هناك أيضًا فرز أكثر تعقيدًا ، لذلك دعونا نلقي نظرة على عروض JQGrid!

فلتر

لا يقوم تصفية JQGrid بتصفية المحتوى في الشبكة ، ولكن في الواقع تصفية البيانات في قاعدة البيانات.

HTML:

 <table id = "s2list"> </table> <div id = "s2pager"> </viv>

جافا سكريبت:

 jQuery ("#s3list"). jQuery ("#s3list"). jqgrid ('navbuttonadd' ، "#s3pager" ، {caption: "Toggle" ، title: "Toggle Search Toolbar" }}) ؛ jQuery ("#s3list"). jQuery ("#s3list"). jqgrid ('filtertoolbar') ؛

إضافة وحذف وتعديل والتحقق من شريط الأدوات وشريط ترقيم الصفحات

يأتي JQGrid مع شريط الترحيل ، حيث يمكنك إضافة أزرار وتعديلها وحذفها والاستعلام.

أضف طبقة أخرى إلى HTML ، وتخزن هذه الطبقة شريط الترحيل:

 <div id = "pager"> </viv> $ ("#grid1"). من خلال ضبط القيمة المنطقية ، فإنه يحدد ما إذا كان يجب عرض jQuery ("#grid1"). 280 ، ReloadaftersUbmit: false} ، // تحرير الخيارات {الارتفاع: 280 ، aroadaftersubmit: false} ، // أضف خيارات {reloadaftersUbmit: false} ، // del chorse {} // خيارات البحث) ؛

تذكر تعيين القيمة القابلة للتحرير إلى True للأعمدة القابلة للتحرير في Colmodel قبل التحرير.

اقرأ البيانات على الصفحات

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

 $ ("#grid1").

يستخدم المثال التالي فقط البيانات المحلية ، والتي تحقق أيضًا تأثير التمرير وتحويل الصفحات.

 jQuery ("#scrolling"). jqgrid ({scroll: 1 ، datatype: "local" ، البيانات: mydata ، الارتفاع: 100 ، العرض: 600 ، colnames: ['index' ، 'name' ، 'code'] ، colmodel: [{id: id '، ex:' id '، width: 65} } ، {name: 'note' ، index: 'note' ، width: 100}] ، rownum: 5 ، gridview: true ، pager: '#pscrolling' ، sortname: 'item_id' ، viewRecords: true ، sortorder: "asc" ، caption:

الأب والابن الطاولة

يمكن استخدام الأشياء الفرعية من خلال الإعدادات التالية

 $ ("#grid1"). jqgrid (...... // تمكين Subtable Subgrid: True ، subgridurl: '.........' ، // اضبط سمات subtribable subtable subtabledel: [{name: ['name1' ، 'name2' ، ......

إعدادات الأشياء الفرعية هنا هي الأكثر أساسية. لمزيد من المعلومات حول السمات ، يرجى الرجوع إلى http://www.trirand.com/jqgridwiki/doku.php؟id=wiki:SubGrid

الحصول على/تعيين قيمة الخلية

للحصول على قيمة خلية معينة ، يتم استدعاء GetCell (Rowid ، ICOL). يمكن أن يكون ICOL إما فهرس الموضع المدرج حاليًا في Colmodel أو قيمة الاسم. ملاحظة: لا يمكن استخدام هذه الطريقة عند تحرير الصفوف أو الخلايا. في هذا الوقت ، لا تكون القيمة التي تم إرجاعها هي القيمة المتغيرة ، ولكن القيمة الأصلية.

تعيين قيمة مكالمات خلية معينة setCell (RowId ، colname ، البيانات ، الفئة ، الخصائص). رويد: معرف الصف الحالي ؛ Colname: اسم العمود ، أو فهرس موضع العمود ، بدءًا من 0 ؛ البيانات: قم بتغيير محتوى الخلية ، وإذا كانت فارغة ، فلن يتم تحديثها ؛ الفئة: إذا كانت سلسلة ، فسيتم إضافتها إلى CSS للخلية باستخدام طريقة AddClass ، وإذا كانت صفيف ، فسيتم إضافتها مباشرة إلى خاصية النمط ؛ الخصائص: تعيين خاصية الخلية colmodel.

بالطبع ، يمكنك أيضًا الحصول على/تعيين صفوف أو أعمدة. هنا يمكنك التحقق من المزيد من الطرق للحصول على/تعيين/إضافة http://www.trirand.com/jqgridwiki/doku.php؟

معرف = ويكي: الأساليب

التحقق من البيانات

من خلال تعيين خاصية Editrules لـ Colmodel ، يمكنك التحقق من بيانات الإدخال

 jQuery ("#grid_id"). jqgrid ({... colmodel: [... {name: 'price' ، ... ، edittrules: {edithidden: true ، regal: frue ......} ، exable: true} ، ...] ...}) ؛

فيما يلي خيارات التحقق المتاحة

تعيين أعمدة مخططة

 jQuery ("#ghcs"). عمود}، .....] }

محرر

يأتي عمود قالب JQGrid مع بعض المحررين الأساسيين للغاية ، بما في ذلك: مربع نص "Text" أحادي الخط ، مربع نص "Textarea" متعدد الخط ، "تحديد" مربع "مربع الاختيار" ، مربع مربع محمل ملفات "مربع مربع" و "مربع كلمة المرور" ، زر "صورة" ، مربع محمل ملف مخصص ".

تعيين edittype في Colmodel

 jQuery ("#grid_id"). jqgrid ({... colmodel: [... {name: 'price' ، ... ، reditable: true ، edittype: 'text' ، editoptions: {size: 10 ، maxlength: 15} ......} ، ...}) ؛

يعد تعديل بعض الإعدادات للمحرر ، ويمكن لمربع النص ضبط الحجم ، MaxLength ، إلخ ؛ يمكن لخانة الاختيار ضبط القيمة ؛

ditoptions: {value: "نعم: لا"}

المربع المنسدلة في هذا النموذج

EditOptions: {value: "val1: text1 ؛ val2: text2 ؛ val3: text3"}

لمزيد من المعلومات ، يرجى الرجوع إلى http://www.trirand.com/jqgridwiki/doku.php؟id=wiki:Common_Rules#EditType

عمود القالب يدعو المحررين الآخرين

يستخدم المحرر الذي تم تقديمه أعلاه فقط عناصر النماذج لـ HTML ، والمحرر الذي تم تقديمه أدناه هو استدعاء المكون الإضافي.

 <script src = "js/my97datepicker/wdatepicker.js" type = "text/javaScript"> </script> <script type = "text/javaScript {wdatepicker () ؛}) ؛} .... jQuery ("#grid_id").

هنا ، يسمى المكون الإضافي My97DatePicker كمحرر تقويم.

إذا كنت ترغب في وضع عناصر تحكم متعددة في عمود قالب ، يمكنك استخدام الطرق التالية

 jQuery ("#grid_id"). jqgrid ({... efrinserTrow: function (rowid ، adata) {var controls = "" ؛ // control وضع في القالب ...... $ ("#grid_id").

يتم تحقيق ذلك بالفعل عن طريق تحرير HTML في خلية الشبكة.

نقل تقليد اختيار الخلية excel

بعد تعيين وضع تحرير الخلية ، يمكنك القفز إلى الخلية التي تحتاج إلى تحريرها من خلال مفاتيح التنقل لأعلى وأسفل واليمين واليسر

 jQuery ("#grid_id"). jqgrid ({... celledit: true ، cellsubmit: 'clientArray' ، // حدد القيمة الافتراضية لموقع تخزين محتوى الخلية 'Remote' ...}) ؛

ما سبق هو ملخص لاستخدام JQGrid الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!