zoukankan      html  css  js  c++  java
  • easyui treegrid实现显示checkbox并能获取到选定值的

    闲聊:

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

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

    注意:支持狐火和IE浏览器哦!不支持chrome

    准备:

          下载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++) {//如果子节点中存在没有选中的,则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="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"
      }]
    }]
  • 相关阅读:
    .NetCore Grpc 客服端 工厂模式配置授权
    DOCKER 拉取 dotnet 镜像太慢 docker pull mcr.microsoft.com too slow
    Introducing .NET 5
    VSCode 出现错误 System.IO.IOException: The configured user limit (128) on the number of inotify instances has been reached.
    Omnisharp VsCode Attaching to remote processes
    zookeeper3.5.5 centos7 完全分布式 搭建随记
    Hadoop2.7.7 centos7 完全分布式 配置与问题随记
    MySQL索引 索引分类 最左前缀原则 覆盖索引 索引下推 联合索引顺序
    SQL基础随记3 范式 键
    MySQL调优 优化需要考虑哪些方面
  • 原文地址:https://www.cnblogs.com/yingzi1028/p/6347514.html
Copyright © 2011-2022 走看看