使用jQuery+EasyUI實現(xiàn)CheckBoxTree的級聯(lián)選中特效
更新時間:2015年12月06日 11:11:06 投稿:hebedich
這篇文章主要介紹了使用jQuery+EasyUI實現(xiàn)CheckBoxTree的級聯(lián)選中特效的相關(guān)資料,需要的朋友可以參考下
需求:子結(jié)點選中,父節(jié)點隨之選中,父節(jié)點取消,子節(jié)點隨之取消
代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="js/themes/default/easyui.css" rel="stylesheet" /> <link href="js/themes/icon.css" rel="stylesheet" /> <script src="js/jquery-1.8.0.min.js"></script> <script src="js/jquery.easyui.min.js"></script> <script src="js/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> var data = [{ "id": 1, "text": "系統(tǒng)", "children": [{ "id": 11, "text": "用戶管理", "children": [{ "id": 19, "text": "增加" }, { "id": 3, "text": "修改" }, { "id": 5, "text": "刪除" }] }, { "id": 12, "text": "角色管理", "children": [{ "id": 13, "text": "增加" }, { "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(',')); } </script> </head> <body> <ul id="tt"></ul> <input type="button" value="獲取選中" onclick="getChecked()" /> </body> </html>
如圖:
相關(guān)文章
jquery獲取并修改觸發(fā)事件的DOM元素示例【基于target 屬性】
這篇文章主要介紹了jquery獲取并修改觸發(fā)事件的DOM元素,結(jié)合實例形式分析了jQuery基于target 屬性獲取到觸發(fā)該事件的dom并修改的相關(guān)操作技巧,需要的朋友可以參考下2019-10-10jQuery EasyUI tree增加搜索功能的實現(xiàn)方法
擴展jQuery EasyUI tree搜索樹節(jié)點的方法,使其支持節(jié)點名稱的模糊匹配,將不匹配的節(jié)點隱藏。下面通過本文給大家分享jQuery EasyUI tree增加搜索功能,需要的朋友可以參考下2017-04-04基于jQuery實現(xiàn)中英文切換導(dǎo)航條效果
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09jQuery 選擇同時包含兩個class的元素的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query 選擇同時包含兩個class的元素的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06