Bạn hiện đang ngoại tuyến, hãy chờ internet để kết nối lại

Trình duyệt của bạn không được hỗ trợ

Bạn cần cập nhật trình duyệt của mình để sử dụng trang web.

Cập nhật lên Internet Explorer phiên bản mới nhất.

Step by Step: Tạo cascading lookup trong SharePoint 2010 sử dụng jQuery

Về tác giả:

Bài viết này được cung cấp bởi MVP Nguyễn Bá Quang. Microsoft chân thành cảm ơn những MVP đã chia xẻ những kinh nghiệm chuyên môn của mình với những người sử dụng khác. Bài viết này sẽ được đăng trên website hoặc blog của MVP sau đây. Nếu bạn muốn xem các bài viết khác được chia xẻ bởi MVP, vui lòng nháy chuột vào đây.
TÓM TẮT
Trong SharePoint 2010 form, bạn có 2 drop-down list A và B. Bạn muốn khi chọn giá trị cho List A thì các giá trị có thể chọn cho list B tiếp theo được lọc dựa theo giá trị lựa chọn của list A.
THÔNG TIN THÊM
Lấy ví dụ cụ thể cho việc nhập địa chỉ. Bạn có 4 custom list như sau:
- Cities (Tỉnh thành phố)
- Districts (Quận huyện): List này có một Column là City được lookup từ Cities list ở trên bằng Title
- Ward (Phường xã): List này có một Column là District được lookup từ Districts list ở trên bằng Title
- Addresses (Địa chỉ): List này có 4 Column
o Title: cột mặc định
o City: Lookup từ Cities list bằng Title
o District: Lookup từ Districts list bằng Title
o Ward: Lookup từ Ward list bằng Title
Với SharePoint, mặc định khi chúng ta chọn City thì danh mục District phía dưới vẫn giữ nguyên (như hình dưới)



Giờ chúng ta sẽ tùy biến để khi chúng ta chọn City là Hà Nội như ở trên thì danh mục District chỉ hiển thị ra các quận huyện thuộc Hà Nội.

Các bước thực hiện như sau: Chúng ta sẽ sử dụng jQuery trong thư viện SPServices để làm việc này

  1. Trước hết chúng ta cần phải tải về thư viện mới nhất SPServices (version 0.5.6) tại địa chỉ http://spservices.codeplex.com/
  2. Tiếp đến chúng ta download phiên bản mới nhất của jQuery (version 1.4.2) tại địa chỉ http://docs.jquery.com/Downloading_jQuery
  3. Chúng ta mở SharePoint site bằng SharePoint Designer 2010. Trong phần Navigation click vào “All Files”.
  4. Trong “All Files” tab, chúng ta thêm mới một folder và đặt tên là “jQuery Libraries” như hình dưới.
  5. Trong thư mục jQuery Libraries, chúng ta Import 2 files .js vừa mới download từ thư viện SPServices và jQuery ở trên bao gồm như hình dưới.
  6. Đóng SharePoint Designer 2010 lại
  7. Bây giờ chúng ta mở Addresses list bằng IE và chọn Modify Defaul Form Web Part à Default New Form như hình dưới.
  8. Trong Design page, chúng ta chọn Add a Web Part link.
  9. Chúng ta chọn Content Editor Web part để Add vào trang.
  10. Chọn “Click here to add new content” liên kết.
  11. Chọn Edit HTML Source như hình dưới.
  12. Chúng ta thêm đoạn scripts sau vào HTML Source page dialog.
    <script src="/TimeSheet/jQuery%20Libraries/jquery-1.4.2.min.js" type="text/javascript"/> <script src="/TimeSheet/jQuery%20Libraries/jquery.SPServices-0.5.6min.js" type="text/javascript"/> <script language="javascript" type="text/javascript">         $(document).ready(function() {            $().SPServices.SPCascadeDropdowns({                relationshipList: "Districts",                relationshipListParentColumn: "City",                relationshipListChildColumn: "Title",                relationshipListSortColumn: "ID",                parentColumn: "City",                childColumn: "District",                promptText: "Choose District...",                debug: true            });            $().SPServices.SPCascadeDropdowns({                relationshipList: "Ward",                relationshipListParentColumn: "District",                relationshipListChildColumn: "Title",                relationshipListSortColumn: "ID",                parentColumn: "District",                childColumn: "Ward",                promptText: "Choose Ward...",                debug: true            });        });</script>       
  13. Bấm OK để kết thúc.
  14. Quay trở lại tạo mới một Addresses item, chúng ta thấy kết quả hiện thị như ý muốn như hình dưới.

