自定义TREEVIEW UL无限极嵌套
背景:做一个多级图片分类管理,当然要用到TreeView,在asp.net中已经提供了此服务器控件,参照效果,自定义一个简单可控性高的就当做练手吧!
效果:如图,小图标 折叠 展开
ico-treeview-1.png ico-treeview-2.png
HTML:
<div class="container mt30">
<ul class="tree">
<li><i class="ico-tv tv1 tv2"></i><a href="javascript:void(0)" class="op-tv o">销售部</a>
<ul class="subtree">
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">标志图</a>
<ul class="subtree hide">
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">标志图</a></li>
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">邮件图</a></li>
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">天猫图</a></li>
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">场景图</a>
<ul class="subtree hide">
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">标志图</a></li>
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">邮件图</a></li>
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">天猫图</a></li>
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">场景图</a></li>
</ul>
</li>
</ul>
</li>
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">邮件图</a></li>
<li><i class="ico-tv tv1"></i><a href="javascript:void(0)" class="op-tv">天猫图</a></li>
</ul>
</li>
</ul>
</div>
STYLE:
<style type="text/css">
*{ margin:0; padding:0; }
.mt30{ margin:30px 0 0 0; }
.container{ width:800px; margin:0 auto; padding:30px; background:#f5f5f5; }
ul{ list-style:none; }
a{ text-decoration:none; font-size:12px; border:0; }
.tree{ display:block; }
.tree li{ clear:both; display:block; }
.tree i,a{ float:left; }
.tree li ul.subtree{ display:block; margin-left:20px; }
.tree li ul.subtree.hide{ display:none; }
.tree .ico-tv{ width:20px; height:20px; display:block; margin-top:2px; }
/*+*/
.tree .tv1{ background:url(images/ico-treeview-1.png) no-repeat; cursor:pointer; }
/*-*/
.tree .tv2{ background:url(images/ico-treeview-2.png) no-repeat; cursor:pointer; }
.tree .o{ color:#ff8400; }
</style>
JAVASCRIPT:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tree .ico-tv").click(function(){
if($(this).parent("li").children("ul.subtree").length>0){
$(this).toggleClass("tv2");
$(this).parent("li").children("ul.subtree").toggleClass("hide");
}
});
$(".tree .op-tv").click(function(){
--节点标题点击事件
});
function treenode(nodes) {
$.each(nodes, function (i,n) {
if ($(n).children("ul.subtree").length > 0) {
treenode($(n).children("ul.subtree li"));
}else{
$(n).children("i.ico-tv").removeClass("tv1");
}
});
}
treenode($(".tree li")); --递归取消没有子节点的图标
});
</script>
总结:
好的功能从小Case做起,平时多积累,才能够多学活用,动手比空想更重要!
自定义TREEVIEW UL无限极嵌套的更多相关文章
- 转:打造DropDownList,TreeView,ListBox无限极分类目录树
[csharp] view plaincopyprint? #region DropDownList无限递归显示层次关系 /// <summary> /// 创建无限分级下拉列表框 /// ...
- 夺命雷公狗ThinkPHP项目之----企业网站21之网站前台二级分类显示名称(TP自定义函数展示无限极分类)
我们实现网站二级分类的显示的时候,先要考虑的是直接取出顶级栏目,控制器代码如下所示: <?php namespace Home\Controller; use Think\Controller; ...
- WPF—TreeView无限极绑定集合形成树结构
1.如图所示:绑定树效果图 2.前台Xaml代码: <Window x:Class="WpfTest.MainWindow" xmlns="http://schem ...
- [No0000D1]WPF—TreeView无限极绑定集合形成树结构
1.如图所示:绑定树效果图 2.前台Xaml代码: <Window x:Class="WpfTest.MainWindow" xmlns="http://schem ...
- sqlalchemy tree 树形分类 无限极分类的管理。预排序树,左右值树。sqlalchemy-mptt
简介: 无限极分类是一种比较常见的数据格式,生成组织结构,生成商品分类信息,权限管理当中的细节权限设置,都离不开无限极分类的管理. 常见的有链表式,即有一个Pid指向上级的ID,以此来设置结构.写的时 ...
- php 实现无限极分类
原始数据 $array = array( array('id' => 1, 'pid' => 0, 'n' => '河北省'), array('id' => 2, 'pid' ...
- js实现无限极分类
转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要实现部门通讯录,后台传来的数据是直接从数据库里拿的部门表,所以没有层级分类,只有parentId表示从属关系,所以分类的事情就交给我来 ...
- C#无限极分类树-创建-排序-读取 用Asp.Net Core+EF实现
今天做一个管理后台菜单,想着要用无限极分类,记得园子里还是什么地方见过这种写法,可今天找了半天也没找到,没办法静下心来自己写了: 首先创建节点类(我给它取名:AdminUserTree): /// & ...
- asp.net sql无限极分类实例程序
数据库结构 代码如下 复制代码 create table category( id int, clsno ...
随机推荐
- 安装Loopback网卡/回环网卡
$CurrentPath = $MyInvocation.MyCommand.Path.substring(0,$MyInvocation.MyCommand.Path.LastIndexOf('\' ...
- IOS 日期选择
传统方式 一般情况下弹出日期选择的场景是:用户点击UITextField弹出日期选择,关键代码如下: 点击UITextField弹出日期选择 1 2 3 UITextField *textField; ...
- GMM-HMM语音识别模型 原理篇
本文简明讲述GMM-HMM在语音识别上的原理,建模和測试过程.这篇blog仅仅回答三个问题: 1. 什么是Hidden Markov Model? HMM要解决的三个问题: 1) Likelihood ...
- 使用Java高速实现进度条
基于有人问到如何做进度条,以下给个简单的做法: 主要是使用JProgressBar(Swing内置javax.swing.JProgressBar)和SwingWorker(Swing内置javax. ...
- Ruby on Rails Tutorial 第一章 之 搭建开发环境
云端开发环境,Cloud9(https://ide.c9.io/).这个开发环境预先安装好了Rails开发所需要的大多数软件,包括Ruby.RubyGems和Git,需要自己安装Rails. 1.安装 ...
- 高级I/O之异步I/O
A synchronous I/O operation causes the requesting process to be blocked until that I/O operation com ...
- 一条直线上N个线段所覆盖的总长度
原文:http://blog.csdn.net/bxyill/article/details/8962832 问题描述: 现有一直线,从原点到无穷大. 这条直线上有N个线段.线段可能相交. 问,N个线 ...
- Helpers\Pagination
Helpers\Pagination Break recordset into a series of pages. First create a new instance of the class ...
- CentOS5.6 安装RabbitMQ
步骤参考官方地址:http://www.rabbitmq.com/install-rpm.html我们这个版本按照官方的不能正确安装. 1.安装erlang(官网地址http://www.erlang ...
- c语言数组的初始化
#include "stdio.h" int main() { ][]; a[][]="1,2,3,4,5,6,7,8,9,10,11,12"; ]=a,*p= ...