طريقة انشاء جدول ديناميكي بواسطة الحزمة displayTag

بدأه العيافـي في 20 مايو 2010 · 12 رد · 3,038 مشاهدة · في JavaEE

مشاركة: واتساب X فيسبوك تيليجرام

#120 مايو 2010 في 01:21 صاحب الموضوع

السلام عليكم ورحمة الله وبركاته

بناءا على طلب احد الزملاء بشرح طريقة استخدام حزمة الجداول الديناميكية displayTag

اول فائدة هذه الحزمة

1- تقوم بتوفير خاصيه تعدد الصفحات

2- تصدير الجدول الى الصيخ التالية excel,xml,pdf,csv

اولا تحتاج في مشروعك الى ملفات الجار التالية

اولا قمت بانشاء كائن باسم Car

public class Car {

	private String name;
	private String model;
	private String color;

	public Car() {
	}
.
.
.
getters
setters

ثم انشأة طريقة تعود بقائمة من الكائن السابق

	public static List<Car> getCars(){
		List<Car>cars=new ArrayList<Car>();
		cars.add(new Car("C", "2010", "red"));
		cars.add(new Car("F", "2009", "WHITE"));
		cars.add(new Car("E", "2005", "gray"));
		cars.add(new Car("A", "2006", "black"));
		cars.add(new Car("Y", "2004", "white"));
		return cars;
	}

الان في صفحة JSP سأعرض ابسط جدول بقيم افتراضية

<%

request.setAttribute("list", TestData.getCars());
%>

<display:table name="list"   pagesize="2"  export="true" class="display">
	<!-- column tags-->
	<display:caption>
		Title
	</display:caption>


	<display:column property="name" title="name"  sortable="true" headerClass="header"></display:column>	
	<display:column property="model" title="model"  sortable="true" headerClass="header" ></display:column>
	<display:column property="color" title="color"  sortable="true" headerClass="header" ></display:column>


	<display:footer>
			<td colspan="3" class="footer">footer</td>	
	</display:footer>

</display:table>

اكيد ان الكود واضح ولكن سأقوم بذكره الخصائص

name="list"

اسم القائمة في requset

pagesize="2"

عدد الصفوف المرغوب عرضها في صفحة JSP الواحده.

عند الرغبة في عرض جميع الصفوف و الغاء خاصيه تعدد الصفحات، قم بالغاء هذه الخاصية.

export="true"

هذه اذا رغبت باضافة خاصية التصدير، وعند اعطاء هذه الخاصية القيمة false سيتم الغاء خاصية التصدير

class="display"

هذا اسم صنف CSS

_______________________________________

<display:caption>Title</display:caption>

هذا رأس الجدول ، علما بانه يمكنك اضافة كود HTML بدلا من النص

_______________________________________

<display:column property="name" title="name"  sortable="true" headerClass="header"></display:column>

property="name"

name هي اعد عناصر الكائن Car

title="name"

هذا سيكون اسم العمود، كما انه يمكنك استخدام الخاصية titleKey بدلا من title اذا اردت استخدام قرائة النصوص من ملف properties

sortable="true"

عندما تكون القيمة true فهذا يعني امكانيه ترتيب العمود بالضغط على اسم العمود

headerClass="header"

اسم صنف CSS لعنوان العمود

______________________________________________________________________________

<display:footer><td colspan="3" class="footer">footer</td></display:footer>

هذا تذييل الجدول كما هو واضح بالامكان اضافة كود html

المرفق عبارة عن المثال كامل

display-example.rar

تم تعديل هذه المشاركة بواسطة العيافـي في 20 مايو 2010 في 01:40

#220 مايو 2010 في 01:36

المثال المرفق السابق يحتوي على صفحتين JSP لعرض الجدول

في الصفحة list2.jsp

قمت بتغيير الاعدادات الافتراضية ليكون الجدول بالصورة التالية

الكود

<%

request.setAttribute("list", TestData.getCars());
%>
 requestURI="list2.jsp" هنا اضفت خاصية جديدة وظيفته تحديد مسار action page ا //
<display:table name="list" requestURI="list2.jsp"  pagesize="2"  export="true" class="display">
	<!-- column tags-->
	<display:caption>
		Title
	</display:caption>


	<display:column property="name" title="name"  sortable="true" headerClass="header"></display:column>	
	<display:column property="model" title="model"  sortable="true" headerClass="header" ></display:column>
	<display:column property="color" title="color"  sortable="true" headerClass="header" ></display:column>


	<display:footer>
			<td colspan="3" class="footer">footer</td>	
	</display:footer>

//قمت هنا بتغيير الاعدادات في نوع الملفات المسموح التصدير لها، 
//قمت بتغيير نصوص خاصية تعدد الصفحات ، وكما هو واضح بان الكود عبارة عن HTML قد تحتاج الى اضافة صور مثلا ، فالحزمة تدعم ذلك

	<display:setProperty name="export.excel" value="true"></display:setProperty>
	<display:setProperty name="export.excel.label" value="تصدير الى اكسل"></display:setProperty>
	<display:setProperty name="export.excel.filename" value="test.xls"></display:setProperty>

	<display:setProperty name="export.xml" value="false"></display:setProperty>
	<display:setProperty name="export.pdf" value="false"></display:setProperty>
	<display:setProperty name="export.csv" value="false"></display:setProperty>

	<display:setProperty name="export.banner" value="<div class='exportlinks'>تصدير الى: {0}</div>"></display:setProperty>



