jQuery EasyUI CheckBoxTree的级联选中

需求:子结点选中,父节点随之选中,父节点取消,子节点随之取消

代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/themes/default/easyui.css" rel="stylesheet" />
    <link href="js/themes/icon.css" rel="stylesheet" />
    <script src="js/jquery-1.8.0.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script src="js/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        var data = [{
            "id": 1,
            "text": "系统",
            "children": [{
                "id": 11,
                "text": "用户管理",
                "children": [{
                    "id": 19,
                    "text": "增加"
                }, {
                    "id": 3,
                    "text": "修改"
                }, {
                    "id": 5,
                    "text": "删除"
                }]
            }, {
                "id": 12,
                "text": "角色管理",
                "children": [{
                    "id": 13,
                    "text": "增加"
                }, {
                    "id": 3,
                    "text": "修改"
                }, {
                    "id": 5,
                    "text": "删除"
                }]
            }]
        }, {
            "id": 2,
            "text": "其他",
            "state": "closed"
        }];

        $(function () {
            $("#tt").tree({
                data: data,
                checkbox: true,
                cascadeCheck: false,
                onCheck: function (node, checked) {
                    if (checked) {
                        var parentNode = $("#tt").tree(‘getParent‘, node.target);
                        if (parentNode != null) {
                            $("#tt").tree(‘check‘, parentNode.target);
                        }
                    } else {
                        var childNode = $("#tt").tree(‘getChildren‘, node.target);
                        if (childNode.length > 0) {
                            for (var i = 0; i < childNode.length; i++) {
                                $("#tt").tree(‘uncheck‘, childNode[i].target);
                            }
                        }
                    }
                }
            });
        });

        function getChecked()
        {
            var arr = [];
            var checkeds = $(‘#tt‘).tree(‘getChecked‘, ‘checked‘);
            for (var i = 0; i < checkeds.length; i++) {
                arr.push(checkeds[i].id);
            }
            alert(arr.join(‘,‘));
        }

    </script>
</head>
<body>
    <ul id="tt"></ul>
    <input type="button" value="获取选中" onclick="getChecked()" />
</body>
</html>

如图:

时间: 2024-10-07 12:06:10

jQuery EasyUI CheckBoxTree的级联选中的相关文章

JQuery EasyUi Tree获取所有checkbox选中节点的id和内容

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta name="generator" content="HTML Tidy, see www.w3.org">      

Jquery EasyUI Combotree根据选中的值展开所有父节点

Jquery EasyUI Combotree根据选中的值展开所有父节点  Jquery EasyUI Combotree 展开父节点, Jquery EasyUI Combotree根据子节点选中的值,展开前面所有父节点, Jquery EasyUI Combotree获取选中的值 ================================ ?Copyright 蕃薯耀 2018年5月7日 http://www.cnblogs.com/fanshuyao/ 一.Combotree获取父节

jquery easyui datagrid 分页 详解

前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows(每页显示的记录数)和page(当前第几页)然后读取相应页数的记录,和总记录数total一块返回即可. 1.界面 2.前端代码 <table id="dg" title="文章管理"

第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件

jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使用方法,这个组件依赖于 DataGrid(数据表格)组件. 一.加载方式 建立一个 JSON 文件 [ { "id": 1, "name": "系统管理", "date": "2015-05-10", &quo

jQuery EasyUI 右键菜单--关闭标签/选项卡

目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: 方式 一: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOC

使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享

使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发人员更轻松的打造出功能丰富而且美观的UI界面.开发人员不须要编写复杂的javascript,也不须要对css样式有深入的了解,开发人员须要了解的仅仅有一些简单的html标签.jQuery EasyUI为我们提供了大多数UI控件的使用

04 jquery easyui 之 Tree

树(Tree)可以在一个空的 <ul> 元素中定义,可使用 javascript 加载数据. 在body中添加ul标签 <ul id="tt"></ul> 然后在使用javascript代码加载数据 使用JSON加载数据 $('#tt').tree({ url:'treedata.json'}); 树的数据格式(Tree Data Format) 每个节点可以包括下列属性: id:节点的 id,它对于加载远程数据很重要. text:要显示的节点文本.

jQuery EasyUI教程之datagrid应用(三)

今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能:jQuery EasyUI教程之datagrid应用(二) 接下来就是数据的增删改查了,首先我们在页面中添加功能按钮 这里很简单就是datagrid的toolbar属性 接下来我们实现按键的功能 查询比较麻烦我们最后写,先写添加吧,既然要添加,就应该有表格或是输入的文本框吧,还要进行提交,那就要有f

jQuery EasyUI使用教程之创建标签页

<jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件.标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体. 标签一次只能显示一个面板,每个面板都有标题.图表和关闭按钮.当标签被选中之后,会显示相应面板的内容. 查看演示 使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板. < div class="easyui-tabs" style="width:400px;height:100