Xây dựng Dropdown Menu với Database Phần I

Trong các bài viết về hướng dẫ xây dựng website (Bắt đầu bằng bài viết Hướng dẫn xây dựng website :: Xây dựng cơ sở dữ liệu phần 1) mình đã giới thiệu cách viết Store procedure và Trigger để xây dựng menu đa cấp. Bạn có thể tham khảo những bài viết đó. Trong bài này mình giả sử rằng mình đã có dữ liệu dạng menu như sau: (Dữ liệu này chính là kết quả khi thực thi Store EXEC spTB_Category_GetTree @CateID = 0 của bài viết trong những bài viết hướng dẫn xây dựng website)

Trong bài viết "Xây dựng Dropdown Menu với html và Css". bạn thấy rằng cần xây dựng Style để hiển thị menu, còn nội dung menu thì là html. Vậy vấn đề của mình là làm sao từ Database có thể lấy ra được chuỗi html đó. Và kết quả menu như hình sau:

Vẫn là menu như trong bài viết trước nhưng dữ liệu ở đây được lấy từ Database

Đề làm được bạn cần viết một Store procedure như sau:

-- Create by hungbv@hmweb.com.vn CREATE PROCEDURE spGetMenuString AS BEGIN DECLARE @SQL nvarchar(4000) SET @SQL=' -- Khai báo mở sitemap SET @SQL=@SQL+N'<div id="wrapper"> <ul id="topnav">' -- Duyệt cây cấp 1 (Có Decen=0) DECLARE @CateID int, @CateName nvarchar(200), @Link nvarchar(200) Declare Cursor_Category Cursor For SELECT CateID, CateName, Link FROM TB_Category WHERE Decen=0 Open Cursor_Category Fetch next from Cursor_Category INTO @CateID, @CateName , @Link while @@Fetch_Status =0 BEGIN -- Nếu cây cấp 1 không có con thì đóng luôn TreeNode IF dbo.fuCountSubMenu(@CateID)=0 BEGIN SET @SQL=@SQL+ ' <li><a href="'+dbo.ufDomainName() + @Link + '">' + @CateName + '</a></li>' END -- Nếu cây cấp 1 có con thì mở duyệt cây cấp 2 ELSE BEGIN SET @SQL=@SQL+ ' <li><a href="'+dbo.ufDomainName() + @Link + '">' + @CateName + '</a> <ul class="children">' -- Duyệt cây cấp 2 DECLARE @CateID_2 int, @CateName_2 nvarchar(200), @Link_2 nvarchar(200) Declare Cursor_Category_2 Cursor For SELECT CateID, CateName, Link FROM TB_Category WHERE Decen=1 AND ParentID=@CateID Open Cursor_Category_2 Fetch next from Cursor_Category_2 INTO @CateID_2, @CateName_2 , @Link_2 WHILE @@FETCH_STATUS=0 BEGIN SET @SQL=@SQL+ ' <li><a href="'+dbo.ufDomainName() + @Link_2 + '">' + @CateName_2 + '</a></li>' FETCH NEXT FROM Cursor_Category_2 INTO @CateID_2, @CateName_2 , @Link_2 END Close Cursor_Category_2 DEALLOCATE Cursor_Category_2 SET @SQL=@SQL+ '</ul>' END FETCH NEXT FROM Cursor_Category INTO @CateID, @CateName , @Link END Close Cursor_Category DEALLOCATE Cursor_Category --Đóng sitemap SET @SQL=@SQL+' </ul> </div>' --print @SQL SELECT @SQL AS MenuString END

Khi thực thi Store này(EXEC spGetMenuString) chuỗi kết quả ta nhận được có dạng như sau:

<div id="wrapper"> <ul id="topnav"> <li><a href="http://hmweb.com.vn?module=18">Giới thiệu</a></li> <li><a href="http://hmweb.com.vn?module=19">Tin tức</a> <ul class="children"> <li><a href="http://hmweb.com.vn?module=19&child=26">Tin công nghệ</a></li> <li><a href="http://hmweb.com.vn?module=19&child=27">Tin Thể thao</a></li> <li><a href="http://hmweb.com.vn?module=19&child=28">Tin giáo dục</a></li> <li><a href="http://hmweb.com.vn?module=19&child=29">Tin kinh tế</a></li></ul> <li><a href="http://hmweb.com.vn?module=20">Công nghệ thông tin</a> <ul class="children"> <li><a href="http://hmweb.com.vn?module=20&child=30">Lập trình</a></li> <li><a href="http://hmweb.com.vn?module=20&child=31">Database</a></li> <li><a href="http://hmweb.com.vn?module=20&child=33">Văn phòng</a></li> <li><a href="http://hmweb.com.vn?module=20&child=33">Thế giới web</a></li> <li><a href="http://hmweb.com.vn?module=20&child=34">Thủ thuật</a></li> <li><a href="http://hmweb.com.vn?module=20&child=35">Quản trị mạng</a></li> <li><a href="http://hmweb.com.vn?module=20&child=36">Đồ họa</a></li></ul> <li><a href="http://hmweb.com.vn?module=21">Học tập</a> <ul class="children"> <li><a href="http://hmweb.com.vn?module=21&child=37">Giải tích 12</a></li> <li><a href="http://hmweb.com.vn?module=21&child=38">Hình học 12</a></li> <li><a href="http://hmweb.com.vn?module=21&child=39">Luyện thi</a></li> <li><a href="http://hmweb.com.vn?module=21&child=40">Ngoại ngữ</a></li></ul> <li><a href="http://hmweb.com.vn?module=22">Danh bạ web</a></li> <li><a href="http://hmweb.com.vn?module=23">Giải trí</a> <ul class="children"> <li><a href="http://hmweb.com.vn?module=23&child=41">Truyện ngắn</a></li> <li><a href="http://hmweb.com.vn?module=23&child=42">Truyện cười</a></li> <li><a href="http://hmweb.com.vn?module=23&child=43">Đọc và suy ngẫm</a></li> <li><a href="http://hmweb.com.vn?module=23&child=44">Mini Games</a></li> <li><a href="http://hmweb.com.vn?module=23&child=45">Video clip</a></li></ul> <li><a href="http://hmweb.com.vn?module=24">Liên hệ</a></li> <li><a href="http://hmweb.com.vn?module=25">Sơ đồ trang</a></li> </ul> </div>