AngularJS+JQuery 做的一个复选框树形结构

最新推荐文章于 2024-05-18 09:35:07 发布
最新推荐文章于 2024-05-18 09:35:07 发布
阅读量3.0k 收藏 1
点赞数
分类专栏： 前端框架和插件及方法 文章标签： angularjs jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36020545/article/details/52586478
版权 
<html ng-app="com.ngbook.demo" class="ng-scope">
<head>
    <meta name="description" content="ng trrview example">
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script src="jquery.min.js"></script>
    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
        <meta charset="utf-8">
    <title>JS Bin</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style id="jsbin-css">
        ul{
            list-style: none;
        }
        .text-field{
            cursor: pointer;
        }
        .check-box{
            width: 24px;
            height: 18px;
            border-radius: 8px;
        }
    </style>
</head>
<body>
<div ng-controller="DemoController as demo" class="container">


    <div class="row">
        <h2>Tree view</h2>
        <tree-view tree-data="demo.tree" text-field="name" value-field='id'
                   item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)" can-checked="true" ></tree-view>
    </div>

<!--    <div class="row">
        <h2>Item selected</h2>
        <pre>{{demo.selectedItem | json}}</pre>
    </div>-->
    <script type="text/ng-template" id="/treeView.html">
        <ul class="tree-view">
            <li ng-repeat="item in treeData" ng-include="itemTemplateUrl || '/treeItem.html'" ></li>
        </ul>
    </script>
    <script type="text/ng-template" id="/treeItem.html">
        <i ng-click="itemExpended(item, $event);" class="{{getItemIcon(item)}}"></i>

        <input id="{{item.id}},{{item.pid}}"  type="checkbox" ng-model="item.$$isChecked" class="check-box" ng-if="canChecked">


        <span class='text-field' ng-click="warpCallback('itemClicked', item, $event);" >{{item[textField]}}</span>
        <ul ng-if="!isLeaf(item)"
            ng-show="item.$$isExpend">
            <li ng-repeat="item in item.children" ng-include="itemTemplateUrl || '/treeItem.html'">
            </li>
        </ul>
    </script>

</div>
<script>try     {angular.module("com.ngbook.demo", [])
        .controller("DemoController", ['$http',function($http){
            var vm = this;
            vm.tree = [
                {
                    "id":"1",
                    "pid":"0",
                    "name":"家用电器",
                    "children":[
                        {
                            "id":"4",
                            "pid":"1",
                            "name":"大家电",
                            "children":[
                                {
                                    "id":"7",
                                    "pid":"4",
                                    "name":"空调",
                                    "children":[
                                        {
                                            "id":"15",
                                            "pid":"7",
                                            "name":"海尔空调"
                                        },
                                        {
                                            "id":"16",
                                            "pid":"7",
                                            "name":"美的空调"
                                        }
                                    ]
                                },
                                {
                                    "id":"8",
                                    "pid":"4",
                                    "name":"冰箱"
                                },
                                {
                                    "id":"9",
                                    "pid":"4",
                                    "name":"洗衣机"
                                },
                                {
                                    "id":"10",
                                    "pid":"4",
                                    "name":"热水器"
                                }
                            ]
                        },
                        {
                            "id":"5",
                            "pid":"1",
                            "name":"生活电器",
                            "children":[
                                {
                                    "id":"19",
                                    "pid":"5",
                                    "name":"加湿器"
                                },
                                {
                                    "id":"20",
                                    "pid":"5",
                                    "name":"电熨斗"
                                }
                            ]
                        }
                    ]
                },
                {
                    "id":"2",
                    "pid":"0",
                    "name":"服饰",
                    "children":[
                        {
                            "id":"13",
                            "pid":"2",
                            "name":"男装"
                        },
                        {
                            "id":"14",
                            "pid":"2",
                            "name":"女装"
                        }
                    ]
                },
                {
                    "id":"3",
                    "pid":"0",
                    "name":"化妆",
                    "children":[
                        {
                            "id":"11",
                            "pid":"3",
                            "name":"面部护理"
                        },
                        {
                            "id":"12",
                            "pid":"3",
                            "name":"口腔护理"
                        }
                    ]
                }
            ];


        }])
        .directive('treeView',[function(){

            return {
                restrict: 'E',
                templateUrl: '/treeView.html',
                scope: {
                    treeData: '=',
                    canChecked: '=',
                    textField: '@',
                    itemClicked: '&',
                    itemCheckedChanged: '&',
                    itemTemplateUrl: '@'
                },
                controller:['$scope', function($scope){
                    $scope.itemExpended = function(item, $event){
                        item.$$isExpend = ! item.$$isExpend;
                        $event.stopPropagation();
                    };

                    $scope.getItemIcon = function(item){
                        var isLeaf = $scope.isLeaf(item);

                        if(isLeaf){
                            return 'fa fa-leaf';
                        }

                        return item.$$isExpend ? 'fa fa-minus': 'fa fa-plus';
                    };

                    $scope.isLeaf = function(item){
                        return !item.children || !item.children.length;
                    };

                    $scope.chk = function(callback , item){
                        var itemId = item.id;

                    };

                    $scope.warpCallback = function(callback, item, $event){
                        ($scope[callback] || angular.noop)({
                            $item:item,
                            $event:$event
                        });
                    };
                }]
            };
        }]);
} catch (error) { throw error; }

