DWZ相关标签class
在这里感谢DWZ所有工作人员为我们提供了这么好的框架。支持国产!
<div id="leftside">
< div id ="sidebar_s" >< div class ="collapse" >
< div class ="toggleCollapse" >< div > div > div >
div >
div >
< div id ="sidebar" >
< div class ="toggleCollapse" >< h2 > 主菜单 h2 >< div > 收缩 div > div >
< div class ="accordion" fillSpace ="sidebar" >
< div class ="accordionHeader" >
< h2 >< span > Folder span > 界面组件 h2 >
div >
< div class ="accordionContent" >
< ul class ="tree treeFolder" >
< li >< a href ="tabsPage.html" target ="navTab" > 主框架面板 a >
< ul >
< li >< a href ="main.html" target ="navTab" rel ="main" > 我的主页 a > li >
< li >< a href ="http://www.baidu.com" target ="navTab" rel ="page1" > 页面一(外部页面) a > li >
< li >< a href ="demo_page1.html" target ="navTab" rel ="page1" fresh ="false" > 替换页面一 a > li >
< li >< a href ="demo_page2.html" target ="navTab" rel ="page2" > 页面二 a > li >
< li >< a href ="demo_page4.html" target ="navTab" rel ="page3" title ="页面三（自定义标签名）" > 页面三 a > li >
< li >< a href ="demo_page4.html" target ="navTab" rel ="page4" fresh ="false" > 测试页面（fresh="false"） a > li >
ul >
li >
< li >< a > 常用组件 a >
< ul >
< li >< a href ="w_panel.html" target ="navTab" rel ="w_panel" > 面板 a > li >
< li >< a href ="w_tabs.html" target ="navTab" rel ="w_tabs" > 选项卡面板 a > li >
< li >< a href ="w_dialog.html" target ="navTab" rel ="w_dialog" > 弹出窗口 a > li >
< li >< a href ="w_alert.html" target ="navTab" rel ="w_alert" > 提示窗口 a > li >
< li >< a href ="w_list.html" target ="navTab" rel ="w_list" > CSS表格容器 a > li >
< li >< a href ="demo_page1.html" target ="navTab" rel ="w_table" > 表格容器 a > li >
< li >< a href ="w_removeSelected.html" target ="navTab" rel ="w_table" > 表格数据库排序+批量删除 a > li >
< li >< a href ="w_tree.html" target ="navTab" rel ="w_tree" > 树形菜单 a > li >
< li >< a href ="w_accordion.html" target ="navTab" rel ="w_accordion" > 滑动菜单 a > li >
< li >< a href ="w_editor.html" target ="navTab" rel ="w_editor" > 编辑器 a > li >
< li >< a href ="w_datepicker.html" target ="navTab" rel ="w_datepicker" > 日期控件 a > li >
ul >
li >
< li >< a > 表单组件 a >
< ul >
< li >< a href ="w_validation.html" target ="navTab" rel ="w_validation" > 表单验证 a > li >
< li >< a href ="w_button.html" target ="navTab" rel ="w_button" > 按钮 a > li >
< li >< a href ="w_textInput.html" target ="navTab" rel ="w_textInput" > 文本框/文本域 a > li >
< li >< a href ="w_combox.html" target ="navTab" rel ="w_combox" > 下拉菜单 a > li >
< li >< a href ="w_checkbox.html" target ="navTab" rel ="w_checkbox" > 多选框/单选框 a > li >
< li >< a href ="demo_upload.html" target ="navTab" rel ="demo_upload" > iframeCallback表单提交 a > li >
< li >< a href ="w_uploadify.html" target ="navTab" rel ="w_uploadify" > uploadify多文件上传 a > li >
ul >
li >
< li >< a href ="dwz.frag.xml" target ="_blank" > dwz.frag.xml a > li >
ul >
div >
< div class ="accordionHeader" >
< h2 >< span > Folder span > 典型页面 h2 >
div >
< div class ="accordionContent" >
< ul class ="tree treeFolder treeCheck" >
< li >< a href ="demo_page1.html" target ="navTab" rel ="demo_page1" > 查询我的客户 a > li >
< li >< a href ="demo_page1.html" target ="navTab" rel ="demo_page2" > 表单查询页面 a > li >
< li >< a href ="demo_page4.html" target ="navTab" rel ="demo_page4" > 表单录入页面 a > li >
< li >< a href ="demo_page5.html" target ="navTab" rel ="demo_page5" > 有文本输入的表单 a > li >
< li >< a href ="javascript:void(0)" > 有提示的表单输入页面 a >
< ul >
< li >< a href ="javascript:void(0)" > 页面一 a > li >
< li >< a href ="javascript:void(0)" > 页面二 a > li >
ul >
li >
< li >< a href ="javascript:void(0)" > 选项卡和图形的页面 a >
< ul >
< li >< a href ="javascript:void(0)" > 页面一 a > li >
< li >< a href ="javascript:void(0)" > 页面二 a > li >
ul >
li >
< li >< a href ="javascript:void(0)" > 选项卡和图形切换的页面 a > li >
< li >< a href ="javascript:void(0)" > 左右两个互动的页面 a > li >
< li >< a href ="javascript:void(0)" > 列表输入的页面 a > li >
< li >< a href ="javascript:void(0)" > 双层栏目列表的页面 a > li >
ul >
div >
< div class ="accordionHeader" >
< h2 >< span > Folder span > 流程演示 h2 >
div >
< div class ="accordionContent" >
< ul class ="tree" >
< li >< a href ="newPage1.html" target ="dialog" rel ="dlg_page" > 列表 a > li >
< li >< a href ="newPage1.html" target ="dialog" rel ="dlg_page" > 列表 a > li >
< li >< a href ="newPage1.html" target ="dialog" rel ="dlg_page2" > 列表 a > li >
< li >< a href ="newPage1.html" target ="dialog" rel ="dlg_page2" > 列表 a > li >
< li >< a href ="newPage1.html" target ="dialog" rel ="dlg_page2" > 列表 a > li >
ul >
div >
div >
div >
div>
在把我们上面看出来的菜单抽取出来用来后台加载 输出html字符串的形式改写之后差不多就下面这样。。。
<
body
>
< form id ="form1" runat ="server" >
< body scroll ="no" >
< div id ="layout" >
< div id ="header" >
< div class ="headerNav" >
< a class ="logo" href ="javascript:void(0)" > 标志 a >
< ul class ="nav" >
< li >< a href ="#" target ="dialog" > 设置 a > li >
< li >< a href ="#" target ="_blank" > 论坛 a > li >
< li >< a href ="#" > 退出 a > li >
ul >
< ul class ="themeList" id ="themeList" >
< li theme ="default" >
< div class ="selected" >
蓝色 div >
li >
< li theme ="green" >
< div >
绿色 div >
li >
< li theme ="purple" >
< div >
紫色 div >
li >
< li theme ="silver" >
< div >
银色 div >
li >
ul >
div >
div >
< div id ="leftside" >
< div id ="sidebar_s" style ="display: none;" >
< div class ="collapse" >
< div class ="toggleCollapse" >
< div >
div >
div >
div >
div >
< div id ="sidebar" >
< div class ="toggleCollapse" >
< h2 >
主菜单 h2 >
< div >
收缩 div >
div >
< div class ="accordion" fillSpace ="sidebar" >
<% = GetLeftMenu() %>
div >
div >
div >
< div id ="container" >
< div id ="navTab" class ="tabsPage" >
< div class ="tabsPageHeader" >
< div class ="tabsPageHeaderContent" >
< ul class ="navTab-tab" >
< li tabid ="main" class ="main" >< a href ="javascript:void(0)" >< span >< span class ="home_icon" >
我的主页 span > span > a > li >
ul >
div >
< div class ="tabsLeft" >
left div >
< div class ="tabsRight" >
right div >
< div class ="tabsMore" >
more div >
div >
< ul class ="tabsMoreList" >
< li >< a href ="javascript:void(0)" > 我的主页 a > li >
ul >
< div class ="navTab-panel tabsPageContent" >
< div class ="page" >
< div class ="accountInfo" >
< div class ="alertInfo" >
< h2 >
< a href ="#" target ="_blank" > a >
h2 >
< a href ="#" target ="_blank" > a >
div >
< p >
< span > span >
p >
< p >
< a href ="http://hi.csdn.net/wxr0323" target ="dialog" > 子夜抄袭DWZ a > p >
div >
< div class ="pageFormContent" layouth ="80" >
div >
div >
div >
div >
div >
< div id ="taskbar" style ="left: 0px; display: none;" >
< div class ="taskbarContent" >
< ul >
ul >
div >
< div class ="taskbarLeft taskbarLeftDisabled" style ="display: none;" >
taskbarLeft div >
< div class ="taskbarRight" style ="display: none;" >
taskbarRight div >
div >
< div id ="splitBar" >
div >
< div id ="splitBarProxy" >
div >
div >
< div id ="footer" >
Copyright © 2010 < a href ="demo_page2.html" target ="dialog" > DWZ研发组 a > div >
< div class ="resizable" >
div >
< div class ="shadow" style ="width: 508px; top: 148px; left: 296px;" >
< div class ="shadow_h" >
< div class ="shadow_h_l" >
div >
< div class ="shadow_h_r" >
div >
< div class ="shadow_h_c" >
div >
div >
< div class ="shadow_c" >
< div class ="shadow_c_l" style ="height: 296px;" >
div >
< div class ="shadow_c_r" style ="height: 296px;" >
div >
< div class ="shadow_c_c" style ="height: 296px;" >
div >
div >
< div class ="shadow_f" >
< div class ="shadow_f_l" >
div >
< div class ="shadow_f_r" >
div >
< div class ="shadow_f_c" >
div >
div >
div >
< div id ="alertBackground" class ="alertBackground" >
div >
< div id ="dialogBackground" class ="dialogBackground" >
div >
< div id ='background' class ='background' >
div >
< div id ='progressBar' class ='progressBar' >
数据加载中，请稍等... div >
< script type ="text/javascript" >
var _gaq = _gaq || [];
_gaq.push([ ' _setAccount ' , ' UA-16716654-1 ' ]);
_gaq.push([ ' _trackPageview ' ]);
( function () {
var ga = document.createElement( ' script ' ); ga.type = ' text/javascript ' ; ga.async = true ;
ga.src = ( ' https: ' == document.location.protocol ? ' https://ssl ' : ' http://www ' ) + ' .google-analytics.com/ga.js ' ;
var s = document.getElementsByTagName( ' script ' )[ 0 ]; s.parentNode.insertBefore(ga, s);
})();
script >
body >
< form id ="form1" runat ="server" >
< body scroll ="no" >
< div id ="layout" >
< div id ="header" >
< div class ="headerNav" >
< a class ="logo" href ="javascript:void(0)" > 标志 a >
< ul class ="nav" >
< li >< a href ="#" target ="dialog" > 设置 a > li >
< li >< a href ="#" target ="_blank" > 论坛 a > li >
< li >< a href ="#" > 退出 a > li >
ul >
< ul class ="themeList" id ="themeList" >
< li theme ="default" >
< div class ="selected" >
蓝色 div >
li >
< li theme ="green" >
< div >
绿色 div >
li >
< li theme ="purple" >
< div >
紫色 div >
li >
< li theme ="silver" >
< div >
银色 div >
li >
ul >
div >
div >
< div id ="leftside" >
< div id ="sidebar_s" style ="display: none;" >
< div class ="collapse" >
< div class ="toggleCollapse" >
< div >
div >
div >
div >
div >
< div id ="sidebar" >
< div class ="toggleCollapse" >
< h2 >
主菜单 h2 >
< div >
收缩 div >
div >
< div class ="accordion" fillSpace ="sidebar" >
<% = GetLeftMenu() %>
div >
div >
div >
< div id ="container" >
< div id ="navTab" class ="tabsPage" >
< div class ="tabsPageHeader" >
< div class ="tabsPageHeaderContent" >
< ul class ="navTab-tab" >
< li tabid ="main" class ="main" >< a href ="javascript:void(0)" >< span >< span class ="home_icon" >
我的主页 span > span > a > li >
ul >
div >
< div class ="tabsLeft" >
left div >
< div class ="tabsRight" >
right div >
< div class ="tabsMore" >
more div >
div >
< ul class ="tabsMoreList" >
< li >< a href ="javascript:void(0)" > 我的主页 a > li >
ul >
< div class ="navTab-panel tabsPageContent" >
< div class ="page" >
< div class ="accountInfo" >
< div class ="alertInfo" >
< h2 >
< a href ="#" target ="_blank" > a >
h2 >
< a href ="#" target ="_blank" > a >
div >
< p >
< span > span >
p >
< p >
< a href ="http://hi.csdn.net/wxr0323" target ="dialog" > 子夜抄袭DWZ a > p >
div >
< div class ="pageFormContent" layouth ="80" >
div >
div >
div >
div >
div >
< div id ="taskbar" style ="left: 0px; display: none;" >
< div class ="taskbarContent" >
< ul >
ul >
div >
< div class ="taskbarLeft taskbarLeftDisabled" style ="display: none;" >
taskbarLeft div >
< div class ="taskbarRight" style ="display: none;" >
taskbarRight div >
div >
< div id ="splitBar" >
div >
< div id ="splitBarProxy" >
div >
div >
< div id ="footer" >
Copyright © 2010 < a href ="demo_page2.html" target ="dialog" > DWZ研发组 a > div >
< div class ="resizable" >
div >
< div class ="shadow" style ="width: 508px; top: 148px; left: 296px;" >
< div class ="shadow_h" >
< div class ="shadow_h_l" >
div >
< div class ="shadow_h_r" >
div >
< div class ="shadow_h_c" >
div >
div >
< div class ="shadow_c" >
< div class ="shadow_c_l" style ="height: 296px;" >
div >
< div class ="shadow_c_r" style ="height: 296px;" >
div >
< div class ="shadow_c_c" style ="height: 296px;" >
div >
div >
< div class ="shadow_f" >
< div class ="shadow_f_l" >
div >
< div class ="shadow_f_r" >
div >
< div class ="shadow_f_c" >
div >
div >
div >
< div id ="alertBackground" class ="alertBackground" >
div >
< div id ="dialogBackground" class ="dialogBackground" >
div >
< div id ='background' class ='background' >
div >
< div id ='progressBar' class ='progressBar' >
数据加载中，请稍等... div >
< script type ="text/javascript" >
var _gaq = _gaq || [];
_gaq.push([ ' _setAccount ' , ' UA-16716654-1 ' ]);
_gaq.push([ ' _trackPageview ' ]);
( function () {
var ga = document.createElement( ' script ' ); ga.type = ' text/javascript ' ; ga.async = true ;
ga.src = ( ' https: ' == document.location.protocol ? ' https://ssl ' : ' http://www ' ) + ' .google-analytics.com/ga.js ' ;
var s = document.getElementsByTagName( ' script ' )[ 0 ]; s.parentNode.insertBefore(ga, s);
})();
script >
body >
只贴了body里面的
接下来我们就要实现绑定的那个方法了。。
数据库跟第一篇的数据库一样。
///
/// 获取左侧便拦组
///
protected string GetLeftMenu()
{
StringBuilder LeftList = new StringBuilder();
try
{
// 获取菜单中的所有数据
DataTable Dt_TotleMenu = SqlHelper.ReturnDataTable( " select * from Ziye_Menu " , CommandType.Text);
// 取出所有父节点 因为父节点的Menu_Fid=0
DataRow[] drMenu = Dt_TotleMenu.Select( " Menu_Fid=0 and Menu_able=1 " );
// 构建父节点的table
DataTable LeftMenuTable = new DataTable();
// 克隆一下解构
LeftMenuTable = drMenu[ 0 ].Table.Clone();
// 导入数据
foreach (DataRow dr in drMenu)
{
LeftMenuTable.ImportRow(dr);
}
// 如果存在父节点
if (LeftMenuTable.Rows.Count != 0 )
{
// 遍历拼接html 根据第一篇观察和抽取HTML的功夫
for ( int i = 0 ; i < LeftMenuTable.Rows.Count; i ++ )
{
LeftList.Append( "
LeftList.Append( "
LeftList.Append( "
"
);/// 获取左侧便拦组
///
protected string GetLeftMenu()
{
StringBuilder LeftList = new StringBuilder();
try
{
// 获取菜单中的所有数据
DataTable Dt_TotleMenu = SqlHelper.ReturnDataTable( " select * from Ziye_Menu " , CommandType.Text);
// 取出所有父节点 因为父节点的Menu_Fid=0
DataRow[] drMenu = Dt_TotleMenu.Select( " Menu_Fid=0 and Menu_able=1 " );
// 构建父节点的table
DataTable LeftMenuTable = new DataTable();
// 克隆一下解构
LeftMenuTable = drMenu[ 0 ].Table.Clone();
// 导入数据
foreach (DataRow dr in drMenu)
{
LeftMenuTable.ImportRow(dr);
}
// 如果存在父节点
if (LeftMenuTable.Rows.Count != 0 )
{
// 遍历拼接html 根据第一篇观察和抽取HTML的功夫
for ( int i = 0 ; i < LeftMenuTable.Rows.Count; i ++ )
{
LeftList.Append( "
LeftList.Append( "
Folder
" + LeftMenuTable.Rows[i][ " Menu_Name " ].ToString() + " " );LeftList.Append( "
LeftList.Append( "
LeftList.Append( "
// 获取当前父节点的所有子节点
DataRow[] drSencondMenu = Dt_TotleMenu.Select( " Menu_Fid=' " + LeftMenuTable.Rows[i][ " Menu_ID " ] + " ' and Menu_able=1 " );
DataTable SecondTable = new DataTable();
SecondTable = drSencondMenu[ 0 ].Table.Clone();
foreach (DataRow dr in drSencondMenu)
{
SecondTable.ImportRow(dr);
}
// 如果子存在子节点
if (SecondTable.Rows.Count != 0 )
{
// 遍历拼接子节点的HTML
for ( int j = 0 ; j < SecondTable.Rows.Count; j ++ )
{
LeftList.Append( "
}
}
// 结束符
LeftList.Append( " " );
LeftList.Append( "
}
}
return LeftList.ToString();
}
catch (Exception err)
{
return " 没菜单 " ;
}
}
这个代码应该比第一篇的简单一些。同学们也可以改成递归的形式。
其实原理跟第一篇的差不多。