วิธีสร้าง Cascading Dropdown List

หน้าแรก jQuery วิธีสร้าง Cascading Dropdown List

---

ช่วงนี้ ไม่ได้เข้ามาอัพบล๊อคนานพอดู เพราะงาน SharePoint กองโตคะ –”  วันนี้มีคนถามเข้ามาเรื่อง Cascading Dropdown List ใน SharePoint 2010 เลยเข้ามาอัพเดทให้ทราบเลยแล้วกันนะคะ
ซึ่งวิธีนี้มีการนำ JQuery เข้ามาช่วยด้วย  ต่างจากที่เนตเคยอัพบล๊อค ในเรื่อง  วิธรการทำ Cascading Dropdown List ใน SharePoint 2007 เพราะเห็นว่าตัวใหม่นี้ใช้งานได้ดีกว่าคะ ไม่มีการรีเฟรชหน้าเมื่อมีการเลือก item ใน Combo Box 
           ตัวอย่างการสร้าง Cascading Dropdown List ใน SharePoint 2010 
            โดยในตัวอย่างนี้ จะเป็นการสร้าง Cascading Dropdown List ในส่วนของการเลือกภาควิชาในคณะนั้นๆ
          1. สร้าง Faculties List เก็บรายชื่อคณะ
 

          2. สร้าง Majors List เก็บรายชื่อภาควิชา  และสร้าง Column ที่ Lookup ค่าส่วนของคณะ มาจาก Faculties List ดังรูป

               * ส่วนของสร้าง Lookup column  ไปที่ List Settings >  Create Column และกำหนดค่าดังรูปด้านล่าง *

 

             เมื่อสร้าง Majors List เสร็จแล้ว จะปรากฎดังรูป

          3. ให้ Download ไฟล์ jquery-1.3.2.min.js และ jquery.SPServices-0.5.6.min.js ตาม Link ด้านล่างเลยคะ
                        jquery-1.3.2.min.js >> http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js
                        jquery.SPServices-0.6.0.min.js >> http://spservices.codeplex.com/  (ไฟล์ Zip เมื่อแตกมาแล้วจะได้ 2 ไฟล์)
          4. เมื่อ Download ไฟล์มาแล้ว ให้ Upload  ไฟล์เหล่านี้ ไปที่ Document Library  (ในรูปยังเป็น 0.5.8 อยู่หนะคะ)

                         

          5. สร้าง List ที่ต้องการใช้ Cascading Dropdown List  จากตัวอย่าง ชื่อ TestList

          

          6. จากนั้นใช้โปรแกรม SharePoint Designer เปิดไฟล์หน้า NewForm.aspx ของ List นี้ (อย่าลืม Checked Out File ที่จะแก้ไขนี้ก่อนนะคะ) 
              และค้นหา Tag   และแปะ  Code ด้านล่าง หลัง Tag นี้ได้เลยคะ 
              Download Code ได้ที่นี่คะ
          7. Save ไฟล์ที่แก้ไขนี้ และทำการ Check-in ด้วยนะคะ 
          8. หลังจากเราแก้ในไฟล์ NewForm.aspx ไปแล้ว ก็ต้องไปแก้ในไฟล์ EditForm.aspx ด้วยนะคะ เพราะไม่อย่างนั้น เราก็จะใช้ Cascading Dropdown List ตอนที่ New Item ขึ้นมาอย่างเดียว ซึ่งขั้นตอนที่ทำใน EditForm.aspx ก็เหมือนขั้นตอนที่ 6 ทุกอย่างคะ
          9. ทดสอบ โดยการไปเปิด TestList ที่สร้างจากขั้นตอนที่ 5 ดู พบว่า เมื่อเราเลือกคณะแล้ว ส่วนของภาควิชาก็จะแสดงเฉพาะทีมีอยู่ในคณะที่ได้เลือกเท่านั้น

 

                              ลองนำไปใช้งานดูนะคะ ^^

 Credit : http://www.c-sharpcorner.com/UploadFile/Roji.Joy/3130/

refer:  http://vipnetty.wordpress.com/2011/03/17/cascading-dropdown-list-sharepoint-2010/

ขึ้นไปด้านบน