写在前面:如果是我自己做东西,我不喜欢使用第三方控件,喜欢"闭门造车",当然在我的车快造好了,or造不下去了的时候我还是会打开那扇关闭的门的
首先,建一个数据表(Oracle 11g)
CREATE TABLE wb_terms (
id INTEGER NOT NULL,
"NAME" VARCHAR2(200) NOT NULL,
parent INTEGER DEFAULT 0 NOT NULL
)
插入几条测试数据,如下:
后台采用递归查询,想办法将数据返回到前台
SELECT
t.*
FROM
WB_TERMS t
START WITH
t.id=0
CONNECT BY NOCYCLE PRIOR
t.id=t.parent
ORDER SIBLINGS BY t.id ASC
重点是前台js,首先要确保在前台页面中包含如下内容
<div id="category_inside" class="inside">
就是一个空 div,呵呵
var categoryDiv = "#category_inside";
$(categoryDiv).html("loading...");
// 此处采用jquery ajax获得数据,当然你可以使用你喜欢的任何方式
$.get('your_url', null, function (data, textStatus) {
$(categoryDiv).html('');
/*data.successList为后台返回的数据集合*/
$.each(data.successList, function(key, value) {
if ($(categoryDiv).html().trim() == '') {
$(categoryDiv).append("<ul id='id_" + value.parent + "'></ul>");
} else if ($(categoryDiv + " ul[id=id_" + value.parent + "]").size() == 0) {
$(categoryDiv + " li[id=id_" + value.parent + "]").append("<ul id='id_" + value.parent + "'></ul>");
}
$(categoryDiv + " ul[id=id_" + value.parent + "]").append("<li id='id_" + value.id + "'><label><input type='checkbox' id='" + value.id + "' value='" + value.name + "' name='category'/>" + value.name + "</label></li>");
});
});
最后再附赠一个CSS
#category_inside {
width: auto;
margin: 10px;
padding-left: 10px;
background-color: #FFFFFF;
border: 1px solid #DFDFDF;
}
ul {
list-style-type: none;
padding: 0;
}
li ul {
padding-left: 20px;
padding-top: 0;
padding-bottom: 0;
}
li label input[type="checkbox"] {
margin-right: 10px;
}
最终效果如下:
为了实现此树形菜单总共使用了8行js代码,而且其中2行还完全是由括号组成的,反正我感觉挺简单的,你呢?
- 大小: 10.7 KB
- 大小: 17 KB
分享到:
相关推荐
"C#WinForm美化第三方控件"是一个专为提升WinForm应用程序界面美观度的专题,它涉及到了C#中对WinForm控件的自定义和美化,以及利用第三方控件来增强用户体验。 首先,WinForm是.NET Framework中的一个窗口应用程序...
第三方控件的优势主要体现在以下几个方面: 1. 功能丰富:第三方控件往往拥有更高级的功能,比如数据可视化、拖放支持、多语言支持等,这些是标准控件所不具备的。 2. 用户体验:第三方控件通常设计得更为美观,...
“免费的VB 第三方控件大全 rar”这一资源包的出现,为VB开发者们提供了一个获取多种第三方控件的便捷途径。这些控件按照功能和用途被分为不同的类别,如按钮特效、界面特效以及其他控件等,从而使得开发者能够根据...
综上所述,通过理解`TreeView`控件的基本原理和属性,我们可以创建一个可展开的C#树形菜单。结合数据库或其他数据源,我们可以轻松地生成动态的、层次分明的菜单结构,这在ASP.NET应用程序中非常常见,特别是在构建...
MFC 第三方控件, 可以美化界面!!!
描述中提到的"内含皮肤、面板等多个第三方控件"意味着这个包提供了多样的界面元素,如皮肤可以改变控件的外观,使其与应用的整体风格保持一致;而面板(Panel)控件则常用于组织和布局其他控件,可以提供一个容器来...
"微软asp.net树形菜单控件中文版.rar"是一个压缩包,包含了用于在ASP.NET环境中创建和操作树形菜单的中文资源。 树形菜单控件在ASP.NET中的实现通常基于服务器端控件模型。这些控件可以在客户端和服务器端交互,...
在C#编程环境中,树形菜单控件是一种常用的UI元素,它用于呈现具有层次结构的数据。这个控件在用户界面设计中特别有用,因为它能够清晰地展示数据的分类和子分类,使用户能够轻松地浏览和操作这些数据。在本篇内容中...
树形控件通常呈现出多个层级的节点,每个节点可以有子节点,这使得它非常适合用来展示具有层次关系的信息。 配置树形控件涉及以下几个关键步骤: 1. **设置节点属性**:双击树形控件打开属性对话框,可以设置节点...
1. **皮肤与界面美化**:在"Skin+C#界面美化第三方控件"中,你可以找到一系列专门用于界面设计的组件。这些控件通常提供了多种预设皮肤,可以快速改变应用程序的外观,使其更加吸引用户。它们可能包括自定义的按钮、...
在Android开发中,树形控件是一种常见的UI组件,它以层次结构的形式展示数据,常用于文件系统、组织结构或导航菜单等场景。...然而,在处理复杂或大规模的树形数据时,推荐使用专门为树形控件设计的第三方库。
在给定的标题和描述中,我们看到提到了多个JavaScript实现的树形菜单控件,如dtree、无限级树状菜单、struts+h ibernate树形菜单、treeview、xmltree以及dhtmltree等。接下来,我们将深入探讨这些控件及其在实际应用...
标题与描述概述的知识点是关于JavaScript(JS)树形菜单控件的代码示例,强调其简单性和易用性。这种控件在Web开发中非常常见,用于展示具有层次结构的数据,例如文件系统、组织结构或任何有层级关系的信息。 ### ...
总的来说,"VB 第三方控件大全"是一个宝贵的资源,它可以帮助VB开发者提升软件的视觉吸引力,增强功能,从而提高用户满意度。通过学习和实践这些控件,开发者可以进一步精通VB编程,提升自己的技能水平。
在资源包中的“Android 树形菜单(想有几级就几级)”,可能包含了一个自定义的树形控件实现,允许开发者根据需求创建任意级别的树形菜单。 要理解这个树形菜单的工作原理,我们首先需要了解几个关键概念: 1. **...
本文将深入探讨“水平树 Treeview自定义高级控件 菜单分级树形”的概念,以及如何在C#环境中实现这一功能。 `TreeView`控件通常以垂直布局显示数据,每一级节点可以通过展开或折叠来展示其子节点。然而,“水平树”...
标签"QT 控件"进一步强调了这个资源与QT库中的控件有关,无论是官方的还是第三方的,都与构建QT应用程序的界面元素紧密相关。 在压缩包子文件的文件名称列表中,虽然没有具体的文件名,但可以推测其中可能包含了一...
7. **axTree控件**:`axTree`可能指的是第三方控件,这些控件通常提供了更多的功能和更好的性能,但使用前需要先安装相应的控件库,并且其API和标准VB TreeView控件可能会有所不同。 在"Projects"这个文件夹中,...
树形控件的核心结构是树形数据结构,通常采用二叉树或多叉树的形式,其中每个节点都有一个唯一的标识,可能包含数据,并可以有零个或多个子节点。在C++中,可以通过自定义类来表示树节点,包含必要的数据成员和方法...
通常使用`<ul>`和`<li>`标签来表示层次,其中`<li>`包含子菜单时会有一个`<ul>`作为子节点。例如: ```html 菜单项1 子菜单项1.1 子菜单项1.2 菜单项2 菜单项3 ``` 2. **CSS美化**: 使用CSS...