في القسم السابق ، أكملنا وظائف الاستعلام عن المنتجات وحذفها. في هذا القسم ، سنقوم بوظائف إضافة المنتجات وتحديثها.
1. أضف فئة المنتج
1.1 إضافة تصميم واجهة المستخدم الفئة
دعنا نتحدث عن الفكرة أولاً: أولاً ، عندما ينقر المستخدم على "إضافة منتج" ، يجب أن يظهروا نافذة واجهة مستخدم من "إضافة منتج" (لاحظ أن هذا لا يقفز إلى JSP الجديد ، ولديه Easyui صفحة واحدة فقط). بعد ظهور نافذة "إضافة المنتج" ، يجب قفل جميع نوافذ الفئة الأم (أي ، النقر على أماكن أخرى غير صالح ، ويمكن تشغيل نافذة إضافة المنتجات فقط). بعد أن يملأ المستخدم المعلومات ، انقر فوق "إضافة" على النافذة التي ظهرت حديثًا ، أرسل الطلب إلى Struts2. ثم يحصل Struts2 على معلمات الطلب ويقوم بإجراء الإضافة من قاعدة البيانات. وبهذه الطريقة ، اكتمل عملية الخلفية. في الوقت نفسه ، يحتاج مكتب الاستقبال إلى تحديث الصفحة الحالية وإعادة تشغيل جميع المنتجات.
لقد فحصنا وثائق Easyui ووجدنا أن هناك طريقتان لإنشاء نافذة جديدة. إما إنشاءه مع العلامات أو باستخدام JS. نستخدم JS لإنشائها هنا ، لكننا نحتاج إلى مربع <div> ، على النحو التالي:
بالإضافة إلى ذلك ، لا تحتاج إلى تقليل النافذة الجديدة التي ننشئها أو تعظيمها ، ولكن يجب قفل الشاشة. لذلك يتم تعيين هذه الخصائص في div. ما تحتاج إلى الانتباه إليه هنا هو وظيفة قفل الشاشة. لأن <viv> يتم وضعها بشكل مختلف ونطاق الشاشة المقفلة يختلف أيضًا. نحتاج إلى قفل ملء الشاشة ، لذلك نحتاج إلى وضع <viv> في Aindex.jsp. يجب إنشاء محتوى Query.jsp (بما في ذلك زر الإضافة) في Aindex.jsp ، ومحتوى Save.jsp (وهذا هو واجهة المستخدم الإضافة التي نريد عرضها). لذلك ، بعد النافذة المنبثقة ، نحتاج إلى قفل نطاق Aindex.jsp ، لذلك يجب وضع <Div> في Aindex.jsp ، والتنفيذ المحدد كما يلي:
أضف <viv> إلى Aindex.jsp's <body>
انسخ الرمز كما يلي: <div id = "win" options = "الانهيار: false ، قابلة للحد
ثم نتقن جزء إضافة فئات في Query.jsp:
{iconcls: 'icon-add' ، النص: "إضافة الفئة" ، المعالج: function () {parent. $ ("#win"). نافذة ({// لأن <div> يتم وضعها في anIndex.jsp ، يجب عليك أولاً استدعاء العنوان الوالد: FrameBorder = "0"/> '}) ؛ }} كما يتضح من الكود أعلاه لإضافة الفئات ، نقدم محتويات ملف Save.jsp في دليل الويب/الفئة. بعد ذلك ، نكتمل Save.jsp:
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01> styled//en" الهامش: 5px ؛ } </style> <script type = "text/javaScript"> $ (function () {$ ("input [name = type]"). ValidateBox ({// هذه هي وظيفة التحقق من "اسم الفئة". $ ("#cc") على قائمة القائمة المنسدلة للمسؤول box.combobox ({// أرسل الطلب إلى طريقة الاستعلام في حساب المعالجة. هنا تحتاج إلى إرجاع البيانات التي تمت معالجتها إلى هذا الجانب لعرضها ، وبالتالي فإن الخلفية تحتاج إلى تعبئة البيانات إلى تنسيق JSON وإرسالها إلى عنوان url: "account_query. القائمة المنسدلة. $ ("#ff"). الشكل ("DisableValidation") ؛ // تسجيل الحدث الزر. هذا هو ، ما يفعله المستخدم عند النقر فوق "إضافة" $ ("#btn"). انقر فوق (function () {// تمكين التحقق $ ("#ff"). form ("enablevalidation") ؛ // إذا كان التحقق من النجاح ، أرسل البيانات إذا ($ ( "Category_Save.Action" ، // إرسال الطلب إلى طريقة الحفظ في الفئة للتعامل مع النجاح: الدالة () {بعد النجاح // إذا كان ذلك ناجحًا ، فسيتم إغلاق الوالد الحالي. $ ("#Win") الإدارة '] "). get (0) .ContentWindow. $ ("#dg "). dataGrid (" reload ") ؛}}) ؛}}) ؛ }) ؛ </script> </head> <body> <form id = "ff" method = "post"> <viv> <label for = "name"> اسم المنتج: </label> <input type = "text" name = "type"/> </siv> <biv> <blabel> adminator: </label> <input id = "cc name = "account.id"/> </viv> <viv> <label> for = "hot"> نقطة ساخنة: </label> نعم <إدخال type = "radio" name = "hot" بيانات البيانات = "iconcls: 'icon-add'"> إضافة </a> </div> </pong> </body> </html> تم الانتهاء من عرض مكتب الاستقبال وطلبات إرسال ، والخطوة التالية هي القيام ببرنامج الواجهة الخلفية.
1.2 التنفيذ المنطقي لإضافة فئات <BR /> سيرسل مكتب الاستقبال بيانات إلى طريقة حفظ في الفئة للتنفيذ ، لذلك نحتاج فقط إلى كتابة الإجراء ، لأن الخلفية تحتاج فقط إلى إضافة الفئة إلى قاعدة البيانات ولا تحتاج إلى إرجاع البيانات إلى مكتب الاستقبال ، لذلك فهي بسيطة نسبيًا ، فقط كتابة الإجراء مباشرة:
controller ("CategoryAction") scope ("prototype") فئة الفئة العامة يمتد BASEACTION <Category> {// حذف الرموز الأخرى ... void public save () {system.out.println (model) ؛ categoryservice.save (نموذج) ؛ }}وبهذه الطريقة ، سيتم تخزين البيانات في قاعدة البيانات. بعد ذلك ، سيقوم مكتب الاستقبال بتحديث الشاشة وعرض فئات المنتجات المضافة حديثًا. دعونا نلقي نظرة.
سننتهي من إضافة فئات المنتجات. دعنا نفعل تحديث فئة المنتج أدناه.
2. تحديث فئة المنتج
2.1 تحديث فئة تصميم واجهة المستخدم
فكرة تحديث فئات المنتجات هي في الأساس تلك المضافة أعلاه. أولاً ، تظهر نافذة واجهة المستخدم ، ثم يملأ المستخدم البيانات ويرسلها إلى الخلفية ، وتحديث قاعدة البيانات في الخلفية ، ويقوم بتحديث الشاشة في مكتب الاستقبال. ما زلنا نستخدم الطريقة أعلاه لإنشاء نافذة واجهة المستخدم. <div> لا يلزم تغيير المربع ، كل ما نحتاج إلى فعله هو تحسين الكود لجزء "تحديث فئة" في Query.jsp:
{iconcls: 'icon-edit' ، النص: 'فئة التحديث' ، المعالج: function () {// judge ما إذا كانت هناك سجلات صف محددة ، استخدم getSelections للحصول على جميع الصفوف المحددة var rows = $ ("#dg"). datagrid ("getSeSelections") ؛ if (raws.length == 0) {// up stup message $ .messager.show ({// يشبه بناء الجملة الأساليب الثابتة في Java. } if if (raws.length! = 1) {// رسالة مطالبة بشعبية $ .messager.show ({// يشبه بناء الجملة الأساليب الثابتة في جافا. العنوان الكائن المباشر: "خطأ مطالبة" ، msg: } آخر {// 1. PAGE PAGE PARTER. $ ("#win"). window ({title: "إضافة الفئة" ، العرض: 350 ، الارتفاع: 250 ، المحتوى: // 2. }}}} دعنا نحلل رمز JS أعلاه: احصل أولاً على الخط ليتم تحديثه من قبل المستخدم. إذا لم يتم تحديده ، فسيتم مطالب المستخدم بتحديد سجل واحد على الأقل للتحديث. إذا تم تحديد أكثر من سجل واحد ، فسيتم مطالب المستخدم أيضًا بتحديث سجل واحد فقط في وقت واحد. بعد اكتمال كل هذه الأحكام ، قام المستخدم بفحص سجل ، ثم نبدأ في إنشاء نافذة واجهة مستخدم جديدة. هنا ، كما هو مذكور أعلاه ، نقدم محتوى صفحة update.jsp في دليل الويب/الفئة على الويب. لنلقي نظرة على محتوى صفحة update.jsp:
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01> styled//en" الهامش: 5px ؛ } </style> <script type = "text/javaScript"> $ (function () {// dataGrid object var dg = parent. $ ("iframe [title = 'category management']"). get (0) .ContentWindow. $ ("#dg") ؛ تحتاج إلى إرجاع البيانات التي تمت معالجتها إلى هذا الجانب لعرضها ، لذلك تحتاج الخلفية إلى حزم البيانات بتنسيق JSON وإرسالها إلى عنوان URL: "Account_query.action" ، Valuefield: "ID" ، Textfield: "Login" ، / /قائمة القائمة المنسدلة الخاصة بنا ، تُظهر القائمة المتمثلة في القائمة المدمجة: "Auto". // لتعيين عرضين في نفس الوقت: يجب أن يسمح المربع المنسدلة بالتحرير}) ؛ المعرف: الصفوف [0] .ID ، النوع: الصفوف [0] .Type ، Hot: Rows [0] .hot ، 'account.id': rows [0] .Account.id // easyui لا يدعم حساب. // بعد صدى البيانات ، قم بتعيين وظيفة التحقق $ ("input [name = type]"). // تعطيل التحقق $ ("#ff"). الشكل ("DisableValidation") ؛ . "الفئة _update" ، // عند تقديم الطلب إلى طريقة التحديث ، تنفذ النجاح: الدالة () }) ؛ </script> </head> <body> <form id = "ff" method = "post"> <viv> <label for = "name"> اسم الفئة: </label> <input type = "text" name = "type"/> </div> <div> <bility for = "hot" spost: </label type = "type =" radio " value = "false"/> </viv> <viv> <label for = "account"> المسؤول: </label> <!-قائمة منسدلة نستخدم التحميل عن بُعد لتحميل بيانات المسؤول-> <input id = "cc type = "hidden" name = "id"/> </viv> `</form> </body> </html> الفرق بين التحديث والإضافة هو أنه يتم صدى البيانات أولاً ، ثم هناك قائمة منسدلة لعرض بيانات المسؤول ، لأن المسؤول الذي تنتمي إليه يحتاج أيضًا إلى التحديث. دعونا نلقي نظرة على الكود أعلاه. أولاً ، استخدم طريقة التحميل عن بُعد لتحميل بيانات المسؤول. أولاً ، أرسل طلبًا إلى الواجهة الخلفية. بعد معالجة طريقة الاستعلام لحساب الخلفية ، يتم تعبئة بيانات المسؤول في تنسيق JSON وإعادتها ، بحيث يمكن الحصول على بيانات المسؤول. بعد الحصول عليها ، يمكن صدى البيانات. لنلقي نظرة على برنامج الخلفية:
2.2 تحديث التنفيذ المنطقي للفئات
controller ("baseaction") scope ("النموذج الأولي") فئة عامة baseaction <T> يمتد الإجراءات التي تدعمها requestaware ، sessionaware ، applicationaware ، modeldriven <t> {// استخدم لتحميل البيانات ليتم تعبئتها في تنسيق json للعودة إلى المقدمة. فيما يلي تنفيذ قائمة GET Method المحمية <T> jsonlist = null ؛ . إرجاع "jsonlist" ؛ }} بعد ذلك ، دعنا نهيئ ملف struts.xml:
<action name = "account_*" method = "{1}"> <result name = "jsonlist" type = "json"> <param name = "root"> jsonlist </param> <param name = "excludeproperties"> <!-[0] .pass ، [1] .pass-> <! بعد الانتهاء من الصدى ، تكون عملية التحديث هي عملية التحديث. بالطبع ، هناك أيضًا وظيفة التحقق. تمامًا مثل الإضافة ، تقوم عملية التحديث بتمرير الطلب إلى طريقة التحديث الخاصة بـ CateDAction لتنفيذها ، وهو أمر بسيط نسبيًا:
Controller ("CategoryAction") scope ("prototype") فئة الفئة العامة يمتد BASEACTION <Category> {// حذف الأساليب الأخرى ... تحديث الفراغ العام () {system.out.println (model) ؛ categoryservice.update (نموذج) ؛ }}في هذه المرحلة ، أكملنا عمليات إضافة وتحديث فئات المنتجات.
العنوان الأصلي: http://blog.csdn.net/eson_15/article/details/51347734
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.