tree的应用

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量117 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/zuoqun/p/7904013.html
版权 
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>

<link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" href="../resource/css/pintuer.css">
<link rel="stylesheet" href="../resource/css/admin.css">
<link rel="stylesheet" href="../resource/css/style.css">
<link rel="stylesheet" href="../resource/js/kindeditor/themes/default/default.css" />
<script type="text/javascript" src="../resource/js/jquery.js"></script>
<script type="text/javascript" src="../resource/js/pintuer.js"></script>
<script type="text/javascript" src="../resource/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../resource/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="../resource/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../resource/js/tagsinput/jquery.tagsinput.js"></script>
<script type="text/javascript" src="../resource/js/tagsinput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="../resource/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../resource/js/utils.js"></script>
<!-- <script type="text/javascript" src="../resource/js/util_tab.js"></script> -->
<script type="text/javascript" src="../resource/js/json2.js"></script>
<script charset="utf-8" src="../resource/js/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="../resource/js/kindeditor/lang/zh-CN.js"></script>
</head>
  <body>
  
  
  <!-- 用来动态的显示滚动条 -->
    <div class="easyui-panel panel-body panel-body-noheader" style="padding: 5px; width: 298px; height: 648px;">
        <!-- 用来显示加载的树 -->
        <ul id="tt"></ul> 
    </div>
    <!-- 用来在右侧显示详细的节点数据， class="iframe-admin" 使用的是已经写好的样式-->
    <div class="iframe-admin">
        <div class="panel-head clearfix lh30">
            <strong class="icon-reorder"> 组织机构管理</strong>
            <a class="button border-main icon-plus-square-o small-btn pull-right"  href="javascript:goAdd()"> +添加信息</a>
            <a class="button border-main icon-plus-square-o small-btn pull-right"  href="javascript:del()"> -删除信息</a>
        </div>

    <!-- 用来显示div,显示要添加的数据 -->
        <div id="codeAdd" style="margin-top:20px;width:100%;display:none;border:1px solid;border-color:#ccccff;height: 85%;padding-top: 70px">
            <form id="addForm" method="post" class="form-x"  >  
              <table class="form_table" style="height: 80%" >
              <tr>
                 <td class="label-title" style="width: 280px"><label for=""><span class="text-red">*</span>组织机构名称：</label></td>
                 <td>  
                     <div class="form-group">
                        <div class="field">  <input type="text" name="orgName" id="orgName" class="input w260" 
                        maxlength="100"  data-validate="required:请输入功能名称" /></div>
                    </div>
                 </td>
                 <td class="label-title"><label for=""><span class="text-red">*</span>上级名称：</label></td>
                 <td>  
                     <div class="form-group">
                        <div class="field" style="font-size: 14px;width: 260px" >
                            <span id="pname"></span>
                        </div>
                    </div>
                 </td>
               </tr>
               <tr>
                 <td class="label-title"><label for=""><span class="text-red">*</span>相关描述：</label></td>
                 <td>  
                     <div class="form-group">
                        <div class="field">  <input type="text" name="describes" id="describes" class="input w260" 
                        maxlength="500"  value="" /></div>
                    </div>
                 </td>
                 <td class="label-title"><label for=""><span class="text-red">*</span>创建人员：</label></td>
                 <td>  
                     <div class="form-group">
                         <div id="crtoper" class="field" style="font-size: 14px;width: 260px" ></div>
                    </div>
                 </td>
               </tr>  
               <tr>
                   <td>
                       <!-- 这里的信息是被选中节点的信息 -->
                       <input type="hidden" name="pId" id="pId"><!-- 上级id -->
                       <input type="hidden" name="id" id="id"><!-- 主键 -->
                   </td> 
               </tr>
               <tr>
               <td></td>
               <td>
                <button class="button bg-main icon-check-square-o" type="button" οnclick="save()"> 保存</button>
               </td>
               </tr>
            </table>
            </form>
        </div>
    
    </div>    
  
  <script type="text/javascript">
          //标记是修改还是添加
          var flag=null;
          $("#tt").tree({
                url:'${ctx}/org/findTreeDate.do?id=0',
                lines:true,//显示加减号    
              animate:true, //动画效果
              //展开前加载子节点
              onBeforeExpand:function(node){
                  $("#tt").tree("options").url="${ctx}/org/findTreeDate.do?id="+node.id;
              },
              //当节点被选中的时候将节点的详细信息显示在右侧div中
            onSelect:function(node){
                clear();
                $("#codeAdd").css("display","");
                $("#id").val(node.id);
                $("#orgName").val(node.text);
                $("#describes").val(node.attributes.describes);
                $("#pId").val(node.attributes.pId);
                if(node.attributes.pId!='0'&&$.trim(node.attributes.pId)!=""){
                    $("#pname").html(node.attributes.pname);
                }else{
                    $("#pname").html("没有上级节点");
                }
                $("#crtoper").html(node.attributes.crtoper);
                flag="update";
            }      
            });

    
    //进行信息的添加
    function goAdd(){
        //先清空表格内信息
        clear();
        //在添加子节点之前先展开选中的节点
        var selected = $('#tt').tree('getSelected');
        if(selected==null){
            $("#pId").val("0");
            $("#pname").html("没有上级节点");
        }else{
            $("#pId").val(selected.id);
            $("#pname").html(selected.text);
        }
        //显示添加信息的div
        if($("#codeAdd").css("display")=="none"){
            $("#codeAdd").css("display","");
        }
        //标记为设置为添加
        flag="add";
        
    }
    
    //删除指定的节点和子节点
    function del(){
        var note=$("#tt").tree("getSelected");
        if(note==null){
            $.messager.alert('提示','请选择要删除的信息！');
            return;
        }
        $.messager.confirm('提示', '确定要删除吗？',function(r){
            if(r){
                var args={"id":note.id};
                var url="${ctx}/org/delete.do";
                $.post(url,args,function(data){
                    if(data.success==true){
                        flushTree(); //刷新树
                        $("#codeAdd").css("display","none");
                    }
                    $.messager.show({
                        title: '提示信息',
                        msg: data.message,
                        timeout: 3000
                    })    
                });
            }else{
                return;
            }
        });
    
    }
    //刷新树
    function flushTree(){
        //更新整个树
        $('#tt').tree({
            url:'${ctx}/org/findTreeDate.do?id=0',
            lines:true,//显示加减号    
            animate:true,//动画效果
        });
    }
    
    //清空数据
    function clear(){
        $("#id").val("");
        $("#orgName").val("");
        $("#pId").val("");
        $("#pname").empty();
        $("#describes").val("");
        $("#crtoper").empty();
    }
    //将信息保存
    function save(){
        if($("#orgName").val().trim()==""){
            $.messager.alert('提示','请输入组织机构名称！');
            return;
        }
        var orgName=$("#orgName").val();
        var describes=$("#describes").val();
        var pId=$("#pId").val();
        $.messager.confirm('提示', '确定要保存吗？',function(r){    
            if(r){
                if(flag=="update"){
                    var id=$("#id").val();
                    var args={"id":id,"orgName":orgName,"describes":describes,"pId":pId};
                    var url="${ctx}/org/update.do";
                    $.post(url,args,function(data){
                        if(data.success==true){
                            $("#codeAdd").css("display","none");
                            flushTree(); //刷新树
                        }
                        $.messager.show({
                            title: '提示信息',
                            msg: data.message,
                            timeout: 3000
                        })    
                    });
                    return;
                }
                var args={"pId":pId,"orgName":orgName,"describes":describes};
                var url="${ctx}/org/add.do";
                $.post(url,args,function(data){
                    if(data.success==true){
                        $("#codeAdd").css("display","none");
                        flushTree(); //刷新树
                    }
                    $.messager.show({
                        title: '提示信息',
                        msg: data.message,
                        timeout: 3000
                    })    
                });
            }
        });
    }
  </script>
  
  </body>