//# sourceURL=vefuqu.js
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script  type="text/javascript">
    // Apparently click is better chan change? Cuz IE?
   $(function(){
       // Apparently click is better chan change? Cuz IE?
       $('input[type="checkbox"]').change(function() {

           var checked = $(this).prop("checked"),
                   container = $(this).parent(),
                   siblings = container.siblings();

           container.find('input[type="checkbox"]').prop({
               indeterminate: false,
               checked: checked
           });

           function checkSiblings(el) {

               var parent = el.parent().parent(),
                       all = true;

               el.siblings().each(function() {
                   return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
               });

               if (all && checked) {

                   parent.children('input[type="checkbox"]').prop({
                       indeterminate: false,
                       checked: checked
                   });

                   checkSiblings(parent);

               } else if (all && !checked) {

                   parent.children('input[type="checkbox"]').prop("checked", checked);
                   parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
                   checkSiblings(parent);

               } else {

                   el.parents("li").children('input[type="checkbox"]').prop({
                       indeterminate: true,
                       checked: false
                   });

               }

           }

           checkSiblings(container);
       });
   });

</script>


</body>

</html>
首先是利用angularJS 的递归  然后加上Jquery实现复选框的全选  可以摘下来试试










然后 感谢网络上那些 前辈 大牛们的分享  谢谢
然后 感谢网络上那些 前辈 大牛们的分享  谢谢
David宫洪深
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
angularjs--制作树形菜单
...
01-15 8599
效果图 数据源 /* Controllers */ function ctrDataList($scope) { $scope.ctrDataList_list = [ { "title":"General", "con":[{ "pid":"g1", "head": "Users", "bo
angular-multi-select-tree:原生Angular多选树。 没有jQuery
05-01
角度多选树 原生Angular多选树。 没有JQuery。 如果您使用此模块，则可以在给它一个赞许。 演示页： [演示]（ ） 特征： 待定 实施细节： 待定 设计细节： 回调： 待定 用法： 通过以下任意一种方式获取angular-multi-select-tree的二进制文件。 bower install angular-multi-select-tree 或自动凉亭的风俗包括： bower install angular-multi-select-tree -save 或bower.json { "dependencies": [..., "multi-select-tree: "latest_version eg - "1.1.0" ", ...], } 确保将脚本加载到html中。 < script type =" text/javascript " s
angularjs下拉树控件
06-06
实现树的下拉效果，和ExtJs的treecombox大同小异。
(简)树形ztree 与angularjs结合，实现下级数据，点击复选框 填写到输入框里
weixin_34249678的博客
07-26 438
html:<link href="vendors/zTreeStyle/zTreeStyle.css" rel="stylesheet" />生态系统类型*：<asp:TextBox ID="TextBox3" CssClass="form-control" runat="server" MaxLength="200" autocomplete="off...
Angular Tree Control：一款强大的AngularJS树形组件
最新发布
gitblog_00007的博客
05-18 414
Angular Tree Control：一款强大的AngularJS树形组件 项目地址:https://gitcode.com/wix-incubator/angular-tree-control 在Web开发中，展示层级关系的数据时，树形控件往往是最佳选择。Angular Tree Control是一款纯AngularJS编写的树状组件，它以高效、可定制和响应式设计为特色，为你的应用程序带来简...
angular复选框式js树形菜单（二）
weixin_34362875的博客
11-03 121
删除（过滤）树形结构某一个子节点： function filterTreeData(treeData){ angular.forEach(treeData,function(item){ if (item.$$checked===undefine||item.$$checked===false) { _.remove(treeData,i...
Angular_树形控件
Martin 的博客
03-16 5955
Tree树形控件何时使用#文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。代码演示root1child1child1.1child1.2child2root2root3基本最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。root1root2child2.1ch...
Angular 实现树形菜单（多级菜单）功能模块
热门推荐
xiaoxinshuaiga的博客
03-30 2万+
前言本文要分享的是一个多级菜单效果，也就是传说中的树形结构菜单，理论上支持无限级菜单，当然数据结构要一定的要求，但这都不是什么难事，因为我们可以把数据组装成所需要的结构。下面这个例子虽然不是很完美好，但是估计也够用了。这个多级菜单是模仿 Angular 官方的左侧菜单效果来做的，效果的相似度应该达到 99%，本文内容有点多（主要是代码），因为我想把所有的代码都贴出来，尽量不让你幻想缺失的代码。好了...
angular6中使用树形插件
lhxsirky的博客
06-24 4081
效果图如下： 1、在app.model.ts文件中引入ng-zorro框架插件，代码如下 import { NgZorroAntdModule, NZ_I18N, en_US, zh_CN} from 'ng-zorro-antd'; 2、在需要使用树形插件的组件中进行引入树形插件： import { NzFormatEmitEvent,NzTreeNode,NzTreeCompo...
带复选框JS树 Javascript树 JS树 树形菜单
07-13
带复选框JS树 Javascript树 JS树 树形菜单
Angular使用ngx-treeview实现异步加载多选选择树
shiyc12的博客
02-18 917
最近遇到个问题，ngx-treeview这个控件不支持原生的异步数据加载，也没有点击展开时的“onExpandCollapse”事件，导致只能一次性地把全部数据加载进去，很慢。我并非前端开发人员，对typescript、angular这些都不太熟悉，所以花了两天时间才解决，以此记录。 ngx-treeview官方文档：ngx-treeview - npm (npmjs.com) 以及小例子：ngx-treeview (leovo2708.github.io) 我的方法： 自定义ng-template
基于angularjs的嵌套指令实现无限级下拉树菜单
01-31
该文件包含css样式和package.json文件，配合博客《基于angularjs的嵌套指令实现无限级下拉树菜单》使用。
AngularJS实现树形结构(ztree)菜单示例代码
11-26
树形结构 树形结构有多种形式和实现方式，zTree可以说得上是一种比较简洁又美观的且实现起来也相对简单。zTree是一个依靠jQuery实现的多功能“树插件”。它最大的优点是配置灵活，只要id与pid的值相同就可形成一个简单的父子结构。再加上免费开源，使用zTree的人越来越多。 效果图如下 首先你需要知道AngularJS的双向数据绑定是什么才可以更好的理解下面的代码，想了很久才想出用下面的代码来实现左侧菜单树形结构 要实现上面的功能你需要操作如下步骤： 在HTML标签内添加ng-app，让AngularJS掌管整个HTML文档 <html lang="en" ng-app="myApp
带有复选框的JS树状菜单
01-24
这个是带有复选框的JS树状菜单，免费给大家分享下
Angular4 树组件的使用
请叫我神的博客
08-22 2182
树用的不多,但是有些项目的确需要,那么angular4是如何使用树的,我看过很多树组件,也看群里面有人问一些树的问题,可惜在我做这个树之后,我在众多的树里面选了这颗树,个人感觉挺好用的,功能众多,基本可以郎阔所有需求. 废话不说,先上效果图:
angularjs的angular-tree-dnd、angular-tree-control树结构控件简单使用
weixin_43996999的博客
07-22 2264
个人总结 前言：项目已经上线，但还是有挺多功能不怎么了解，例如：菜单管理、用户管理、权限、数据字典等等，今天在这里简单的梳理一下项目中的菜单管理功能(今天刚看了大半天，怕后面忘了，赶紧写上！) 做树形图的话用angular-ui-tree比较方便，但这个控件并不支持树形表格 先说说数据格式的问题，说到树形图，很多人脑子里出现的数据格式可能就是子节点套在父节点里面，子子节点再套在子节点里面，一...
AngularJs 实现下拉树
f的博客
11-08 2580
点击部门展开或者折叠，点击箭头选择人员
HTML+CSS+jQuery实现：设置复选框至少3个。设置按钮，全选，反选，全不选。
05-30
好的，我可以为您提供一个基本的HTML+CSS+jQuery示例实现，如下所示： ```html <!DOCTYPE html> <html> <head> <title>复选框操作示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style type="text/css"> .container { margin: 20px; } .checkbox-group { margin-bottom: 10px; } .checkbox-group label { margin-right: 10px; } .button-group { margin-top: 10px; } </style> </head> <body> <div class="container"> <div class="checkbox-group"> <label><input type="checkbox" name="checkbox[]" value="1">选项1</label> <label><input type="checkbox" name="checkbox[]" value="2">选项2</label> <label><input type="checkbox" name="checkbox[]" value="3">选项3</label> <label><input type="checkbox" name="checkbox[]" value="4">选项4</label> <label><input type="checkbox" name="checkbox[]" value="5">选项5</label> </div> <div class="button-group"> <button id="select-all">全选</button> <button id="select-inverse">反选</button> <button id="select-none">全不选</button> </div> </div> <script type="text/javascript"> $(function() { // 全选 $('#select-all').click(function() { $('input[type="checkbox"]').prop('checked', true); }); // 反选 $('#select-inverse').click(function() { $('input[type="checkbox"]').each(function() { $(this).prop('checked', !$(this).prop('checked')); }); }); // 全不选 $('#select-none').click(function() { $('input[type="checkbox"]').prop('checked', false); }); }); </script> </body> </html> ``` 在这个示例中，我们首先定义了一个包含5个复选框的`checkbox-group`，并且定义了一个包含三个按钮的`button-group`。然后，我们使用jQuery来实现三个操作： 1. 全选：当用户点击`select-all`按钮时，我们使用`prop`方法将所有复选框的`checked`属性设置为`true`，从而实现全选的功能。 2. 反选：当用户点击`select-inverse`按钮时，我们使用`each`方法遍历所有复选框，并对每个复选框的`checked`属性取反，从而实现反选的功能。 3. 全不选：当用户点击`select-none`按钮时，我们使用`prop`方法将所有复选框的`checked`属性设置为`false`，从而实现全不选的功能。 希望这个示例能够帮助您实现您的需求！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值