المدونة ياهو واجهة المستخدم (YUIBlog)

تصفية البيانات المعروضة بواسطة YUI 3 DataTable

بالإضافة إلى الفرز، الذي تدعمه YUI 3 DataTable ، غالبا ما يكون من المفيد أن تكون قادرة على تصفية البيانات وعرض مجموعة فرعية من الصفوف المتوفرة. في منشئ الاستعلام القطعة في معرض 3 YUI يوفر واجهة المستخدم للبناء تعبير بسيط مرشح.

( انقر على شاشة للعب مع هذا المثال .)

تاريخ

تمت كتابة النسخة الأولى من قبل زميل يعمل معي على شبكة ياهو الناشر (YPN). (وغادر بعد ذلك بوقت قصير لمحاولة توظيف نزيه في اعقاب السابقة التي وضعتها Zawinski جيمي، وقال انه فتح حانة لبيع البيرة -.! منزل يخمر، لا تقل لكنني استطرادا ...) وبعد القرصنة معا النسخة الأولى من منشئ الاستعلام، التي ادلى بها في خطأ يظهر لي. وبعد بضعة أيام، واشتكى "، أنت أعاد كتابة كل شيء!" في الواقع، لقد وإعادة كتابة عدة مرات على مر السنين. YPN هو ذهب، ولكن أحدث YUI 2 نسخة من القوى منشئ الاستعلام عن جداول البيانات في APT .، منصة العرض ياهو، إدارة إعلانات الميناء لYUI 3 هو في الواقع أقل قدر من العمل ولقد كان علي القيام به لتوليد نسخة جديدة!

كيف على سبيل المثال يعمل

جوهر مثال على ذلك هو (1) تكوين منشئ الاستعلام التي تحدد كيف يمكن للمستخدم تصفية البيانات و (2) الملحق إلى Y.DataSource.Local التي تطبق فلتر. (للحصول على ترقيم الصفحات الخادم الجانب، سوف تقوم بإرسال البيانات إلى الخادم فلتر و خبز في الاستعلام SQL.)

لتكوين منشئ، على سبيل المثال يعرف لأول مرة قائمة من المتغيرات التي يمكن تصفيتها:

 فار var_list =
 [
	 {
		 الاسم: 'عنوان'،
		 نوع: 'سلسلة'،
		 النص: 'العنوان'
	 }،
	 {
		 الاسم: 'عام'،
		 نوع: 'عدد'،
		 النص: 'السنة'،
		 التحقق من الصحة: ​​"yiv-عدد صحيح: [0،2100] '
	 }،
	 {
		 اسم: "كمية"،
		 نوع: 'عدد'،
		 النص: "الكمية"،
		 التحقق من الصحة: ​​"yiv-عدد صحيح: [0]، '
	 }
 ]؛