	<display:setProperty name="paging.banner.full" value="<span class='pagelinks'>[<a href='{1}'>الاول</a>/<a href='{2}'>السابق</a>] {0} [<a href='{3}'>التالي</a>/<a href='{4}'>الاخير</a>]</span>"></display:setProperty>
	<display:setProperty name="paging.banner.first" value="<span class='pagelinks'>[الاول/التالي] {0} [<a href='{3}'>التالي</a>/<a href='{4}'>الاخير</a>]</span>"></display:setProperty>
	<display:setProperty name="paging.banner.last" value="<span class='pagelinks'>[<a href='{1}'>الاول</a>/<a href='{2}'>السابق</a>] {0} [التالي/الاخير]</span>"></display:setProperty>
	<display:setProperty name="paging.banner.onepage" value="<span class='pagelinks'>{0}</span>"></display:setProperty>

</display:table>

لمعرفة بقية الخصائص التي تدعمها الحزمة يمكنك رؤية الملف displaytag.properties الموجود في ملف scr

يوجد ايضا خاصية رائعه في الحزمة

بامكانك تحديد اعمده تصدر الى صيغة excel ولا تصدر الى صيغة xml مثلا

مثلا

<display:column property="name" title="name" sortable="true" media="excel" headerClass="header"></display:column>

باضافة الخاصيه media="excel" فهذا يعني ان هذا العمود يصدر الى اكسل و لا يصدر الى صيغة اخرى.

و اخيرا عند الرغبة في التصدير الى pdf يجب ادراج ملف الجار itext للمشروع

وسلامتك

ارجوا ان يكون الشرح واضح

#320 مايو 2010 في 03:05

بارك الله فيك يا أخي, درس جيد جدا

تم التثبيت في المواضيع المميزه

تم تعديل هذه المشاركة بواسطة {هويدي} في 20 مايو 2010 في 03:06

#421 مايو 2010 في 08:08

السلام عليكم ورحمة الله وبركاته

جزاكم الله كل خير أخي الكريم على الاستجابة السريعة

وان شاء الله هطبق كلامك

ولو فيه اي مشكلة :wink: سأرسل اليك برد ان شاء الله

#522 مايو 2010 في 17:30

السلام عليكم ورحمة الله وبركاته

أخي الكريم العيافـي جزاكم الله كل خير

لقد قمت بتطبيق ما متبتة وكانت النتيجة والحمد لله ايجابية واشتغل المثال دون اي مشاكل

ولكن لم يتم تلوين الخلايا وظهر ت باللون العادي (خلفية الصفحة بيضاء)

فلم اعرف السبب؟؟؟؟؟؟

فلماذا؟؟؟؟؟؟

علما بانني استخدم JDeveloper Studio 11.1.1.0.1

وليس نتبينز أو اكلبس

وجزاكم الله كل خير

#623 مايو 2010 في 19:38

لم يتم التلوين بسبب عدم وجود ملف CSS

في المثال المرفق يوجد ملف باسم DisplayTheme.css

ارفقه في مشروعك و ادرجة في صفحة JSP التي انشأتها

#71 يونيو 2010 في 16:28

جزاكم الله كل خير

#89 يونيو 2010 في 06:38

مقال متميّز ،

سأستخدمه من أجل التصدير إلى اكسل ،

كنت في السابق استخدم Jquery datatable ، لانشاء وتعبئة الجدول في الClient بعد نقل البيانات على شكل JSON ، ولكن لو استقبلت من أمري ما استدبرت ما استخدمته .. ولاستمعت لنصيحتك باستخدام displayTag بدلاً من datatable .

تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#99 يونيو 2010 في 09:05

التصدير ليست الميزه الوحيده .. جربها و تأكد ان كثير من احتياجاتك ستوفرها هذه الحزمة.

سأضيف هنا نقطة لم اذكرها سابقا

بالنسبة للوسم display:setProperty

يقرا من ملف باسم displaytag.properties ، بامكانك اعادة كتابتة بالشكل الذي يناسبك، بحيث لا تحتاج الى كتابة الوسم display:setProperty في كل صفحة JSP تحتوى على جدول ديناميكي

كما انه يمكنك اضافة اكثر من ملف على حسب اللغات التي يدعمها موقعك.

#1012 يونيو 2010 في 09:28

لدي سؤال أخوي " العيافي " .

الان أنشأت جدول ، ولكن لنفرض أنني أريد عدد كبير من الأعمدة ، كيف أقوم بذلك ،

لنفرض أن لدينا هذا الـbeans :

public class EEE {
 private String id;
 private String title;
 private String mark;
.
.

هذا يعني أنه لايمكنني الا انشاء ثلاثة أعمدة ( كل عمود يقابل member ) ، كيف يمكنني أن أكتب شيء كهذا :

public class EEE {
 private String id;
 private String title;
private Vector<String> marks;
.

وبما أن لدي " مصفوفة درجات " .. فسأنشئ أكثر من عمود ..

لا أستطيع أن أتحكم بـ DisplayTag في هذه الحالة ؟

هل السؤال واضح ؟

تطبيق طمأنينة ، نسخة بيتا على أندرويد

عبدالله الشمّري - Al-Shammari

CodingAlone.com

twitter @abshammeri

abshammeri AT gmail.com

github : abshammeri

#1112 يونيو 2010 في 11:47

عزيزي الشمري

سؤالك واضح، ويمكنك تنفيذ هذا،

في الوسم

<display:table name="list" id="car"  pagesize="2"  export="true" class="display">

لاحظ اني اضفت القيمة

id="car"

ثانيا استخدم الكود التالي

	<c:forEach var="mark" items="${car.marks}"  varStatus="status">
            <display:column title="mark ${status.count}"  sortable="true" headerClass="header" >
            	${mark}
            </display:column>
    </c:forEach>

قمت باستخدام loop بواسطة JSTL

علما بان استبدال Vector الى Map افضل إذا كنت ترغب في استخدام ال Key كأسم للعمود

ناتج الاضافة