c#无线循环出树形导航 ，可折叠，有勾选

输出结果




表结构

depid	depname	upid//所属上级id	xh //排序 正序
123	一级导航	0 // 一级	0
124	一级下二级导航	123	1

c# 代码：
public string showdep()//输出第一层，根据所属上级id调用下一层
{
string str = "";
DataTable dep = getdep(0, "");
int ii = 0;
foreach (System.Data.DataRow dt1 in dep.Rows)
{
str += " <li> <input type=\"checkbox\" id=\"Depds\" name=\"Dep" + ii + "\" alt=\"" + dt1["depid"].ToString() + "\" ";
str += " onClick=\"chkbm(" + ii + ",'" + dt1["depid"].ToString() + " ')\" value=\"" + dt1["depid"].ToString() + "\"" + PowerCheck.Depsge(dt1["depid"].ToString()) + " />";
str += dt1["depName"].ToString();
str += "</li>";
DataTable dep1 = getdep(int.Parse(dt1["depid"].ToString()), "   |-");
str += showdep1(dep1, "|-");
ii++;
}

return str;
}
public DataTable getdep(int upid, string shu)
{//shu字段 放在最前面输出 可看出层次, 但此次脚本已控制层次，so此次没用上
string sql = "select depid,depname,upid,'" + shu + "' as shu from depart where upid=" + upid + " order by xh asc ";
DataTable dt = dbc.spdataset(sql).Tables[0];
return dt;
}

public string showdep1( DataTable dt, string shu)
{
string str="";
if (dt.Rows.Count > 0)
{
shu = "    " + shu;
int ii = 0;
str += "<ul>";
foreach (System.Data.DataRow dt1 in dt.Rows)
{
str += " <li><input type=\"checkbox\" id=\"Depds\" name=\"Dep" + ii + "\" alt=\"" + dt1["depid"].ToString() + "\" ";
str += " onClick=\"chkbm(" + ii + ",'" + dt1["depid"].ToString() + " ')\" value=\"" + dt1["depid"].ToString() + "\"" + PowerCheck.Depsge(dt1["depid"].ToString()) + " />";
str += dt1["depName"].ToString();
str += "</li>";

DataTable dep1 = getdep(int.Parse(dt1["depid"].ToString()), shu);
str += showdep1(dep1, shu);
ii++;
}
str += "</ul>";
}
return str;
}
前台html代码
引用树形折叠js, 把打钩项的id逗号分隔存到一个输入框里 方便后台读取
<link href="jquery.treeview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#tree").treeview({
collapsed: true,
animated: "medium",
control:"#sidetreecontrol",
persist: "location"
});
})
function getval()
{
var str="";
var a2=document.getElementsByTagName("input");
var s=0;
if(a2.length>0)
{
for( i=0;i<a2.length;i++)
{

if(a2[i].checked==true&&(a2[i].id=="Depds"||a2[i].id=="DepIdc"))
{
str=str+a2[i].value+",";
}
}
}
document.getElementById("depart").value=str;

}
function chkt(k,pid)
{
str="EmpIds"+pid;

var cc=0;
var a2=document.getElementsByTagName("input");
var s=0;
if(a2.length>0)
{
for( i=0;i<a2.length;i++)
{
if (s==0&&a2[i].name==str)
{
cc=i;
s=1;
}

if (a2[i].name==str)
{

if(a2[i].checked==true)
{

a2[i].checked=false;

}
else
{
a2[i].checked=true;
}

}

}
}
getvalue();
}
</script>