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

التنسيق مع تاريخ YUI - الجزء الثاني

في الجزء الأول ، رأينا كيفية تنسيق تاريخ باستخدام المنسق YUI للتاريخ. في الجزء الثاني، وسوف نبحث في مواعيد التنسيق في قضية استخدام محدد - داخل DataTable السيطرة.

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

 <-! فردية YUI ملفات CSS -> 
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css"> 

 <-! فردية YUI ملفات JS -> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"> </ SCRIPT> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"> </ SCRIPT> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"> </ SCRIPT> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"> </ SCRIPT> 

المقبل، سنقوم بإضافة الترميز لإدخال تنسيق المعرفة من قبل المستخدم، ويؤدي إلى إعادة رسم DataTable:

 <label> الصيغة: <input type="text" id="date-format" value="٪b ٪d ٪Y" size="30"> </ التسمية> <نوع الإدخال = "زر" معرف = "التجسيد مائدة "قيمة =" إعادة رسم ">

 <div id="basic"> </ div> المصدر:

المفتاح هنا هو لتحديد المنسق تاريخ مخصص:

 YAHOO.namespace ("YAHOO.example.DateFormatter")؛ YAHOO.example.DateFormatter.formatDate = وظيفة (elCell، oRecord، oColumn، oData) {فار ش = document.getElementById ("تاريخ الشكل")؛ فار sFormat = ش . القيمة؛ فار شارع = YAHOO.util.Date.format (oData، {الشكل: sFormat})؛ elCell.innerHTML = شارع؛} 

وأخيرا، وهنا هو جافا سكريبت لإنشاء DataTable. لاحظ أن نشير إلى المنسق للعمود "التاريخ" لمنطقتنا:

 YAHOO.example.Data = {
     bookorders: [
         {الرقم: "PO-0167"، تاريخ: التاريخ الجديد (1980، 2، 24)، والكمية: 1، المبلغ: (4)}،
         {الرقم: "PO-0783"، تاريخ: تاريخ جديد ("3 يناير 1983")، والكمية: باطل، المبلغ: 12.12345}،
         {الرقم: "PO-0297"، تاريخ: التاريخ الجديد (1978، 11، 12)، والكمية: 12، المبلغ: 1.25}،
         {الرقم: "PO-1482"، تاريخ: تاريخ جديد ("11 مارس 1985")، والكمية: 6، مبلغ: 3.5}
     ]
 }؛

 فار myColumnDefs = [
	 {مفتاح: "ID"، قابل للترتيب: صحيح}،
	 {مفتاح: "تاريخ"، المنسق: YAHOO.example.DateFormatter.formatDate،
			 قابل للترتيب: صحيح، sortOptions: {defaultDir: YAHOO.widget.DataTable.CLASS_DESC}}،
	 {مفتاح: "كمية"، المنسق: YAHOO.widget.DataTable.formatNumber، قابل للترتيب: صحيح}،
	 {مفتاح: "كمية"، المنسق: YAHOO.widget.DataTable.formatCurrency، قابل للترتيب: صحيح}
 ]؛

 فار myDataSource = جديد YAHOO.util.DataSource (YAHOO.example.Data.bookorders)؛
 myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY؛
 myDataSource.responseSchema = {
	 الحقول: ["معرف"، "تاريخ"، "الكمية"، "كمية"]
 }؛

 فار myDataTable = جديد YAHOO.widget.DataTable ("أساسي"، myColumnDefs، myDataSource)؛

على سبيل المثال لدينا، فإننا سوف تشمل أيضا معالج حدث لإعادة رسم الجدول عند النقر فوق "إعادة رسم" الزر:

 YAHOO.util.Event.addListener ("تجعل المائدة"، "فوق"، myDataTable.render، myDataTable، صحيح)؛

وضع كل ذلك معا، وحصلنا على DataTable مع تاريخ في صيغة customizeable .

في هذا المثال، مصدر البيانات لدينا يحمل كائنات التاريخ الفعلي. هذا ليس ضروريا تماما. للتطبيق على دعم عالمي، يجب تخزين / التاريخ الآن المعلومات والتي تنتقل في UTC. على سبيل المثال، إذا كانت البيانات موجودة على خادم باعتبارها DATETIME حقل في قاعدة بيانات الخلية، ثم أن أفضل طريقة لتحويله إلى طابع زمني يونكس هو استخدام UNIX_TIMESTAMP() وظيفة:

 اختر معرف، UNIX_TIMESTAMP (pubdate) AS تاريخ والكمية والمبلغ من bookorders؛

محركات قواعد البيانات الأخرى لديها طريقة خاصة بهم من استخراج طابع زمني يونكس.

لا يمكن للمجموعة تكون النتيجة ثم JSON المشفرة باستخدام مكتبة JSON من جانب الخادم في اللغة التي تختارها، قبل أن يتم تمريرها مرة أخرى إلى المستعرض. في PHP، ويهمني أن نفعل شيئا من هذا القبيل:

 $ bookorders = مجموعة ()؛
 بينما ($ صف = mysql_fetch_assoc ($ نتائج))
 {
	 $ bookorders [] = $ صف؛
 }
 رأس ("نوع المحتوى: تطبيق / سلمان")؛
 صدى json_encode ($ bookorders)؛

على جانب العميل، وكنا الحصول على هذه البيانات باستخدام XHRDataSource :

 فار myDataSource = YAHOO.util جديد XHRDataSource ("http://hostname/your/script.php")؛
 myDataSource.responseType = YAHOO.util.DataSource TYPE_JSON.
 / / انظر وثائق مصدر البيانات للحصول على التفاصيل الكاملة

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

 YAHOO.example.Data = {
     "bookorders ': [
         {الرقم: "PO-0167"، تاريخ: 320227200، الكمية: 1، المبلغ: (4)}،
         {الرقم: "PO-0783"، تاريخ: 410428800، الكمية: باطل، المبلغ: 12.12345}،
         {الرقم: "PO-0297"، تاريخ: 279705600، كمية: 12، مبلغ: 1.25}،
         {الرقم: "PO-1482"، تاريخ: 479376000، كمية: 6، مبلغ: 3.5}
     ]
 }؛

 YAHOO.example.DateFormatter.formatDate = وظيفة (elCell، oRecord، oColumn، oData) {
	 فار document.getElementById = ايل ("تاريخ الشكل")؛
	 فار sFormat = el.value؛

	 فار oDate = تاريخ جديد (oData * 1000)؛

	 فار شارع = YAHOO.util.Date.format (oDate، {الشكل: sFormat})؛
	 elCell.innerHTML = شارع؛
 }

لاحظ أن نضرب الطابع الزمني يونكس بحلول عام 1000 بسبب الطوابع الزمنية يونيكس التي تلقيناها كانت في ثوان، في حين أن تاريخ البناء يتطلب ميلي ثانية.

هذا كل ما في الوقت الراهن. في الجزء الثالث، سوف نبحث في تنسيق التواريخ في مراقبة رسوم بيانية .

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

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