12、jquery的tree组件
1、
<!--jquery 的主文件...-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
--> <link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">
<script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function(){ $("#easyUITree").tree({
url:"treedata.json",
dnd:true,
animate:true,
checkbox:true,
lines:true,
onClick:function(node){
//alert(node.text);
//控制台打印
//console.info(node);
//$("#easyUITree").tree("getChildren",node)
var children=node.children;
alert(children.length)
}
}) }) </script> </head> <body>
<ul id="easyUITree">
</ul>
</body>
treedata.json
[
{
"id":1,
"text":"北京市传智播客教育有限公司",
"iconCls":"icon-add",
"children":[
{
"id":3,
"text":"高教产品研发部"
},{
"id":4,
"text":"战略规范部"
}
]
},{
"id":2,
"text":"北京市黑马程序员",
"children":[
{
"id":5,
"text":"java 教研部"
},{
"id":6,
"text":"IOS 教研部"
}
,{
"id":7,
"text":"美女学工部"
}
]
} ]
2、window弹出框
<!--jquery 的主文件...-->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<!--jquery easyui 的主文件...-->
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<!--jQuery 的主样式文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">
<!--jQuery 的图标文件...-->
<link type="text/css" rel="stylesheet" href="../../js/themes/icon.css"> <script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script>
<!--直接找图标的网站... www.iconfinder.com--> <script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#window").window({
title:"搜索",
height:300,
width:200,
//modal:true
}) }) $("#btn-1").click(function(){
$.messager.confirm('确认','您确认想要退出系统吗？',function(r){
if (r){
alert('确认删除');
}
});
}) $.messager.show({
title:'我的消息',
msg:'消息将在5秒后关闭。',
timeout:5000,
width:350,
height:200,
showType:'slide'
}); }) </script> </head> <body>
<!--把按钮渲染在这个a 标签上面... -->
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<div id="window"></div>
<div style="float:right">
<a id="btn-1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出系统</a>
</div>
</body>
3、jQueryEasyUI的配置
12、jquery的tree组件的更多相关文章
- JQuery EasyUI Tree组件的Bug记录
记录一下使用项目中使用EasyUI遇到的bug,废话少说直接上菜 - _-(bug)..... bug :: .netcore创建一个web应用时候,会自动引入jQuery库以及一些插件,但是在 ...
- C#结合Jquery LigerUI Tree插件构造树
Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单.呵呵 废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法 1 ...
- Jquery easyui tree的使用
这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...
- 轻量jquery框架之--组件交互基础设计
概要 组件交互基础,即考虑在JQUERY对象下($)下扩展所有组件都需要用到的通用api,如ajax入口.对表单的操作.html片段加载.通用的配合datagrid通用的curd客户端对象等. 扩展a ...
- Element-ui tree组件自定义节点使用方法
工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <di ...
- Vue iview Tree组件实现文件目录-高级实现
Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class=&quo ...
- Jquery easyui Tree的简单使用
Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...
- jquery的tree table(树表)
因项目需要,需要在表格中加入tree,使用了jquery的tree table,经美化,完美兼容各种框架的table: 请移步下载tree table 的js文件及css文件等,http://ludo ...
- [置顶] Flex中Tree组件无刷新删除节点
在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...
随机推荐
- python数据结构：进制转化探索
*********************************第一部分*************************************************************** ...
- Ubuntu18.04 禁用笔记本电脑键盘
1.先在命令行工具中输入 xinput list 找到AT Translated Set 2 keyboard,记住后面的ID,如我的ID为21. 输入命令,设置值为0 xinput 然后笔记本键盘就 ...
- HTML5: HTML5 内联 SVG
ylbtech-HTML5: HTML5 内联 SVG 1.返回顶部 1. HTML5 内联 SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Ve ...
- Spring Boot 报错记录
Spring Boot 报错记录 由于新建的项目没有配置数据库连接启动报错,可以通过取消自动数据源自动配置来解决 解决方案1: @SpringBootApplication(exclude = Dat ...
- ORA-06550/PLS-00103
原因是单引号‘是需要加转义字符的(即‘—>“)
- 5. 使用grafana模板
我们刚刚配置的Dashboard还是有点简陋,为了界面美观,这里我们这里使用一些模板 1.使用node_exporter模板 去grafana官网下载模板,点击Download,如下所示 2.导入模板 ...
- Python第十二节 异常
Python 第十三节 异常 python的错误一般包含两类: 语法错误 : 语法错误一般就是, 当你写完程序提交的时候, 发现无法提交, 提示存在错误.例如: 英文逗号 错写成了 中文逗号 异常 : ...
- 2018-2-13-win10-uwp-魔力鬼畜
title author date CreateTime categories win10 uwp 魔力鬼畜 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...
- 嵌入式 emmc 中 安装 烧录 内核 kernel，设备树 devicetree ，根文件系统 rootfs
一般调试嵌入式开发板喜欢选择 利用 TFTP 传送 内核与 设备树, 利用 nfs 加载根文件系统. uboot 环境变量 设置如下: bootargs=root=/dev/nfs rw nfs ...
- linux - sftp, scp, rz, sz（文件传输命令）
1. sftp Secure Ftp 是一个基于SSH安全协议的文件传输管理工具.由于它是基于SSH的,会在传输过程中对用户的密码.数据等敏感信息进行加密,因此可以有效的防止用户信息在传输的过程中被窃 ...