يتم تعيين كل متغير اسم (مطابقة المفتاح في تكوين العمود DataTable) واكتب. أنواع الافتراضية هي 'سلسلة'، 'عدد'، و 'اختر'، ولكن يمكنك توسيع هذا من خلال بناء ملحقات مخصصة ( انظر أدناه ). لكل نوع التي تستخدمها، يجب ان تحدد أيضا مجموعة من العوامل:

 فار التقاط =
 {
	 سلسلة:
	 [
		 {قيمة: "يحتوي"، النص: 'يحتوي'}،
		 {قيمة: 'يبدأ، مع "نص:" يبدأ ب'}،
		 {قيمة: "ينتهي، مع" نص: "ينتهي مع '}
	 ]،

	 عدد:
	 [
		 {قيمة: "قدم المساواة"، النص: '='}،
		 {قيمة: 'أقل'، النص: '<='}،
		 {قيمة: 'أكبر'، النص: '=>'}
	 ]
 }؛

هذا يحدد مشغلي يمكن للمستخدم أن تطبق على كل نوع متغير. (اذا كنت بحاجة الى مجموعات مختلفة من المشغلين للمتغيرات من نوع الأساسية نفسها، يمكنك استنساخ نوع. انظر الإضافات أدناه.)

Y.FormManager يستخدم للتحقق من صحة القيم المدخلة من قبل المستخدم قبل أن يتم تطبيق عامل التصفية. مفتاح التحقق من صحة لكل متغير في تكوين منشئ الاستعلام أعلاه توفر بيانات CSS وهو ما فسره Y.FormManager.

إذا كان كل التصديقات تمرير، يتم إرسال طلب إلى مصدر البيانات. التمديد ل Y.DataSource.Local بسيط للغاية. انها مجرد تصفية البيانات قبل أن تعود النتائج:

 Y.extend (CustomDataSource، Y.DataSource.Local،
 {
	 _defDataFn: وظيفة (ه)
	 {
		 فار البيانات = filterData (e.data، e.request.filter)؛
		 فار استجابة =
		 {
			 النتائج: data.slice (e.request.recordOffset،
						 e.request.recordOffset + e.request.rowsPerPage)،
			 التعريف:
			 {
				 totalRecords: data.length
			 }
		 }؛

		 this.fire ("استجابة"، Y.mix ({استجابة: استجابة}، ه))؛
	 }
 })؛

و filter يتم الحصول على عنصر من عناصر طلب من QueryBuilder.toDatabaseQuery() ، والتي ترجع قائمة [variable, operator, value] tuples. نلاحظ أيضا أن الاستجابة يجب أن تتضمن معلومات عن العدد الإجمالي للسجلات، لأن هذه التغييرات يتم تطبيقها على أساس مرشح.

filterData() حلقات ببساطة على tuples من toDatabaseQuery() ، وتطبيق المشغلين مرشح محدد في جدول مستوى البحث، هما:

 مرشحات فار =
 {
	 سلسلة:
	 {
		 يحتوي على: وظيفة (القيمة، فلتر)
		 {
			 عودة (value.indexOf (فلتر)> = 0)؛
		 }،
		 'يبدأ، مع': وظيفة (القيمة، فلتر)
		 {
			 عودة (value.substr (0، filter.length) == فلتر)؛
		 }،
		 'تنتهي، مع': وظيفة (القيمة، فلتر)
		 {
			 عودة (value.substr (-filter.length) == فلتر)؛
		 }
	 }،

	 عدد:
	 {
		 على قدم المساواة: وظيفة (القيمة، فلتر)
		 {
			 عودة (parseInt (القيمة، 10) == parseInt (فلتر، 10))؛
		 }،
		 أقل: وظيفة (القيمة، فلتر)
		 {
			 عودة (parseInt (القيمة، 10) <= parseInt (فلتر، 10))؛
		 }،
		 أكبر: وظيفة (القيمة، فلتر)
		 {
			 عودة (parseInt (القيمة، 10) => parseInt (فلتر، 10))؛
		 }
	 }
 }؛

بعد كل هذا، DataTable يعرض ببساطة ما تحصل عليه من مصدر البيانات.

الإضافات

Y.QueryBuilder.plugin_mapping يحدد رسم خرائط لأسماء نوع إلى الطبقات الفعلية. يمكنك زيادة هذه الخرائط بطريقتين:

1. استنساخ نوع القائمة من خلال تحديد اسم جديد لنفس الفئة. هذا يسمح للمجموعات مختلفة من المشغلين لمختلف المتغيرات من نوع الأساسية نفسها.
2. خلق نوع جديد من خلال تنفيذ البرنامج المساعد API . دراسة الكود لملحقات القائمة هو أفضل وسيلة لالتعود على كيف يعمل هذا المعهد.

تعميم منشئ

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

نبذة عن الكاتب: جون ليندال ( @ jafl5272 على التغريد) هو واحد من المهندسين الرصاص بناء الأساس الذي ياهو! APT بنيت. سابقا، كان يعمل على شبكة ياهو الناشر.

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!