easyui中带checkbox框的tree
var data = [{
"id": 1,
"checked":true,
"text": "系统菜单",
"children": [{
"id": 11,
"text": "用户管理",
"checked":true,
"children": [{
"id": 19,
"text": "增加用户"
}, {
"id": 3,
"text": "修改用户"
}, {
"id": 5,
"text": "删除用户",
"checked":true
}]
}, {
"id": 12,
"text": "角色管理",
"children": [{
"id": 13,
"text": "增加角色",
"checked":true
}, {
"id": 3,
"text": "修改角色"
}, {
"id": 5,
"text": "删除角色"
}]
}]
}, {
"id": 2,
"text": "其他",
"state": "closed"
}]; $(function () {
$("#tt").tree({
data: data,
checkbox: true,
cascadeCheck: false,
onCheck: function (node, checked) {
if (checked) {
var parentNode = $("#tt").tree('getParent', node.target);
if (parentNode != null) {
$("#tt").tree('check', parentNode.target);
}
} else {
var childNode = $("#tt").tree('getChildren', node.target);
if (childNode.length > 0) {
for (var i = 0; i < childNode.length; i++) {
$("#tt").tree('uncheck', childNode[i].target);
}
}
}
}
});
}); function getChecked()
{
var arr = [];
var checkeds = $('#tt').tree('getChecked', 'checked');
for (var i = 0; i < checkeds.length; i++) {
arr.push(checkeds[i].id);
}
alert(arr.join(','));
}
<ul id="tt"></ul>
<input type="button" value="获取选中" onclick="getChecked()" />
但是有时候我们从后台返回list,
然后将list转换成一个Tree. easyui根据这个数据生成一个树.
那么如何将list转换成一棵树的基本代码就要查看上面一片博客了(http://www.cnblogs.com/guoyansi19900907/p/4701746.html)
现在给出从数据库获取数据,根据指定数据来控制树的选中和未选中状态.
下面这段代码是将list的数据转换成tree,并且加入checked=true或false来控制选中,未选中.
/**
* checkbox 树
* @param rows
* @param param
* @returns {Array}
*/
function convertCheckbox(rows,param){
/*for(var gys=0;gys<rows.length;gys++){
console.log(rows[gys]["if_fuquan"]);
}*/
function getTreeCheck(n){
if(n==1){
return true;
}else{
return false;
}
} function exists(rows, parentId){
for(var i=0; i<rows.length; i++){
if (rows[i][param.id] == parentId) return true;
}
return false;
} var nodes = [];
// 获取顶级的node
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (!exists(rows, row[param.parentId])){ //gys 给顶层添加链接
var topNode={id:row[param.id],text:row[param.name],checked:getTreeCheck(row[param.checked])};
nodes.push(topNode); // nodes.push({
//id:row.id,
//text:row.name
//});
}
} var toDo = [];
for(var i=0; i<nodes.length; i++){
toDo.push(nodes[i]);
}
while(toDo.length){//循环toDo当toDo长度为零时停止
var node = toDo.shift();//删除第一个元素,然后返回第一个元素,改变数组长度
// 获取子节点
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row[param.parentId] == node.id){
var child = {id:row[param.id],text:row[param.name]};
// gys 添加链接 //if(row[param.checked]){
//alert(row[param.checked]);
child.checked=getTreeCheck(row[param.checked]);
//}
if (node.children){
node.children.push(child);
} else {
node.children = [child];
}
toDo.push(child);
}
}
}
return nodes;
}
var objTree= $("#fuquanTree");
objTree.tree({
url:"data.json",
method: 'get',
checkbox:true,
cascadeCheck: false,
loadFilter:function(data){//这里的privilege_id,privilege_name,if_fuquan,parent_privilege_id对应的都是数据库的字段.
return convertCheckbox(data,{id:"privilege_id",name:"privilege_name",checked:"if_fuquan",parentId:"parent_privilege_id"});
},
onCheck: function (node, checked) {
if (checked) {
var parentNode =objTree.tree('getParent', node.target);
if (parentNode != null) {//选中子集时,父级没选中就选中父级
objTree.tree('check', parentNode.target);
}
} else {//取消选中,如果有子集就取消选中子集
var childNode = objTree.tree('getChildren', node.target);
if (childNode.length > 0) {
for (var i = 0; i < childNode.length; i++) {
objTree.tree('uncheck', childNode[i].target);
}
}
}
}
});
easyui中带checkbox框的tree的更多相关文章
- easy-ui 中的事件触发 (tree)
easy-ui可以为插件添加事件,但没有触发事件的处理(可能是未找到),所以有时候,我们需要通过程序去触发某个插件指定的事件时,就一筹莫展了 以Tree插件为例 ,添加了onClick事件 jQuer ...
- Jquery EasyUI 中ValidateBox验证框使用讲解(转)
Validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表 ...
- Jquery EasyUI 中ValidateBox验证框使用讲解
来源素文宅博客:http://blog.yoodb.com/ Validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警 ...
- easyui combobox 带 checkbox
$('#cc').combobox({ url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', pane ...
- easyui combobox 带 checkbox 亲自验证
$('#cc').combobox({ url:'combobox_data1.json', method:'get', ...
- easyui中导航菜单accordion与tree的动态添加
博客分类: Java Web开发 Js代码 $.parser.parse(); $.ajax({ url:my.bp()+'/main/menuaction!createMenu.action ...
- css 去除 a,checkbox 框 出现虚线
在开发过程中遇到checkbox框,第一次遇到还以为是系统自带的是这样 后来发现不是那样, 我们可以在使用css 去掉出现的虚线框,以下是我的解决方案代码: /* checkbox 去掉虚框*/:fo ...
- 第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件
jQuery EasyUI,ValidateBox(验证框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 4.自定义验证 本节课重点了解 EasyUI 中 ValidateBox(验证框 ...
- 第二百一十节,jQuery EasyUI,SearchBox(搜索框)组件
jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...
随机推荐
- 【转】用ASP.NET加密Cookie数据
来源:http://www.cnblogs.com/taizhouxiaoba/archive/2009/02/05/1384772.html Cookie中的数据以文本的形式存在客户端计算机,考虑它 ...
- OpenJudge计算概论-称体重【枚举法、信息数字化】
/*====================================================================== 称体重 总时间限制: 1000ms 内存限制: 655 ...
- PDA通过SocketTcp+Json和SuperSocket通信方式
从Pda请求到服务器处理请求,并返回结果,Pda拿到结果的流程.
- html初学(一)
学习了一些html的基本用法,代码和效果如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- Zabbix的安装与部署---问题处理(php65.6.28 mysqli 报错误 处理)
1)php65.6.28 mysqli 报错误 处理 http://www.xiaochengfu.com/index.php/index/detail/aid/92.html 2)linux下p ...
- MySQL【Update误操作】回滚(转)
前言: 继上一篇MySQL[Delete误操作]回滚之后,现在介绍下Update回滚,操作数据库时候难免会因为“大意”而误操作,需要快速恢复的话通过备份来恢复是不太可能的,因为需要还原和bi ...
- The word is not correctly spelled问题解决
今天在做Ant/Xdoclet辅助生成hibernate实体映射文件时,eclipse出现了极其让我郁闷的错误,"The word is not correctly spelled" ...
- linux时间管理
/etc/sysconfig/clock 该配置文件可用来设置用户选择何种方式显示时间.如果硬件时钟为本地时间,则UTC设为0,并且不用设置环境变量TZ.如果硬件时钟为UTC时间,则要 ...
- pgsql 9.4修改数据库只读
先进入psql 切换到目标数据库 \c mydb 对于老表 grant usage on schema public to $read_only_user; grant select on all t ...
- 启动Memcache,出现memcached: error while loading shared libraries: libevent-1.4.so.1: cannot open shared
1.有可能是装了多个 libevent而导致memcache无法识别哪一个,解决方法就是卸载掉一个libevent 2.只安装了一个libevent,但是也报这个错,解决方法 32位系统下:ln ...