مسج EasyUI تطبيقات - إنشاء تطبيق CRUD

جمع البيانات والإدارة السليمة للبيانات هو تطبيق شبكة اتصال مشتركة ضرورية. CRUD يسمح لنا لإنشاء قائمة من الصفحات والسجلات تحرير قاعدة البيانات. ويوضح هذا البرنامج التعليمي كيفية استخدام إطار مسج EasyUI لتنفيذ CRUD DataGrid.

سوف نستخدم المكونات الإضافية التالية:

• datagrid: عرض قائمة من البيانات إلى المستخدم.
• الحوار: إنشاء أو تعديل معلومات المستخدم واحدة.
• شكل: شكل لتقديم البيانات.
• MESSAGER: يظهر بعض المعلومات التشغيلية.

الخطوة 1: إعداد قاعدة بيانات

سوف نستخدم قاعدة بيانات MySQL لتخزين معلومات المستخدم. إنشاء قاعدة بيانات والجدول 'المستخدمين.

الخطوة 2: إنشاء DataGrid لعرض معلومات المستخدم

من دون خلق شفرة جافا سكريبت DataGrid.

<جدول معرف = "المديرية العامة" عنوان = "بلدي المستخدمين" الطبقة = "easyui-datagrid" على غرار = "العرض: 550px؛ الطول: 250px"
		URL = "get_users.php"
		شريط الأدوات = "# شريط الأدوات"
		rownumbers = fitColumns "صحيح" = "صحيح" singleSelect = "صحيح">
	<THEAD>
		<tr>
			<ث الحقل = "الاسم الأول" العرض = "50"> الاسم </ تشرين>
			<الحقل ث = "اسم العائلة" العرض = "50"> اسم العائلة </ تشرين>
			<الحقل ث = "الهاتف" العرض = "50"> الهاتف </ تشرين>
			<ث الحقل = "البريد الإلكتروني" العرض = "50"> البريد الإلكتروني </ تشرين>
		</ tr>
	</ THEAD>
</ الجدول>
<شعبة معرف = "شريط الأدوات">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()"> مستخدم جديد </A>
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()"> تحرير المستخدم </A>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()"> إزالة العضو </A>
</ div>

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

DataGrid استخدام "عنوان URL" الملكية وتعيين "get_users.php"، وتستخدم لاسترجاع البيانات من الخادم.

ملف التعليمات البرمجية get_users.php

