JQuery树形菜单
2016-06-17 17:06
316 查看
我是个jquery菜鸟，这个树形菜单不是太完善，但还是能用的，下面我们看一下它的实现步骤及效果！
第一步：先写好html代码吧，主要是使用的div ul li 实现的一个树形菜单，此代码是放在html中 body里面的。
第二步：就是关键的一步
第三步：要动态加载的数据递归加载进去
第四步：在添加修改删除后实现局部刷新的功能
只能说说思路了个人实现方式，如果大家有更好的，希望多多指教。
在添加修改删除操作成功后，调用刷新函数，刷新函数里面要做的操作如下：
1.添加：添加后根据id来对当前父类节点下的数据进行先移除，在读取根据id读取新的数据，追加到当前父节点下面即可实现
2.修改：修改做的比较简单，就把当前修改的文本替换掉之前的文本 ul 父节点的id.html("修改的内容")，这次不用去根据id取数据了。
3.删除：就是根据当前父节点的ul id下的要删除的部分用remove()移除就完成了。
这样就完成了，此时要注意，这样循环，是要去有根有枝的，没有根（父类）怎么找枝（子类）嘻嘻。就这样吧。其实做的时候遇到好多问题的。其实我还是不太好控制它呢。哎悲催，努力中juqery学习中……
愿能各帮助大家吧！在写个下拉菜单去！
本文转载自http://www.cnblogs.com/huicao/archive/2012/06/30/2571177.html
第一步：先写好html代码吧，主要是使用的div ul li 实现的一个树形菜单，此代码是放在html中 body里面的。
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>
第二步：就是关键的一步
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>第三步：要动态加载的数据递归加载进去
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学习中……
愿能各帮助大家吧！在写个下拉菜单去！
本文转载自http://www.cnblogs.com/huicao/archive/2012/06/30/2571177.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery-Ajax
- JQuery学习一
- jQuery-HTML
- jQuery遍历
- jQuery属性
- jQuery效果
- jQuery基本语法
- jquery+ajax实现直接提交表单实例分析
- jQuery 给动态元素绑定事件
- jquery获取子节点和父节点的示例代码
- jQuery 语法总结和注意事项
- JQuery 事件
- jQuery中的end()方法
- JQuery 关于复制或者删除html块
- Jquery 关于请求 及解析方式
- jquery-easyui-tab引入页面的问题
- jQuery选择器总结（转）
- jquery插件封装：弹出div对话框
- jquery刷新iframe页面的方法(兼容主流)
- jquery中获取属性值的方法attr（） prop（）的区别