Tuyên bố Không chịu trách nhiệm Nội dung Giải pháp Cộng đồng

CÔNG TY MICROSOFT VÀ/HOẶC CÁC NHÀ CUNG CẤP CỦA HỌ KHÔNG BẢO ĐẢM VỀ TÍNH PHÙ HỢP, ĐỘ TIN CẬY HOẶC TÍNH CHÍNH XÁC CỦA THÔNG TIN VÀ HÌNH ẢNH LIÊN QUAN Ở ĐÂY. MỌI THÔNG TIN VÀ HÌNH ẢNH NHƯ VẬY ĐƯỢC CUNG CẤP “NHƯ NGUYÊN MẪU” MÀ KHÔNG CÓ BẤT KỲ BẢO ĐẢM NÀO. MICROSOFT VÀ/HOẶC CÁC NHÀ CUNG CẤP CỦA HỌ KHÔNG CHỊU TRÁCH NHIỆM ĐỐI VỚI MỌI BẢO ĐẢM VÀ ĐIỀU KIỆN VỀ THÔNG TIN VÀ HÌNH ẢNH LIÊN QUAN NÀY, BAO GỒM CẢ MỌI BẢO ĐẢM VÀ ĐIỀU KIỆN LIÊN QUAN VỀ TÍNH THƯƠNG MẠI, PHÙ HỢP CHO MỘT MỤC ĐÍCH ĐẶC BIỆT, NỖ LỰC CỦA CÔNG VIỆC, TƯ CÁCH VÀ CAM KẾT KHÔNG VI PHẠM. BẠN ĐỒNG Ý MỘT CÁCH CỤ THỂ LÀ KHÔNG CÓ TRƯỜNG HỢP NÀO MÀ MICROSOFT VÀ/HOẶC CÁC NHÀ CUNG CẤP CỦA HỌ BỊ RÀNG BUỘC VÀO BẤT KỲ THIỆT HẠI TRỰC TIẾP, GIÁN TIẾP, TRỪNG PHẠT, TÌNH CỜ, ĐẶC BIỆT, HỆ QUẢ HOẶC BẤT KỲ THIỆT HẠI DẠNG NÀO, BAO GỒM NHƯNG KHÔNG GIỚI HẠN THIỆT HẠI DO MẤT MÁT, DỮ LIỆU HOẶC LỢI ÍCH, XẢY RA HOẶC TRONG MỌI CÁCH LIÊN QUAN ĐẾN VIỆC SỬ DỤNG HOẶC KHÔNG THỂ SỬ DỤNG THÔNG TIN VÀ HÌNH ẢNH LIÊN QUAN CÓ Ở ĐÂY, DÙ LÀ DỰA VÀO HỢP ĐỒNG, LỖI GÂY THIỆT HẠI, SƠ SUẤT, NGHĨA VỤ PHÁP LÝ HOẶC BẤT KỲ CƠ SỞ NÀO KHÁC, NGAY CẢ NẾU MICROSOFT HOẶC BẤT KỲ NHÀ CUNG CẤP NÀO CỦA HỌ ĐÃ ĐƯỢC TƯ VẤN VỀ KHẢ NĂNG BỊ THIỆT HẠI.
Thuộc tính

ID Bài viết: 2420085 - Xem lại Lần cuối: 11/17/2010 01:58:00 - Bản sửa đổi: 2.1

  • Microsoft SharePoint Designer 2010
  • Microsoft SharePoint Foundation 2010
  • kbprb kbtshoot kbstepbystep kbgraphxlink kbmvp KB2420085
Phản hồi