首页 > 其他分享 >BootStrap TreeView示例

BootStrap TreeView示例

时间:2024-07-12 19:22:58浏览次数:12  
标签:arr p1 示例 text BootStrap var TreeView data id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet">
     <link href="/Scripts/bootstrap/css/bootstrap-treeview.css" rel="stylesheet">

       <script src="/Scripts/bootstrap/js/jquery.js" type="text/javascript"></script>
      <script src="/Scripts/bootstrap/js/bootstrap-treeview.js"  type="text/javascript"></script>

</head>
<body>
<div id="tree"></div>

<input type="button" id="btn" value="查询" />

<script type="text/javascript">
    $(function () {
        function getTree() {
            // Some logic to retrieve, or generate tree structure


            var data = [{
                text: "p1",
                nodes: [{ text: "p1-1", id: '00001', nodeId: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}]

            }]
            return data;
        }
        var obj = {};
        obj.text = "123";
        $('#tree').treeview({
            data: getTree(),         // data is not optional
            levels: 5,
            multiSelect: true

        });

        $("#btn").click(function (e) {

            var arr = $('#tree').treeview('getSelected');

            alert(JSON.stringify(arr));
            for (var key in arr) {
                alert(arr[key].id);
            }

        })

    })
   
</script>
</body>
</html>

标签:arr,p1,示例,text,BootStrap,var,TreeView,data,id
From: https://www.cnblogs.com/joe-tang/p/7144796.html

相关文章

  • Bootstrap图片样式使用方法
    在Bootstrap中自带了几种图片样式,能够让你很快地对其进行使用,这几种样式使用起来相当简单,让我们一起来看看怎么快速调用Bootstrap图片样式。 Bootstrap图片圆角样式在现今的网站建设中,由于扁平化设计的趋势,我们经常会用用到一些CSS3的特性,例如圆角、渐变、阴影等。同样我们也......
  • JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
    转载:http://www.cnblogs.com/landeanfen/p/5821192.html#_label2  阅读目录一、x-editable组件介绍二、bootstrapTable行内编辑初始方案三、bootstrapTable行内编辑最终方案1、文本框2、时间选择框3、下拉框4、复选框5、“阴魂不散”的select2四、总结 正......
  • bootstrap-datetimepicker 项目
    项目 此项目是bootstrap-datetimepicker项目 的一个分支,原项目不支持 Time 选择。其它部分也进行了改进、增强,例如load 过程增加了对ISO-8601日期格式的支持。文档是拷贝/粘贴字原项目的文档,并且加入了更多细节说明。 别犹豫了,下载下来试试吧!下载ZIP包此地......
  • Java-Redis缓存穿透、缓存击穿及缓存雪崩(配解决方案及代码示例)
    前言在现代高并发的互联网应用中,缓存技术已成为提升系统响应速度与减轻后端数据库压力的关键手段。Redis,以其卓越的性能和丰富的数据结构,成为众多开发者构建缓存层的首选。然而,随着业务复杂度的增加,Redis缓存层也可能遭遇“缓存穿透”、“缓存击穿”以及“缓存雪崩”等现......
  • 在springboot 中使用Apache HttpClient 4的详细示例
    在SpringBoot中使用ApacheHttpClient,可以通过配置HttpClient的Bean并使用它来发起HTTP请求。下面是一个详细的示例,展示了如何在SpringBoot应用中集成和使用ApacheHttpClient。步骤1:添加依赖在你的pom.xml文件中添加ApacheHttpClient的依赖:<dependency>......
  • 在springboot 中使用Apache HttpClient 5的详细示例
    ApacheHttpComponentsClient5.x是HttpClient的最新版本,与4.x系列相比,5.x系列进行了许多改进和重构,提供了更现代的API和更好的性能。以下是使用步骤步骤1:添加依赖在你的pom.xml文件中添加ApacheHttpClient5.x的依赖:<dependency><groupId>org.apache.htt......
  • php实名认证示例、实人认证接口
    随着互联网的高速发展,人们可以发表言论的渠道越来越多。网络平台不断汲取各地、各人、各时发表的各种信息。人们喜欢将信息发布到微博、知乎、天涯、豆瓣等等网络平台,逐步的,网络信息进入大爆炸时代。这些大量涌现的信息中难免掺杂着一些不良信息,比如:虚假信息、污言秽语、违法......
  • 不用JavaScript实现鼠标移入判断示例
    要点利用了伪元素生成了4个三角形组成了一个正方形,通过hover哪个透明的三角形来判断用户的操作方位。具体实现HTML:<divclass="box"><divclass="box__right">Right→Left</div><divclass="box__left">Left→Right</div><divclas......
  • PHP请求示例商品详情数据(属性规格sku详情图等)示例,json格式
    在PHP中请求商品详情数据(包括属性、规格、SKU详情、图片等)通常涉及向一个API发送HTTP请求,然后解析返回的JSON格式数据。以下是一个示例流程,包括如何发送请求和如何处理返回的JSON数据。1.发送HTTPGET请求首先,你需要知道API的URL,以及是否需要任何认证(如API密钥、OAuth令牌等......
  • Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和
    场景存储过程存储过程是一组为了完成特定功能的SQL语句集合。使用存储过程的目的是将常用或复杂的工作预先用SQL语句写好并用一个指定名称存储起来,这个过程经编译和优化后存储在数据库服务器中,因此称为存储过程。当以后需要数据库提供与己定义好的存储过程的功能相同的服务时,......