easyUI中tree的简单使用
一、在JS中的代码
$('#tt').tree({
url: baseCtx + 'lib/easyui-1.4/demo/tree/tree_data1.json',//tree数据的来源,json格式的数据
method: 'get',
animate: true,
checkbox: true,//有复选框
// cascadeCheck:false,
//选中的事件
onSelect: function(node) {
if(node.checked) {
$(this).tree("uncheck", node.target);//把指定节点设置为未选中
} else {
var cknodes = $(this).tree("getChecked");
for(var i = 0; i < cknodes.length; i++) {
$(this).tree("uncheck", cknodes[i].target);//把指定节点设置为未选中
}
//再选中改节点
$(this).tree("check", node.target);//把指定节点设置为选中
//预留ajax
}
},
//右击弹出的菜单
onContextMenu: function(e, node) {
e.preventDefault();//阻止自带的右击菜单
$(this).tree('select', node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
},
//点击时候的事件
onClick: function(node){
var nodes = $('#tt').tree('getChecked'); // get checked nodes
var nodes1 = $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodes
var nodes2 = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes
var nodes3 = $('#tt').tree('getChecked', ['checked','indeterminate']); // get checked and ind
alert(nodes1);
//alert(node.text); // alert node text property when clicked
}
});
//追加子节点的方法
function append() {
var textName = "";
$.messager.prompt('输入框', '请输入要添加的部门/组的名称', function(r) {
if(r) {
textName = r;
var t = $('#tt');
var node = t.tree('getSelected');
t.tree('append', {
parent: (node ? node.target : null),
data: [{
text: textName
}]
});
}
});
}
//删除节点的方法
function removeit() {
var node = $('#tt').tree('getSelected');
$('#tt').tree('remove', node.target);
}
easyUI中tree的简单使用的更多相关文章
- easyui中tree控件添加自定义图标icon
来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...
- 做权限树时 使用EasyUI中Tree
符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My Documents", & ...
- 使用EasyUI中Tree
easyui里面的加载tree的两种方式 第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ , "text":&qu ...
- easyui中tree型控件不正常显示的处理方法
我在使用easyui中的tree控件时,出现不正常显示的现象,比如li中不能使用自定义的图标.父级展开或关闭时,其子级仍然显现并出现重叠等.找了很多资料,都没解决这个问题,后来逐个对照官方的源码,才找 ...
- Easyui中tree组件实现搜索定位功能及展开节点定位
这几天遇到个input + tree 实现搜索功能的需求,在这里贴出来供大家参考下,如果你有更好的实现效果希望不腻赐教! 首先给大家看看效果 小二 上图 : 需要的部件知识: easyui ...
- easyui中tree使用simpleData的形式加载数据
了解了zTree的使用, 发现它的simpleData是非常好用的, 由后台返回一个扁平数据, 直接在前台解析成树形菜单, 网上查了一下, easyui也可以简单实现, 不过....没看懂, 先记录一 ...
- EasyUI中tree,Datagrid,pagenation的使用EasyUI中Datagrid和pagenation进行关联时,再次点击pagenation时让表格数据显示的问题
// 获取选中一行的情况,下面的一个参数可以代表一个DataGridfunction getSelected(dialogEle,dataFileTextEle) { // 获取选中一行的情况. va ...
- PHP 使用编码树,生成easyui中的tree样式
生成树的时候,数据库中一般设计的都为无级数,即为:父子节点的树,例如:基本的数据表设计为: nodecode 节点编码 parentnodecode 父节点编码 nodename 节点名称 这样的形 ...
- Jquery easyui Tree的简单使用
Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...
随机推荐
- 69 su -用户和工作组管理
su su命令用户和工作组管理 su命令用于切换当前用户身份到其他用户身份,变更时须输入所要变更的用户帐号与密码. 语法 su (选项) (参数) 选项 -c<指令>或--command= ...
- Sharepoint 杂记
在Sharepoint中复制Settle.html,粘贴后改名为km.html,修改km.html会自动更新km.master,修改好模板后需要在站点发布. 添加List添加WebPart,继承KmW ...
- 思维导图分享以及MindManager使用说明
来源于: http://www.cnblogs.com/muhongxing/archive/2009/12/22/1628782.html http://www.cnblogs.com/muhong ...
- androd Sdk manager配置
Android Android SDK 配置步骤 启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manag ...
- 【转】HTTP协议详解
原文地址:http://www.cnblogs.com/EricaMIN1987_IT/p/3837436.html 一.概念 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则 ...
- 让webstorm支持avalon语法自动补全
在file菜单下选择Settings,选择Editor ——> Inspections ——> Html ——> Unknown HTML tag attibute添加以下标签ms- ...
- 【codevs1012】最大公约数和最小公倍数
题目描述 Description 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P,Q是正整 ...
- C语言与套接字
我们已经知道如何使用I/O与文件通信,还知道了如何让同一计算机上的两个进程进行通信,这篇文章将创建具有服务器和客户端功能的程序 互联网中大部分的底层网络代码都是用C语言写的. 网络程序通常有两部分组成 ...
- 63.Android面试题精选 (转)
1.Android dvm 的进程和Linux的进程,应用程序的进程是否为同一个概念: 答:dvm是dalivk虚拟机.每一个android应用程序都在自己的进程中运行,都拥有一个dalivk虚拟机实 ...
- 【uoj262】 NOIP2016—换教室
http://uoj.ac/problem/262 (题目链接) 题意 有${n}$个时间段,第${i}$个时间段可以选择在${c_i}$教室上课,也可以选择申请换课,有${k_i}$概率申请通过,在 ...