يعرض DataGrid في EasyUI البيانات في نموذج الجدول ويوفر دعمًا وظيفيًا غنيًا لاختيار البيانات وتصنيفها وتجميعها وتحريرها. تم تصميم DataGrid لتقليل وقت التطوير ومنع المطورين من وجود معرفة محددة. إنه خفيف الوزن وغني بالميزات. دمج الخلايا ، العنوان متعدد العمود ، الأعمدة المجمدة والتذييل ليست سوى عدد قليل من الميزات.
1. مراجعة محتوى القسم 4
في القسم 4 ، استخدمنا Easyui لإنشاء شريط القائمة على اليسار ، وتظهر علامة التبويب المقابلة على اليمين من خلال النقر على خيار القائمة. في هذا القسم ، سوف نستخدم DataGrid لإكمال قسم علامة التبويب على اليمين. دعونا أولاً نلقي نظرة على ملف Aindex.jsp الأخير في القسم 4 (انظر أيضًا المحتوى في القسم 4):
2. عدة طرق لإنشاء عناصر التحكم في مخططات البيانات
توجد بيانات عرض بيانات DataGrid بتنسيق JSON ، لذلك يجب علينا أولاً حزم البيانات التي تم الحصول عليها من الخلفية إلى تنسيق Jason ، ثم تمريرها إلى مكتب الاستقبال للسماح DataGrid بعرض. في هذا القسم ، لن نحصل على بيانات من الخلفية. قم أولاً بإعداد ملف .json ، والذي يحتوي على بيانات بنفس التنسيق. بعد ذلك ، سوف ندع Datagird عرض ، أولاً جعل وظيفة العرض جيدًا ، ثم طلب بيانات الخلفية.
دعنا أولاً نلقي نظرة على تنسيق عرض بيانات DataGrid من المستند المرجعي لـ Easyui ، كما هو موضح في الشكل أدناه:
نحن ننظر إلى أسفل على طول المستند المرجعي وتجد أن مساحة بيانات البيانات يتم إنشاؤها من خلال <guand> ، وهناك ثلاث طرق لإنشائها:
الأول: إنشاء بيانات بيانات من عنصر جدول موجود ، وتحديد الأعمدة والصفوف والبيانات في HTML.
النوع الثاني: قم بإنشاء عنصر تحكم في بيانات DataGrid من خلال علامة <Chands>. استخدم علامة <h> لتحديد الأعمدة داخل الجدول.
النوع الثالث: استخدم JavaScript لإنشاء عنصر تحكم في بيانات DataGrid.
نحن نعتمد النوع الثالث ، باستخدام JS لإنشاء التحكم في بيانات DataGrid. أولاً ، علينا إعداد ملف يخزن بيانات تنسيق JSON. هناك العديد من ملفات JSON ضمن Webroot/jQuery-easyui-1.3.5/demo/dataGrid/. نختار dataGrid_data1.json ، ونسخه إلى دليل Webroot ، وتعديل المعلمات ، وسنعرض البيانات في ملف JSON لاحقًا. على النحو التالي:
{"Total": 10 ، "Rows": [{"Code": "Fi-Sw-01" ، "ProductName": "Koi" ، "Price": 10.00} ، {"Code": "K9-DL-01" ، {"CODE": "RP-SN-01" ، "ProductName": "Rattlesnake" ، "Price": 12.00} ، {"Code": "RP-Li-02" ، "ProductName": {"رمز": "fl-dsh-01" ، "ProductName": "Manx" ، "Price": 12.00} ، {"Code": "fl-dlh-02" ، "ProductName": {"رمز": "AV-CB-01" ، "ProductName": "Amazon Parrot" ، "Price": 92.00} ، {"Code": "AV-CB-03" ، "ProductName": "Amazon Parrot" ، يمكننا أن نرى أن تنسيق بيانات JSON هو: "key1": value1 ، "key2": value2. يمكن أن تكون كل قيمة صفيفًا ، ويتم حفظ بيانات Jason الجديدة في الصفيف.
مع ملف JSON ، يمكننا تصميم عنصر التحكم في بيانات DataGrid بعد ذلك. تم تصميم DataGrid بأكمله في Query.jsp ، لأن المحتوى الذي سيتم عرضه هو المحتوى في Query.jsp. لنلقي نظرة على صفحة Query.jsp:
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <seg@ includ@ include/head. $ (function () {$ ('#dg'). dataGrid ({// سيتم تغيير عنوان url لبيانات الطلب لطلب عنوان URL الخاص بنا: 'dataGrid_data.json' ، loadmsg: 'loading ......' ، queryparam: {type: '} ، لن يكون شريط التمرير الأفقي. console.info ("الفهرس" + index ، " + صف) if (index ٪ 2 == 0) {return 'background-color: #ffff ؛' عندما يكون العرض أكبر من 250 ، سيتم عرض شريط التمرير ، ولكن العمود المجمد ليس في شريط التمرير Frozencolumns: [[{Field: 'checkbox' ، checkbox: true} ، {field: 'code' ، title: 'number' ، width: 200}] العنوان ، الذي يتم عرضه للأشخاص لمشاهدة الأعمدة: [[{الحقل: "ProductName" ، العنوان: "اسم الفئة" ، العرض: 100 ، // استخدم لتنسيق قيمة العمود الحالي ، فإن الإرجاع هو تنسيق البيانات النهائي: الدالة (القيمة ، الصف ، الفهرس) }} ، {field: 'price' ، title: 'price' ، width: 100 ، styler: function (value ، row ، index) {// اضبط نمط الخلية الحالية ، ويتم تسليم السلسلة التي تم إرجاعها مباشرة إلى سمة النمط // console.info ( }}}]]}) ؛ }) ؛ </script> </head> <body> <table id = "dg"> </table> </body> </html>3. خصائص التحكم في بيانات
يمكننا أن نرى أنه إذا كنت تستخدم JS لإنشاء عنصر تحكم في بيانات البيانات ، فأنت بحاجة فقط إلى علامة <CHALOM> ، والتي يتم تنفيذها بشكل أساسي في JS. ضوابط DataGrid قوية للغاية. هنا نقوم بشكل أساسي بعروض أساسية. لمزيد من الوظائف الأخرى ، يرجى الرجوع إلى مستندات تطوير Easyui. نقوم الآن بإجراء تحليل على ملف Query.jsp أعلاه:
بادئ ذي بدء ، يحتوي عنصر التحكم على بيانات DataGrid على خصائصان: أحدهما خاصية DataGrid والآخر هو خاصية العمود . كما يوحي الاسم ، فإن خاصية DataGrid هي سمة تم إضافتها إلى عنصر التحكم في بيانات البيانات بأكمله ، وخاصية العمود مخصصة لعمود معين. هناك العديد من السمات في كل منها ، ولا يتم سوى بعض السمات الأساسية والاستخدام بشكل شائع هنا.
أهم شيء في خاصية DataGrid هو خاصية الأعمدة ، وهي صفيف يمكن أن ينشئ أعمدة متعددة ، انظر لقطة الشاشة أدناه:
لنلقي نظرة على التفاصيل الموجودة في سمة الأعمدة:
في سمة العمود ، يمثل الحقل اسم الحقل ، المقابل لمفتاح بيانات JSON ، ثم العنوان هو العنوان الذي سيتم عرضه للمستخدم. انظر ملف query.jsp. هناك بعض السمات الأساسية الأخرى التي يمكن إحالتها إلى وثيقة Easyui. الخصائص الأكثر أهمية والاستخدام بشكل شائع في خصائص الأعمدة هما تنسيق وتصميم ، والتي تستخدم لتنسيق قيمة العمود الحالي وضبط أنماط الخلية. دعونا ننظر بشكل أساسي إلى هاتين الممتلكتين:
دعونا نحلل بالتفصيل كيفية استخدام خصائص العمود هذين في سمة الأعمدة في Query.jsp أعلاه:
{الحقل: "ProductName" ، العنوان: "اسم الفئة" ، العرض: 100 ، // استخدم لتنسيق قيمة العمود الحالي ، والعائد هو تنسيق البيانات النهائية: الوظيفة (القيمة ، الصف ، الفهرس) {return "<span>" + value + "</span>" ؛ الوظيفة (القيمة ، الصف ، الفهرس) {// قم بتعيين نمط الخلية الحالية ، ويتم تسليم السلسلة التي تم إرجاعها مباشرة إلى سمة النمط // console.info ("val:" + value + "، الصف:" + صف + "، فهرس: // أظهر القيمة في Red}}}ثم دعونا نلقي نظرة على بعض خصائص التحكم في بيانات البيانات:
يمثل عنوان URL مصدر البيانات المراد عرضه. تعيين DataGrid_data.json هنا يعني أن مصدر البيانات هو ملف JSON هذا ويتم وضعه في دليل Webroot ؛
يمثل LoadMsG المعلومات المعروضة أثناء تحميل البيانات ؛
تعني QueryParams أن المعلمات تنتقل إلى الخلفية ، ولا يمكن استخدامها هنا ، لأننا لم نرتبط بعد بالخلفية ، ولكن فقط نعرض ملف JSON ، والذي سيتم استخدامه لاحقًا ؛
بعد ضبط FitColums على صحيح ، فهذا يعني أنه سيتم توسيع التوسع الأفقي تلقائيًا أفقيًا وسيتم تكييف عرض الشبكة التكيفية. وبهذه الطريقة ، لن تكون هناك أشرطة تمرير في الاتجاه الأفقي ، وليس هناك حاجة لتعيين العرض ؛
العرض هو العرض. إذا كانت البيانات طويلة جدًا ولا يمكن عرضها ، فسيظهر شريط التمرير في الاتجاه الأفقي ؛
بعد تعيين مخطط إلى صحيح ، فهذا يعني أنه يتم عرض عبور الحمار الوحشي. هذا هو نمط العرض. فقط جربها ؛
إذا تم ضبط Nowrap على صحيح ، فهذا يعني أنه عندما يكون هناك الكثير من البيانات ، فلن يتم لفها في خطوط ، وإلا عندما يكون هناك الكثير من البيانات على خط معين ، فسيكون ذلك قبيحًا ؛
عندما يتم ضبط ترقيم الأسطح على صحيح ، فهذا يعني أن وظيفة الترحيل قد تم تمكينها ؛
عندما يتم ضبط Singleselect على صواب ، يُسمح فقط بفحص الصفوف الفردية. إن التحديد كل وظيفة غير صالح ويستخدم بشكل أساسي لخانات الاختيار في العمود الأمامي ؛
تتمثل Frozencolums في تعيين الأعمدة المجمدة ، ولن تغير الأعمدة المحددة في Frozencolums الحجم. إذا تم تعيين {Field: 'checkbox' ، مربع الاختيار: TRUE} ، فهذا يعني أن هذا عمود مربع الاختيار ، يتم تحديده للمستخدم. إذا تم تعيين Singleselect أعلاه ، فيمكن اختيار واحد فقط ، وليس كل منهم ؛
Rowstyler هو أسلوب جميع الصفوف. المعلمتين هما فهرس الصف والصف. تم تعيين ما سبق أنه حتى الصفوف بيضاء والصفوف الفردية أصفر.
انتظر ... هناك خصائص أخرى لعناصر التحكم في بيانات البيانات ، يمكنك الرجوع إلى الوثائق الفنية لـ Easyui ، ولن أشرح لها واحدًا تلو الآخر هنا.
4. تأثير عرض بيانات البيانات
حسنًا ، بعد الانتهاء من Query.jsp ، نقوم بإعادة تشغيل Tomcat ، ثم ندخل الخلفية ، وانقر على إدارة الفئات في شريط القائمة على اليسار ، وستظهر علامة تبويب إدارة الفئات على اليمين ، ثم سيتم عرض بيانات JSON التي حددتها. يتم وضع بيانات Jason هذه في دليل Webroot بأنفسنا. في وقت لاحق ، سوف ندمج JSON و STRUTS للحصول على بيانات JSON التي يتم نقلها من الخلفية.
(ملاحظة: في النهاية ، سأقدم تنزيل الكود المصدري للمشروع بأكمله! الجميع مرحب بهم لجمع أو مشاركة)
العنوان الأصلي: http://blog.csdn.net/eson_15/article/details/51322262
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.