首页 > 代码库 > easyui treegrid实现显示checkbox并能获取到选定值的

easyui treegrid实现显示checkbox并能获取到选定值的

闲聊:

    小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕。

    也不知道最近是怎么了,一向特别爱吃的小颖,最近很没有食欲,中午不好好吃饭,就吃一个苹果,再吃几口米然后就饱了,晚上回去也不是很饿,但是到下午就开始头晕,哎!不知道自己是怎么了,昨天下午我们家大颖给我吃零食,我说我没有胃口,旁边的同事都笑了,都说不相信,我那么爱吃的人,竟然会说没胃口不想吃······,可是我真的不想吃啊啊啊啊啊啊啊。好啦不闲聊了,言归正传,下面一起来看看小颖写的demo吧。

注意:只支持狐火浏览器哦!

准备:

      下载easyui

代码:

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++) {                    if (!$((#check_ + sons[j]))[0].checked) {                        flag = false;                        break;                    }                }                if (flag){                  $((#check_ + parent.id))[0].checked = true;                }                while (flag) {                    parent = $("#test").treegrid("getParent", parent.id);                    if (parent) {                        sons = parent.sondata.split(,);                        for (j = 0; j < sons.length; j++) {                            if (!$((#check_ + sons[j]))[0].checked) {                                flag = false;                                break;                            }                        }                    }                }            }        }        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"  }]}]

 

easyui treegrid实现显示checkbox并能获取到选定值的