閑聊：
小穎最近忙瘋了，經常被加班，昨天都要下班了，又提了個需求，雖然寫的代碼不多只有幾行，可是測試環境很難跑通，一會就ie崩潰了，所以弄得小穎最近老是頭暈。
也不知道最近是怎么了，一向特別愛吃的小穎，最近很沒有食欲，中午不好好吃飯，就吃一個蘋果，再吃幾口米然后就飽了，晚上回去也不是很餓，但是到下午就開始頭暈，哎！不知道自己是怎么了，昨天下午我們家大穎給我吃零食，我說我沒有胃口，旁邊的同事都笑了，都說不相信，我那么愛吃的人，竟然會說沒胃口不想吃······，可是我真的不想吃啊啊啊啊啊啊啊。好啦不閑聊了，言歸正傳，下面一起來看看小穎寫的demo吧。
注意：支持狐火和IE瀏覽器哦！不支持chrome
准備：
效果圖：
代碼：
html+js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tree-demo</title> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script src="js/jquery.min.js" charset="utf-8"></script> <script src="js/jquery.easyui.min.js" charset="utf-8"></script> <script type="text/javascript"> function show(checkid) { var s = '#check_' + checkid; /*選子節點*/ var nodes = $("#test").treegrid("getChildren", checkid); for (i = 0; i < nodes.length; i++) {//當父節點被選中，則其孩子都被選中 $(('#check_' + nodes[i].id))[0].checked = $(s)[0].checked; } //選上級節點 if (!$(s)[0].checked) {//如果子節點中有沒有選中的，則父節點就不會被選中 var parent = $("#test").treegrid("getParent", checkid); $(('#check_' + parent.id))[0].checked = false; while (parent) { parent = $("#test").treegrid("getParent", parent.id); $(('#check_' + parent.id))[0].checked = false; } } else {//如果子節點全部被選中，則父節點被選中 var parent = $("#test").treegrid("getParent", checkid); var flag = true; var sons = parent.sondata.split(','); for (j = 0; j < sons.length; j++) {//如果子節點中存在沒有選中的，則flag為false if (!$(('#check_' + sons[j]))[0].checked) { flag = false; break; } } if (flag){ $(('#check_' + parent.id))[0].checked = true;//如果子節點中不存在沒有選中的，則flag為true，父節點被選中 } } } function formatcheckbox(val, row) { return "<input type='checkbox' onclick=show('" + row.id + "') id='check_" + row.id + "' />"; } //獲取選中的結點 function getSelected() { var idList = ""; $("input:checked").each(function() { var id = $(this).attr("id"); if (id.indexOf("check_") > -1) { idList += id.replace("check_", '') + ','; } }); alert(idList); } </script> </head> <body> <div style="margin:20px 0;"></div> <table id="test" class="easyui-treegrid" style="width:700px;height:550px" data-options=" url: 'treegrid_data4.json', method: 'get', rownumbers: true, idField: 'id', treeField: 'name' "> <thead> <tr> <th data-options="field:'name'" width="320">菜單/操作</th> <th data-options="field:'size'" width="60" align="center" formatter="formatcheckbox">權限分配</th> </tr> </thead> </table> <input type="button" value="獲取選中的ID值" onclick="getSelected()"> </body> </html>
treegrid_data4.json
[{ "id": 1, "name": "文檔欄目管理", "size": "", "date": "02/19/2010", "sondata": "11,12,13,14", "children": [{ "id": 11, "name": "增加", "size": "", "date": "03/20/2010" }, { "id": 12, "name": "操作管理", "size": "", "date": "01/20/2010" }, { "id": 13, "name": "刪除", "size": "", "date": "01/20/2010" }, { "id": 14, "name": "修改", "size": "", "date": "01/20/2010" }] }, { "id": 2, "name": "菜單管理", "size": "", "date": "02/19/2010", "sondata": "21,22,23,24", "children": [{ "id": 21, "name": "增加", "size": "", "date": "03/20/2010" }, { "id": 22, "name": "操作管理", "size": "", "date": "01/20/2010" }, { "id": 23, "name": "刪除", "size": "", "date": "01/20/2010" }, { "id": 24, "name": "修改", "size": "", "date": "01/20/2010" }] }, { "id": 3, "name": "角色管理", "size": "", "date": "02/19/2010", "sondata": "31,32,33,34", "children": [{ "id": 31, "name": "增加", "size": "", "date": "03/20/2010" }, { "id": 32, "name": "操作管理", "size": "", "date": "01/20/2010" }, { "id": 33, "name": "刪除", "size": "", "date": "01/20/2010" }, { "id": 34, "name": "修改", "size": "", "date": "01/20/2010" }] }, { "id": 4, "name": "用戶管理", "size": "", "date": "02/19/2010", "sondata": "41,42,43,44", "children": [{ "id": 41, "name": "增加", "size": "", "date": "03/20/2010" }, { "id": 42, "name": "操作管理", "size": "", "date": "01/20/2010" }, { "id": 43, "name": "刪除", "size": "", "date": "01/20/2010" }, { "id": 44, "name": "修改", "size": "", "date": "01/20/2010" }] }]