我是个jquery菜鸟，这个树形菜单不是太完善，但还是能用的，下面我们看一下它的实现步骤及效果！
第一步：先写好html代码吧，主要是使用的div ul li 实现的一个树形菜单，此代码是放在html中 body里面的。
View Code
1 <div> 2 <p ><span style="float:right;">更多</span>标题</p> 3 <p> <img src="http://localhost:4209/WebResource.axd?d=_JGn3DikucdSKjYQma8Z5RCn9_rflEQoRz5gCY7Fhzc1&t=634650160260000000" alt="fgf"/> </p> 4 </div> 5 6 7 <ul class="Tul"> 8 <li id="dpm_1"> 9 <h3 class="Th3"> 10 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /></span><span 11 id="dpmD_1">最惠票务</span> <a onclick="addTree(1);" href="#" 12 class="blue_link">添加</a> <a onclick="update(0,1,'最惠票务',1);" href="#" 13 class="blue_link">修改</a> <a onclick="deleteTree(1,this);" href="#" class="blue_link">删除</a></h3> 14 <ul class="Tul"> 15 <li id="dpm_18"> 16 <h3 class="Th3"> 17 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /> 18 </span><span 19 id="dpmD_18">行政部门</span> <span style="color: #FF9900"> [行政部经理]</span> <a 20 onclick="addTree(18);" href="#" class="blue_link">添加</a> <a onclick="update(1,18,'行政部门',null);" 21 href="#" class="blue_link">修改</a> <a onclick="deleteTree(18,this);" href="#" 22 class="blue_link">删除</a></h3> 23 <ul class="Tul"> 24 <li id="dpm_22"> 25 <h3 class="Th3"> 26 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /></span><span 27 id="dpmD_22">行政部一组</span> <a onclick="addTree(22);" href="#" 28 class="blue_link">添加</a> <a onclick="update(18,22,'行政部一组',null);" href="#" 29 class="blue_link">修改</a> <a onclick="deleteTree(22,this);" href="#" class="blue_link">删除</a></h3> 30 </li> 31 <li id="dpm_25"> 32 <h3 class="Th3"> 33 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /></span><span 34 id="dpmD_25">行政部三组</span> <a onclick="addTree(25);" href="#" 35 class="blue_link">添加</a> <a onclick="update(18,25,'行政部三组',56);" href="#" 36 class="blue_link">修改</a> <a onclick="deleteTree(25,this);" href="#" class="blue_link">删除</a></h3> 37 </li> 38 </ul> 39 </li> 40 <li id="dpm_2"> 41 <h3 class="Th3"> 42 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /> 43 </span><span 44 id="dpmD_2">技术部门</span> <span style="color: #FF9900"> [技术主管]</span><span 45 style="color: #FF9900"> [技术部总监]</span> <a onclick="addTree(2);" 46 href="#" class="blue_link">添加</a> <a onclick="update(1,2,'技术部门',2);" 47 href="#" class="blue_link">修改</a> <a onclick="deleteTree(2,this);" href="#" 48 class="blue_link">删除</a></h3> 49 <ul class="Tul"> 50 <li id="dpm_12"> 51 <h3 class="Th3"> 52 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /></span><span 53 id="dpmD_12">技术部一组</span> <span style="color: #FF9900"> [小组组长]</span> <a 54 onclick="addTree(12);" href="#" class="blue_link">添加</a> <a onclick="update(2,12,'技术部一组',6);" 55 href="#" class="blue_link">修改</a> <a onclick="deleteTree(12,this);" href="#" 56 class="blue_link">删除</a></h3> 57 </li> 58 <li id="dpm_36"> 59 <h3 class="Th3"> 60 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /></span><span 61 id="dpmD_36">技术部四</span> <a onclick="addTree(36);" href="#" 62 class="blue_link">添加</a> <a onclick="update(2,36,'技术部四',45);" href="#" 63 class="blue_link">修改</a> <a onclick="deleteTree(36,this);" href="#" class="blue_link">删除</a></h3> 64 </li> 65 </ul> 66 </li> 67 <li id="dpm_5"> 68 <h3 class="Th3"> 69 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /> 70 </span><span 71 id="dpmD_5"> 人事部门</span> <span style="color: #FF9900"> [人事主管]</span><span 72 style="color: #FF9900"> [人事经理]</span> <a onclick="addTree(5);" 73 href="#" class="blue_link">添加</a> <a onclick="update(1,5,' 人事部门',3);" 74 href="#" class="blue_link">修改</a> <a onclick="deleteTree(5,this);" href="#" 75 class="blue_link">删除</a></h3> 76 <ul class="Tul"> 77 <li id="dpm_13"> 78 <h3 class="Th3"> 79 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /></span><span 80 id="dpmD_13">人事部二组</span> <a onclick="addTree(13);" href="#" 81 class="blue_link">添加</a> <a onclick="update(5,13,'人事部二组',8);" href="#" 82 class="blue_link">修改</a> <a onclick="deleteTree(13,this);" href="#" class="blue_link">删除</a></h3> 83 </li> 84 <li id="dpm_43"> 85 <h3 class="Th3"> 86 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /></span><span 87 id="dpmD_43">人事部一</span> <a onclick="addTree(43);" href="#" 88 class="blue_link">添加</a> <a onclick="update(5,43,'人事部一',56);" href="#" 89 class="blue_link">修改</a> <a onclick="deleteTree(43,this);" href="#" class="blue_link">删除</a></h3> 90 </li> 91 </ul> 92 </li> 93 <li id="dpm_24"> 94 <h3 class="Th3"> 95 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /></span><span 96 id="dpmD_24">客服部</span> <a onclick="addTree(24);" href="#" 97 class="blue_link">添加</a> <a onclick="update(1,24,'客服部',55);" href="#" 98 class="blue_link">修改</a> <a onclick="deleteTree(24,this);" href="#" class="blue_link">删除</a></h3> 99 <ul class="Tul"> 100 <li id="dpm_47"> 101 <h3 class="Th3"> 102 <img src="images/j.gif" class="tree_icon" /><span class="tree_right"><input type="checkbox" /></span><span 103 id="dpmD_47">客服一</span> <a onclick="addTree(47);" href="#" 104 class="blue_link">添加</a> <a onclick="update(24,47,'客服一',6);" href="#" 105 class="blue_link">修改</a> <a onclick="deleteTree(47,this);" href="#" class="blue_link">删除</a></h3> 106 </li> 107 </ul> 108 </li> 109 </ul> 110 </li> 111 </ul>
第二步：就是关键的一步
View Code
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $("li").each(function(){ //遍历li下面的ul 4 $(this).find("ul").css("display","none"); 5 if($(this).find("ul").length==0){ 6 $(this).find("img:first").attr("src","images/line.gif"); 7 }else{ 8 if($(this).find("ul").css("display")=="none"){ 9 $(this).find("img:first").attr("src","images/add.gif"); 10 }else{ 11 $(this).find("img:first").attr("src","images/jian.gif"); 12 } 13 } 14 }); 15 16 /* $("input:checkbox").click(function(){ 17 18 if($(this).attr("checked")==""){ 19 20 $(this).parent().parent().parent().find(":checkbox").removeAttr("checked"); 21 }else{ 22 23 $(this).parent().parent().parent().find(":checkbox").attr("checked","checked"); 24 } 25 });*/ 26 27 $("input:checkbox").click(function () { 28 29 if ($(this).attr("checked") == "") { 30 //这句切记，如果在html里面这样写$(this).attr("checked") == ""， 31 //如果在C#程序里面就该这样写了$(this).attr("checked") == null。 32 33 Isfather(this, false); 34 Ischild(this, false); 35 } 36 else { 37 Isfather(this, true); 38 Ischild(this, true); 39 } 40 }); 41 42 43 /*********此块代码是实现checkbox选中的一些函数**********/ 44 function Isfather(t,val) { 45 46 var father = $(t).parent().parent().parent().parent().parent().children("H3").children("SPAN"); 47 if (father.length >0) { 48 49 50 if (!val) { 51 if (!Isbrother(t)) { 52 $(father).find(":checkbox").removeAttr("checked"); 53 Isfather($(father).find(":checkbox")[0], val); 54 } 55 } 56 else { 57 $(father).find(":checkbox").attr("checked", "checked"); 58 Isfather($(father).find(":checkbox")[0], val); 59 } 60 61 } 62 } 63 /*****找到checkbox的兄弟****/ 64 function Isbrother(t) { 65 66 var Is = false; 67 brother = $(t).parent().parent().parent().parent().parent().children("UL").children("LI").find(":checkbox"); 68 if (brother.length > 0) { 69 70 var i = 0; 71 for (i = 0; i < brother.length; i++) { 72 73 if (brother[i].checked) { 74 Is = brother[i].checked; 75 break; 76 } 77 } 78 79 } 80 return Is; 81 } 82 function Ischild(t,val) { 83 84 var child = $(t).parent().parent().parent().children("UL").children("LI"); 85 if ( child != null) { 86 if ($(child).find(":checkbox").length > 0) { 87 if (val) 88 $(child).find(":checkbox").attr("checked", "checked"); 89 else { 90 $(child).find(":checkbox").removeAttr("checked"); 91 92 } 93 } 94 } 95 } 96 /*******checkbox前面的展开隐藏操作******/ 97 $(".tree_icon").click(function(){ 98 if($(this).parent().next().css("display")=="none"){ 99 $(this).parent().next().show(); 100 $(this).attr("src","images/jian.gif"); 101 }else{ 102 $(this).parent().next().hide(); 103 $(this).attr("src","images/add.gif"); 104 } 105 }); 106 }) 107 </script>
第三步：要动态加载的数据递归加载进去
View Code
1 function SetDepartmentOrganizaByWhere(pid) { 2 var ds = //要动态加载的数据 3 var table = ds.Tables[0]; 4 if (!table) return; 5 if (table.Rows.length == 0) { return; } else { 6 str += " <ul class=\"Tul\">"; 7 } 8 for (var i = 0; i < table.Rows.length; i++) { 9 10 var dr = table.Rows[i]; 11 str += "<li id=\"dpm_" + dr.Dpm_Id + "\"> <h3 class=\"Th3\"> <img src=\"../images/j.gif\" class=\"tree_icon\" /><span class=\"tree_right\">"; 12 str += "<input type=\"checkbox\" /></span><span id=\"dpmD_" + dr.Dpm_Id + "\">" + dr.Dpm_Name + "</span> "; 13 14 str += " <a onclick=\"addTree(" + dr.Id + ");\" href=\"#\" class=\"blue_link\">添加</a> "; 15 str += "<a onclick=\"update(" + dr.Id + "," + dr.name+ ",'" + dr.age+ "'," + dr.level 16 + ");\" href=\"#\" class=\"blue_link\">修改</a> "; 17 str += "<a onclick=\"deleteTree(" + dr.Id + ",this);\" href=\"#\" class=\"blue_link\">删除</a></h3>"; 18 SetDepartmentOrganizaByWhere(dr.Id); 19 str += "</li>"; 20 } 21 str += "</ul>"; 22 }
第四步：在添加修改删除后实现局部刷新的功能
只能说说思路了个人实现方式，如果大家有更好的，希望多多指教。
在添加修改删除操作成功后，调用刷新函数，刷新函数里面要做的操作如下：
1.添加：添加后根据id来对当前父类节点下的数据进行先移除，在读取根据id读取新的数据，追加到当前父节点下面即可实现
2.修改：修改做的比较简单，就把当前修改的文本替换掉之前的文本 ul 父节点的id.html("修改的内容")，这次不用去根据id取数据了。
3.删除：就是根据当前父节点的ul id下的要删除的部分用remove()移除就完成了。
这样就完成了，此时要注意，这样循环，是要去有根有枝的，没有根（父类）怎么找枝（子类）嘻嘻。就这样吧。其实做的时候遇到好多问题的。其实我还是不太好控制它呢。哎悲催，努力中juqery学习中……
愿能各帮助大家吧！在写个下拉菜单去！