$ روبية = mysql_query ( "حدد * من المستخدمين ')؛
$ النتيجة = مجموعة ()؛
بينما ($ التوالي = mysql_fetch_object ($ روبية)) {
	array_push ($ نتيجة لذلك، $ صف).
}

json_encode الصدى ($ نتيجة)؛

الخطوة 3: مربع الحوار نموذج خلق

نحن نستخدم نفس مربع الحوار لإنشاء أو تعديل مستخدم.

<شعبة معرف = "أجهزة ..." الطبقة = "الحوار easyui" على غرار = "العرض: 400px؛ الطول: 280px؛ الحشو: 10px 20px"
		مغلقة = أزرار "الحقيقية" = "# أجهزة ... أزرار">
	<div الطبقة = "ftitle"> معلومات المستخدم </ div>
	<نموذج معرف = "وزير الخارجية" أسلوب = "آخر">
		<div الطبقة = "fitem">
			<تسمية> الاسم الأول: </ التسمية>
			<اسم الإدخال = "الاسم الأول" الطبقة = "easyui-validatebox" المطلوبة = "صحيح">
		</ div>
		<div الطبقة = "fitem">
			<تسمية> اسم العائلة: </ التسمية>
			<اسم الإدخال = "اسم العائلة" الطبقة = "easyui-validatebox" المطلوبة = "صحيح">
		</ div>
		<div الطبقة = "fitem">
			<تسمية> هاتف: </ التسمية>
			<اسم الإدخال = "الهاتف">
		</ div>
		<div الطبقة = "fitem">
			<تسمية> البريد الإلكتروني: </ التسمية>
			<اسم الإدخال = "البريد الإلكتروني" الطبقة = "easyui-validatebox" validType = "البريد الإلكتروني">
		</ div>
	</ النموذج>
</ div>
<شعبة معرف = "أجهزة ... أزرار">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()"> حفظ </A>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> الغاء </A>
</ div>

تم إنشاء هذا الحوار، ولا أي رمز جافا سكريبت:

الخطوة 4: إنشاء وتحقيق تحرير المستخدم

عند إنشاء المستخدم بفتح مربع الحوار ومسح بيانات النموذج.

تعمل NEWUSER () {
	$ ( '# أجهزة ...') الحوار ( 'فتح') الحوار ( 'setTitle'، 'مستخدم جديد ") ..؛
	. $ ( '# أف أم') شكل ( 'واضح')؛
	URL = "save_user.php '؛
}

عند تحرير مستخدم، يفتح مربع الحوار ويقوم بتحميل بيانات النموذج من الصف المحدد في datagrid.

الصف فار = $ ( '# المديرية العامة') datagrid ( 'getSelected')؛
إذا (صف) {
	$ ( '# أجهزة ...') الحوار ( 'فتح') الحوار ( 'setTitle'، 'تحرير المستخدم ") ..؛
	. $ ( '# أف أم') شكل ( 'الحمل'، صف).
	URL = "معرف update_user.php =؟ '+ row.id.
}

يتم تخزين شكل العودة "رابط" عندما يتم حفظ بيانات المستخدم عنوان URL.

خطوة 5: حفظ بيانات المستخدم

نحن نستخدم التعليمة البرمجية التالية إلى حفظ بيانات المستخدم:

saveUser وظيفة () {
	$ ( '# أف أم'). نموذج ( 'تقديم'، {
		رابط: رابط،
		onSubmit: وظيفة () {
			العودة $ (هذا) .form ( 'التحقق من صحة')؛
		}،
		نجاح: وظيفة (نتيجة) {
			فار نتيجة = وحدة التقييم ( '(' + نتيجة + ')')؛
			إذا (result.errorMsg) {
				.messager.show $ ({
					عنوان: 'خطأ'،
					جي اس: result.errorMsg
				})؛
			} {شيء آخر
				$ ( '# أجهزة ...') الحوار (الاغلاق) ؛. // إغلاق مربع الحوار
				$ ( '# المديرية العامة لل') datagrid ( 'تحديث')؛. // تحديث بيانات المستخدم
			}
		}
	})؛
}

قبل اعتماد النموذج، يتم استدعاء الدالة "onSubmit"، ويستخدم وظيفة للتحقق من قيم حقل النموذج. عندما قدمت قيم حقل النموذج بنجاح، إغلاق مربع الحوار وإعادة تحميل البيانات datagrid.

الخطوة 6: إزالة مستخدم

نحن نستخدم التعليمة البرمجية التالية إلى إزالة مستخدم:

destroyUser وظيفة () {
	الصف فار = $ ( '# المديرية العامة') datagrid ( 'getSelected')؛
	إذا (صف) {
		$ .messager.confirm ( 'تأكيد'، 'هل أنت متأكد أنك تريد تدمير هذا المستخدم؟'، وظيفة (ص) {
			اذا كان (ص) {
				$ .post ( 'Destroy_user.php'، {معرف: row.id}، وظيفة (نتيجة) {
					إذا (result.success) {
						$ ( '# المديرية العامة لل') datagrid ( 'تحديث')؛. // تحديث بيانات المستخدم
					} {شيء آخر
						$ .messager.show ({// مشاهدة رسالة خطأ
							عنوان: 'خطأ'،
							جي اس: result.errorMsg
						})؛
					}
				}، 'سلمان')؛
			}
		})؛
	}
}

قبل إزالة صف واحد، نحن سيتم عرض مربع حوار التأكيد الذي يتيح للمستخدم أن تقرر ما إذا كان لإزالة الواقع صفوف من البيانات. بعد أن تم نقل البيانات بنجاح، استدعاء الأسلوب "تحديث" لتحديث البيانات datagrid.

خطوة 7: تشغيل التعليمات البرمجية

فتح الخلية، تشغيل التعليمات البرمجية في المتصفح.

تحميل أمثلة مسج EasyUI

jeasyui-app-crud1.zip