输出结果

wKiom1RTLm_gfOQqAABSmIgU93s234.jpg

表结构 

depiddepnameupid//所属上级idxh //排序 正序
123一级导航0  // 一级0
124一级下二级导航1231

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()), "&nbsp;&nbsp;&nbsp;|-");

            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 = "&nbsp;&nbsp;&nbsp;&nbsp;" + 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>