</html>

 

转载于:https://www.cnblogs.com/zuoqun/p/7904013.html

weixin_33862041
关注
tree 命令
weixin_30917213的博客
07-13 672
LMXMN117:Mac Driver will.wei$ tree -N >/tmp/savs.txt (1)tree -a 显示所有文件和目录 (2)tree -d 显示目录名称而非内容 (3)tree -f 在每个文件或目录之前，显示完整的相对路径名称 ...
树 Tree 应用实例
01-13
有问题请QQ：410696570
Android tree应用框架
xiaoheliushuiya
05-12 184
简介 一个好的Android应用开发框架，可以加快Android开发速度，今天笔记基于许多开源项目自写了一款Android应用框架。 内容 框架包括：界面管理（Activity管理）、数据库操作（orm框架、加密等）、http交互、缓存管理、下载管理、路径管理、日志输出、网络管理、系统命令、加解密、stl容器、任务管理、奔溃管理、存储管理、其它辅助管理…。 解决思路如下： 界面管理：使用Sta...
树（tree）
m0_60957007的博客
04-25 194
树是一种由节点和边组成的非线性数据结构。每个节点都包含一个值和指向其子节点的指针。树的根节点是唯一的，它没有父节点。叶节点是没有子节点的节点。树可以为空，即不包含任何节点。一个节点可以有多个子节点，但每个子节点只有一个父节点。在树中，任意两个节点之间都有一条唯一的路径，这条路径由它们之间的边组成。从根节点到任意一个节点的路径被称为该节点的祖先路径。从一个节点到其子孙节点的路径被称为子孙路径。树可以用来表示层次结构，例如文件系统、组织结构、HTML文档等。
树的应用
xiaomimi1993的博客
08-07 4099
二叉排序树 平衡二叉树 哈夫曼树及哈夫曼编码
speedtree应用
CTW2000的博客
03-06 742
speedtree应用
结合Zerotree应用聚类算法的图像数据挖掘.pdf
07-14
针对这一问题，本文提出了一种结合Zerotree算法应用聚类算法进行图像数据挖掘的新思想。Zerotree算法来源于小波理论，它能够帮助我们确定图像数据中初始类的数量和位置，之后再通过聚类算法对图像进行分类。实验结果...
论文研究-多集群网格系统的RNTree应用研究及模拟实现.pdf
07-22
在对RNTree原理分析的基础上，将RNTree应用于组成P2P网络的多集群网格系统中，研究其查找过程以及查找性能。在单机上编程模拟了多集群网格系统的RNTree生成过程及查找过程。模拟方式能够避免在真实的大规模多...
ext grid tree 应用
07-24
在EXT JS框架中，"ext grid tree 应用"是一个常见的功能组合，它结合了Grid面板和Tree面板的优势，用于展示复杂的数据结构。Grid通常用于显示二维表格数据，而Tree则用于展示层次化的数据。在这个例子中，开发者通过...
多集群网格系统的RN-Tree应用研究及模拟实现
07-18
在对RN-Tree原理分析的基础上,将RN-Tree应用于组P2P网络的多集群网格系统中,研究其查找过程以及查找性能。在单机上编程模拟了多集群网格系统的RN-Tree生成过程及查找过程。模拟方式能够避免在真实的大规模多集群网格...
PowerTree中文教程
09-22
本教程将详细介绍 PowerTree 的基本概念、工作原理、功能特点和应用场景。 PDN 设计挑战 在设计大型电路板时，PDN 设计方法可能会面临一些挑战，包括： * 早期功耗估算难题 * 数据重用和仿真问题 * 跟踪原理图...
zTree应用实例详讲(4)
lvjianyu2007的专栏
06-23 1497
这一节，主要是讲用右击弹出菜单，实现重命名,删除，新建文件夹，且根节点，不能删除和重命名。 好，现在开始工作： 　　首先，第一步：我们要在页面上去新建一个div作为我们弹出的菜单，把这个div一开始设为display:none。因为要根据是否为根节点来判断是否有可以重命名和删除，所以我们最好用动态来控制弹出的样式。 　　在aspx中的任意位置加入以下div:  
使用JTree
zymaxs的专栏
02-15 2677
10-1:使用JTree组件：   java.lang.Object     --java.awt.Component      --java.awt.Container       --javax.swing.JComponent        --javax.swing.JTreeJTree构造函数:JTree():建立一棵系统默认的树。JTree(Hashtable value):利用Has
linux的tree指令的运用
zuggs_的博客
06-28 2778
方法/步骤 -a （ALL）打印所有文件和目录，默认不打印隐藏文件（那些以点开头的文件）tree .表示列出当前目录 tree ..列出上级目录。   -d (Directory)只列出目录。   -f (Full path)列出每个文件的完整路径 -p (permission)打印每个文件的文件类型和权限 -D (date)打印文件最后修改时...
K-D-TREE原理及应用
qq_33143379的博客
07-08 4653
        k-d-tree（即k-dimensional tree）是一棵形如二叉树的一种非常重要的空间划分数据结构，尤其在多维数据访问中有重要应用，它能显著降低运算次数、提高运算效率；主要应用于多维空间关键数据的搜索（如：范围搜索和最近邻搜索）。它是由Jon L. Bentley 于1975年在文献【2】中提出的，Jon L. Bentley 也是畅销书《编程珠玑》的作者。k-d-tree...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2780
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 828
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 409
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 850
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
MetaEdit+5.5中文教程：构建特定域建模语言与FamilyTree应用
MetaEdit+ 5.5中文教程专注于构建特定领域...MetaEdit+ 5.5中文教程为IT专业人士提供了关于如何在数字化研制环境下应用FamilyTree建模语言进行可靠性的系统设计与分析的实用指南，帮助他们提升工程设计效率和产品质量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值