easyui treegrid实现显示checkbox并能获取到选定值的
闲聊：
小颖最近忙疯了，经常被加班，昨天都要下班了，又提了个需求，虽然写的代码不多只有几行，可是测试环境很难跑通，一会就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" }] }]
