checkbox的jsTree的一个调用

最新推荐文章于 2021-10-20 09:49:52 发布

原创最新推荐文章于 2021-10-20 09:49:52 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #jQuery #JavaScript #UI #HTML #ViewUI

开发专栏收录该内容

38 篇文章

订阅专栏

本文详细记录了如何利用jQuery与树形结构结合，实现动态加载数据和交互操作的过程。通过使用jQuery的树插件和AJAX请求，动态地从服务器获取JSON数据，并构建树形结构展示。文章涵盖了数据的异步加载、树节点的展开与折叠、以及树节点的选择与事件处理。展示了在前端页面中高效组织和展示层级数据的方法。

折腾了好几天，才整理出来。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.tree.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.tree.checkbox.js"></script>
    <script type="text/javascript" src="tree.js"></script>
    <link href="js/themes/checkbox/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="tree"></div>
</body>
</html>

tree.js的代码


       $(function () {
            $.ajaxSetup({cache:false});
            $("#tree").tree({
                data : {
                    type : "json",
                    async : true,
                    opts : {
                        async : true,
                        method : "GET",
                        //向后台发送请求的url或json格式的数据文件
                        url : "json_data.json"
                    }
                },
                root : { attributes : { "id" : "0" }, data : "ROOT", state : "closed"},
                lang:{
                    loading:"目录加载中……"
                },
                ui:{
                    theme_name:'checkbox'
                },
                callback : {
                    // Make sure static is not used once the tree has loaded for the first time
                    onload : function (t) {
                        t.settings.data.opts.static = false;
                    },
                    beforedata : function (n, t) {
                        if (n == false)
                            t.settings.data.opts.static = t.settings.root;
                        else
                            return {parent_Id : $(n).attr("id") }
                    },
                    //checkbox树展开之后，设置节点为选中状态
                    onopen_all : function() {
                      var selectedIds = [];
                      for (var i = 0; i < selectedIds.length; i++)  {
                       jQuery.tree.plugins.checkbox.check($("#"+ selectedIds[i]+""));
                      }
                    }
                },
                plugins:{
                    checkbox:{}
                }
            });
        });