使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級(jí)聯(lián)選中特效
需求:子結(jié)點(diǎn)選中,父節(jié)點(diǎn)隨之選中,父節(jié)點(diǎn)取消,子節(jié)點(diǎn)隨之取消
代碼:
<!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é)合實(shí)例形式分析了jQuery基于target 屬性獲取到觸發(fā)該事件的dom并修改的相關(guān)操作技巧,需要的朋友可以參考下2019-10-10jQuery EasyUI tree增加搜索功能的實(shí)現(xiàn)方法
擴(kuò)展jQuery EasyUI tree搜索樹節(jié)點(diǎn)的方法,使其支持節(jié)點(diǎn)名稱的模糊匹配,將不匹配的節(jié)點(diǎn)隱藏。下面通過本文給大家分享jQuery EasyUI tree增加搜索功能,需要的朋友可以參考下2017-04-04貼近用戶體驗(yàn)的Jquery日期、時(shí)間選擇插件
本文給大家分享一款貼近用戶體驗(yàn)的Jquery日期、時(shí)間選擇插件,需要的朋友可以參考下2015-08-08基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09jQuery之選項(xiàng)卡的簡單實(shí)現(xiàn)
本篇文章主要是對(duì)jQuery 選項(xiàng)卡的簡單實(shí)現(xiàn)進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02Jquery鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫query鼠標(biāo)放上去顯示全名的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02jQuery 選擇同時(shí)包含兩個(gè)class的元素的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query 選擇同時(shí)包含兩個(gè)class的元素的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06