youshini
youshini

Ext.tree.TreePanel

转载：http://blog.csdn.net/tinyyys/archive/2009/03/2**027142.aspx

个人只是进行了测试，理解而已。原文中使用的数据库是SQL 2000的，而本人使用的是mysql，故做了一点点的更改。

 【注意】：以下所有引用资源的路径都是根据自己的资源位置来配置的。

第一步：创建treePanel.html 

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>测试Ext.tree.TreePanel</title>  
  6. <link rel="stylesheet" type="text/css" href="../static/lib/ext/resources/css/ext-all.css" />  
  7. <script type="text/javascript" src="../static/lib/ext/adapter/ext/ext-base.js"></script>  
  8. <script type="text/javascript" src="../static/lib/ext/ext-all.js"></script>  
  9. <link rel="stylesheet" type="text/css" href="../style/comment.css" />  
  10. <script type="text/javascript" src="../js/treePanel.js" charset="utf-8"></script>  
  11. <link rel="shortcut icon" href="x.ico" />  
  12. </head>  
  13. <body>  
  14.   <div id="tree-panel" style="overflow:auto; height:600px;width:200px;border:2px solid #c3daf9;"></div>  
  15. </body>  
  16. </html>  

第二步：创建含Ext.onRready函数的treePanel.js文件

Code:
  1. Ext.onReady(function(){  
  2.     Ext.QuickTips.init();// 浮动信息提示  
  3.     Ext.BLANK_IMAGE_URL = '../static/lib/ext/resources/images/default/s.gif';// 替换图片文件地址为本地  
  4.      
  5.     // 创建一个简写  
  6.     var _Tree = Ext.tree;  
  7.     // 定义根节点的Loader  
  8.     var _treeloader = new _Tree.TreeLoader({  
  9.             // dataUrl : 'tree.jsp'//这里可以不需要指定URL，在加载前事件响应里面设置  
  10.             });  
  11.     // 添加一个树形面板  
  12.     var _treepanel = new _Tree.TreePanel({  
  13.         // renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。  
  14.         el : 'tree-panel',// 将树形添加到一个指定的div中,非常重要！  
  15.         region : 'west',  
  16.         title : '功能菜单',  
  17.         width : 200,//面板宽度  
  18.         minSize : 180,  
  19.         maxSize : 250,  
  20.         split : true,  
  21.         autoHeight : false,  
  22.         frame : true,// 美化界面  
  23.         // title : '可编辑和拖动的异步树',//标题  
  24.         // autoScroll : true, // 自动滚动  
  25.         enableDD : true,// 是否支持拖拽效果  
  26.         containerScroll : true,// 是否支持滚动条  
  27.         rootVisible : true, // 是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性  
  28.         border : true, // 边框  
  29.         animate : true, // 动画效果  
  30.         loader : _treeloader // 树加载  
  31.         });  
  32.           
  33.         // 异步加载根节点  
  34.        var _rootnode = new _Tree.AsyncTreeNode({  
  35.                 id : '0',  
  36.                 text : '家电品牌总类',  
  37.                 draggable : false,// 根节点不容许拖动  
  38.                 expanded : true  
  39.             });  
  40.       // 为tree设置根节点  
  41.       _treepanel.setRootNode(_rootnode);  
  42.         
  43.       // 响应加载前事件，传递node参数  
  44.      _treepanel.on('beforeload', function(node) {  
  45.            _treepanel.loader.dataUrl = 'tree.jsp?parentId=' + node.id; // 定义子节点的Loader  
  46.          });  
  47.   
  48.     // 渲染树形  
  49.     _treepanel.render();  
  50.     // 展开节点,第一个参数表示是否级联展开子节点  
  51.     _rootnode.expand(false);  
  52.       
  53.     // 设置树的点击事件   【测试点击事件不影响  树的其他效果】  
  54.     var _treeClick=function (node, e) {   //contentPanel 为定义的TabPanel  
  55.         if (node.isLeaf()) {  
  56.             e.stopEvent();  
  57.             var n = contentPanel.getComponent(node.id); //通过node的id 获取组件  
  58.             if (!n) {                                  //如果不存在   则new 一个出来  
  59.                 var n = contentPanel.add({  
  60.                             'id' : node.id,  
  61.                             'title' : node.text,  
  62.                             closable : true,  
  63.                             autoLoad : {  
  64.                                 url : 'tabFrame.jsp?url=grid.html',  
  65.                                 scripts : true  
  66.                             } // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性  
  67.                         });  
  68.             }  
  69.             contentPanel.setActiveTab(n);  
  70.         }  
  71.     }  
  72.       
  73.     // 增加鼠标单击事件  
  74.     _treepanel.on('click', _treeClick);  
  75.   
  76.    
  77.   
  78.     // 定义右键菜单  
  79.     var rightClick = new Ext.menu.Menu({  
  80.                 id : 'rightClickCont',  
  81.                 items : [{  
  82.                             id : 'rMenu1',  
  83.                             text : '添加节点',  
  84.                             // 增加菜单点击事件  
  85.                             handler : function() {  
  86.                                 alert('添加节点的实现！');  
  87.                             }  
  88.                         }, {  
  89.                             id : 'rMenu2',  
  90.                             text : '编辑节点'  
  91.                         }, {  
  92.                             id : 'rMenu3',  
  93.                             text : '删除节点'  
  94.                         }]  
  95.             });  
  96.     // 增加右键点击事件  
  97.     _treepanel.on('contextmenu', function(node, event) {// 声明菜单类型  
  98.                 event.preventDefault();// 阻止浏览器默认右键菜单显示  
  99.                 rightClick.showAt(event.getXY());// 取得鼠标点击坐标，展示菜单  
  100.        });  
  101.       
  102.         /* 
  103.      * 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性，分别为dropNode,target,point 
  104.      * 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点 
  105.      * 3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。 
  106.      * 
  107.      */  
  108.   
  109.     _treepanel.on('nodedrop', function(e) {  
  110.                 if (e.point == 'append') {  
  111.                     alert('当前"' + e.dropNode.text + '"划到"' + e.target.text+ '"里面！');  
  112.                 } else if (e.point == 'above') {  
  113.                     alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text + '"上面！');  
  114.                 } else if (e.point == 'below') {  
  115.                     alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text + '"下面！');  
  116.                 }  
  117.             });  
  118.   
  119.     // 在原有的树形添加一个TreeEditor  
  120.     var _treeEditer = new _Tree.TreeEditor(_treepanel, {  
  121.                 allowBlank : false  
  122.             });  
  123.   
  124.     /* 
  125.      * 为创建的treeEditer添加事件 有两个事件最为常用，一个为beforestartedit另一个为complete 
  126.      * 从名字就可以看出，beforestartedit事件是在编辑前的事件，因此可以通过它来判断那些节点可以编辑那些不可以。 
  127.      * complete为编辑之后的事件，在这里面可以添加很多事件，比如添加一个Ext.Ajax向后台传送修改的值等等。 
  128.      */  
  129.   
  130.     _treeEditer.on("beforestartedit", function(_treeEditer) {  
  131.                 var _tempNode = _treeEditer.editNode;// 将要编辑的节点  
  132.                 if (_tempNode.isLeaf()) {// 这里设定叶子节点才容许编辑  
  133.                     return true;  
  134.                 } else {  
  135.                     return false;  
  136.                 }  
  137.             });  
  138.   
  139.     _treeEditer.on("complete", function(_treeEditer) {  
  140.                 Ext.Msg.alert("被修改为" + _treeEditer.editNode.text);  
  141.             });  
  142.          
  143.     // （1）通过TabPanel控件的html属性配合<iframe>实现。该方法是利用  
  144.     // html属性中包含<iframe>的语法来调用另一个页面，具体见代码。  
  145.     // （2）通过TabPanel控件的autoLoad属性实现。该方法是利用autoLoad属性，它有很多参数，  
  146.     // 其中有两个比较重要，url表示要载入的文件，scripts表示载入的文件是否含有脚本，该属性相当重要，  
  147.     // 如果在新的页面中要创建Ext控件，必须指定该参数。该方法实现较前一个复杂，因为引入的文件不是一个完整的html文件，  
  148.     // 有可能只是内容的一部分，但是资源占用较少，而且载入速度较快（它有一个载入指示）  
  149.   
  150.     // 添加第一个节点(html)  
  151.     _treepanel.root.appendChild(new Ext.tree.TreeNode({  
  152.         id : 'htmlPanel',  
  153.         text : '通过html打开',  
  154.         listeners : {  
  155.             'click' : function(node, event) {  
  156.                 event.stopEvent();  
  157.                 var n = contentPanel.getComponent(node.id);  
  158.                 if (!n) { // 判断是否已经打开该面板  
  159.                     n = contentPanel.add({  
  160.                         'id' : node.id,  
  161.                         'title' : node.text,  
  162.                         closable : true, // 通过html载入目标页  
  163.                         html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="grid.html"></iframe>'  
  164.                     });  
  165.                 }  
  166.                 contentPanel.setActiveTab(n);  
  167.             }  
  168.         }  
  169.   
  170.     }));  
  171.   
  172.     // 添加第二个节点(autoLoad)  
  173.     _treepanel.root.appendChild(new Ext.tree.TreeNode({  
  174.                 id : 'autoLoadPanel',  
  175.                 text : '通过autoLoad打开',  
  176.                 listeners : {  
  177.                     'click' : function(node, event) {  
  178.                         event.stopEvent();  
  179.                         var n = contentPanel.getComponent(node.id);  
  180.                         if (!n) { // //判断是否已经打开该面板  
  181.                             n = contentPanel.add({  
  182.                                         'id' : node.id,  
  183.                                         'title' : node.text,  
  184.                                         closable : true,  
  185.                                         autoLoad : {  
  186.                                             url : 'tabFrame.jsp?url=grid.html',  
  187.                                             scripts : true  
  188.                                         } // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性  
  189.                                     });  
  190.                         }  
  191.                         contentPanel.setActiveTab(n);  
  192.                     }  
  193.                 }  
  194.            }));    
  195.          
  196.       // 右边具体功能面板区  
  197.     var contentPanel = new Ext.TabPanel({  
  198.         region : 'center',  
  199.         enableTabScroll : true,  
  200.         activeTab : 0,  
  201.         items : [{  
  202.             id : 'homePage',  
  203.             title : '首页',  
  204.             autoScroll : true,  
  205.          //   closable : true,  
  206.             html : '<div class="tabPanel-treePanel">Tree控件和TabPanel控件结合功能演示</div>'  
  207.         }]  
  208.     });  
  209.   
  210.     new Ext.Viewport({  
  211.                 layout : 'border', // 使用border布局  
  212.                 defaults : {  
  213.                     activeItem : 0  
  214.                 },  
  215.                 items : [_treepanel, contentPanel]  
  216.             });  
  217.    
  218.               
  219. });  

其实这样子就可以运行了，只是动态加载的数据无法加载进去而已。以下是从后台数据库获取json格式数据的操作。

   1)建立一个树节点的bean，封装一个树节点。

   2)连接数据库，做相关操作之后，以json格式数据传回_treepanel.loader.dataUrl = 'tree.jsp?parentId=' + node.id; // 定义子节点的Loader。【实际上，就是一个字符串】

   3)tree.jsp

Code:
  1. <%@ page language="java" pageEncoding="utf-8"%>  
  2.   
  3. <jsp:useBean class="com.xxx.javabean.JSONTree" id="JSONTree"></jsp:useBean>  
  4.   
  5. <%  
  6.     String parentId = "";  
  7.     if (request.getParameter("parentId") != null) {  
  8.         parentId = request.getParameter("parentId").toString();  
  9.     }  
  10.     JSONTree.setparentId(parentId);  
  11. %>  
  12. <%=JSONTree.getJSONString()%>  
Code:
  1. package com.xxx.javabean;  
  2.   
  3. /** 
  4.  * @author nothing2012 
  5.  *定义树节点的属性，包括节点ID、Text、图标、是否为叶子节点、是否展开等。 
  6.  */  
  7.   
  8. public class JSONTreeNode {  
  9.     private String id;            //ID  
  10.     private String text;          //节点显示  
  11.     private String cls;           //图标  
  12.     private boolean leaf;         //是否叶子  
  13.     private String href;          //链接  
  14.     private String hrefTarget;    //链接指向  
  15.     private boolean expandable;   //是否展开  
  16.     private String description;   //描述信息  
  17.     public String getId() {  
  18.         return id;  
  19.     }  
  20.     public void setId(String id) {  
  21.         this.id = id;  
  22.     }  
  23.     public String getText() {  
  24.         return text;  
  25.     }  
  26.     public void setText(String text) {  
  27.         this.text = text;  
  28.     }  
  29.     public String getCls() {  
  30.         return cls;  
  31.     }  
  32.     public void setCls(String cls) {  
  33.         this.cls = cls;  
  34.     }  
  35.     public boolean isLeaf() {  
  36.         return leaf;  
  37.     }  
  38.     public void setLeaf(boolean leaf) {  
  39.         this.leaf = leaf;  
  40.     }  
  41.     public String getHref() {  
  42.         return href;  
  43.     }  
  44.     public void setHref(String href) {  
  45.         this.href = href;  
  46.     }  
  47.     public String getHrefTarget() {  
  48.         return hrefTarget;  
  49.     }  
  50.     public void setHrefTarget(String hrefTarget) {  
  51.         this.hrefTarget = hrefTarget;  
  52.     }  
  53.     public boolean isExpandable() {  
  54.         return expandable;  
  55.     }  
  56.     public void setExpandable(boolean expandable) {  
  57.         this.expandable = expandable;  
  58.     }  
  59.     public String getDescription() {  
  60.         return description;  
  61.     }  
  62.     public void setDescription(String description) {  
  63.         this.description = description;  
  64.     }  
  65. }  
Code:
  1. package com.xxx.javabean;  
  2.   
  3. import java.sql.Connection;  
  4. import java.sql.DriverManager;  
  5. import java.sql.ResultSet;  
  6. import java.sql.SQLException;  
  7. import java.sql.Statement;  
  8. import java.util.ArrayList;  
  9. import java.util.List;  
  10.   
  11. import net.sf.json.JSONArray;  
  12.   
  13. /* 
  14.  * @create by nothing2012 
  15.  */  
  16. public class JSONTree {  
  17.     private String parentId;  
  18.   
  19.     public String getJSONString() {  
  20.         Connection con = null;  
  21.         Statement st = null;  
  22.         ResultSet rs = null;  
  23.         List<JSONTreeNode> treeNodeArray = null;  
  24.         //传一个父节点的ID过来  
  25.         String SQLString = "SELECT * FROM Categories WHERE parentId="  
  26.                 + this.parentId + " ORDER BY categoryId";  
  27.         try {  
  28.             Class.forName("com.mysql.jdbc.Driver");  
  29.             DriverManager.registerDriver(new com.mysql.jdbc.Driver());  
  30.             String DbConn = "jdbc:mysql://localhost:3306/extjs";  
  31.             String DbPass = "root";  
  32.             con = DriverManager.getConnection(DbConn, "root", DbPass);  
  33.             st = con.createStatement();  
  34.             // 查找所有拥有下级类别的类别ID   //不同的记录属于同一个parentID，故使用group by  
  35.             rs = st  
  36.                     .executeQuery("SELECT parentId FROM Categories WHERE parentId>0 Group By parentId Order By parentId");  
  37.             StringBuffer parentIDBuffer = new StringBuffer();  
  38.             parentIDBuffer.append("|");  
  39.             while (rs.next()) {  
  40.                 parentIDBuffer.append(rs.getString("parentId"));  
  41.                 parentIDBuffer.append("|");  
  42.             }  
  43.             // 得到所有的parentcategoryId列表     
  44.             String parentIDString = parentIDBuffer.toString();  
  45.             System.out.println(parentIDString);//测试    |1|2|3|4|5|6|7|8|  
  46.             rs = st.executeQuery(SQLString);  //第一次传进来的parentID是0    
  47.             treeNodeArray = new ArrayList<JSONTreeNode>();  
  48.             while (rs.next()) {  
  49.                 JSONTreeNode treeNode = new JSONTreeNode();  
  50.                 String categoryId = rs.getString("categoryId");  
  51.                 treeNode.setId(categoryId);  
  52.                 treeNode.setText(rs.getString("categoryName"));  
  53.                 treeNode.setDescription(rs.getString("description"));  
  54.                 // treeNode.setHref("rightframe.jsp?categoryId="  
  55.                 // + rs.getString("categoryId").toString());  
  56.                 // treeNode.setHrefTarget("rightFrame");  
  57.                 System.out.println(parentIDString.indexOf("|" + categoryId + "|"));//测试  
  58.                 if (parentIDString.indexOf("|" + categoryId + "|") >= 0) // 父节点  如果大于0说它在父节点中存在  
  59.                 {  
  60.                     treeNode.setCls("folder");  
  61.                     treeNode.setLeaf(false);  
  62.                     treeNode.setExpandable(false);  
  63.                 } else // 子节点  
  64.                 {  
  65.                     treeNode.setCls("file");  
  66.                     treeNode.setLeaf(true);  
  67.                     treeNode.setExpandable(false);  
  68.                 }  
  69.                 treeNodeArray.add(treeNode);  
  70.             }  
  71.             JSONArray JsonArray = JSONArray.fromObject(treeNodeArray); // 得到JSON数组  
  72.             System.out.println("返回的数据是："+JsonArray.toString());  
  73.             return JsonArray.toString();// 返回JSON数据  
  74.         } catch (Exception e) {  
  75.             System.out.println("getJSONString() of JSONTree.java throws : "  
  76.                     + e.toString());  
  77.             return "";  
  78.         } finally {  
  79.             try {  
  80.                 if (con != null && !con.isClosed()) {  
  81.                     con.close();  
  82.                 }  
  83.             } catch (SQLException e) {  
  84.                 // TODO Auto-generated catch block  
  85.                 e.printStackTrace();  
  86.             }  
  87.         }  
  88.     }  
  89.   
  90.     public String getparentId() {  
  91.         return parentId;  
  92.     }  
  93.   
  94.     public void setparentId(String parentId) {  
  95.         this.parentId = parentId;  
  96.     }  
  97. }  

效果图：

//需要导入的json-lib 包及其他包自行下载。测试完毕。

 

你可能感兴趣的:(html,function,tree,null,border,autoload)

  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • xilinx vivado PULLMODE 设置思路 坚持每天写程序 fpga开发
    1.xilinx引脚分类XilinxIO的分类：以XC7A100TFGG484为例，其引脚分类如下：1.UserIO(用户IO)：用户使用的普通IO1.1专用(Dedicated)IO：命名为IO_LXXY_#、IO_XX_#的引脚，有固定的特定用途，多为底层特定功能的直接实现，如差分对信号、关键控制信号等，不能随意变更。1.2多功能(Multi-Function)IO：命名为IO_LXXY_ZZ
  • ArrayList 源码解析 程序猿进阶 Java基础ArrayListListjava面试性能优化架构设计idea
    ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
  • 《 C++ 修炼全景指南：九 》打破编程瓶颈！掌握二叉搜索树的高效实现与技巧 Lenyiin C++修炼全景指南技术指南c++算法stl
    摘要本文详细探讨了二叉搜索树（BinarySearchTree,BST）的核心概念和技术细节，包括插入、查找、删除、遍历等基本操作，并结合实际代码演示了如何实现这些功能。文章深入分析了二叉搜索树的性能优势及其时间复杂度，同时介绍了前驱、后继的查找方法等高级功能。通过自定义实现的二叉搜索树类，读者能够掌握其实际应用，此外，文章还建议进一步扩展为平衡树（如AVL树、红黑树）以优化极端情况下的性能退化。
  • 遥感影像的切片处理 sand&wich 计算机视觉python图像处理
    在遥感影像分析中，经常需要将大尺寸的影像切分成小片段，以便于进行详细的分析和处理。这种方法特别适用于机器学习和图像处理任务，如对象检测、图像分类等。以下是如何使用Python和OpenCV库来实现这一过程，同时确保每个影像片段保留正确的地理信息。准备环境首先，确保安装了必要的Python库，包括numpy、opencv-python和xml.etree.ElementTree。这些库将用于图像处理
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • leetcode-617. 合并二叉树 manba_ leetcodehot100leetcode算法
    题目描述给你两棵二叉树：root1和root2。想象一下，当你将其中一棵覆盖到另一棵之上时，两棵树上的一些节点将会重叠（而另一些不会）。你需要将这两棵树合并成一棵新二叉树。合并的规则是：如果两个节点重叠，那么将这两个节点的值相加作为合并后节点的新值；否则，不为null的节点将直接作为新二叉树的节点。返回合并后的二叉树。注意:合并过程必须从两个树的根节点开始。示例1：输入：root1=[1,3,2,
  • 使用由 Python 编写的 lxml 实现高性能 XML 解析 hunyxv python笔记pythonxml
    转载自：文章lxml简介Python从来不出现XML库短缺的情况。从2.0版本开始，它就附带了xml.dom.minidom和相关的pulldom以及SimpleAPIforXML(SAX)模块。从2.4开始，它附带了流行的ElementTreeAPI。此外，很多第三方库可以提供更高级别的或更具有python风格的接口。尽管任何XML库都足够处理简单的DocumentObjectModel(DOM
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • string trim的实现 JamesSawyer
    if(typeofString.prototype.trim!=='function'){String.prototype.trim=function(){//这个正则的意思是//'^''$'表示结束和开始//'^\s*'表示任意以空格开头的空格//'\s*$'表示任意以空格结尾的空格//'\S*'表示任意非空字符//'$1'表示'(\S*(\s*\S*)*)'returnthis.replace
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • leetcode-124 Binary Tree Maximum Path Sum 乐观的大鹏 LeetCode
    Givenanon-emptybinarytree,findthemaximumpathsum.Forthisproblem,apathisdefinedasanysequenceofnodesfromsomestartingnodetoanynodeinthetreealongtheparent-childconnections.Thepathmustcontainatleastonenodea
  • ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your †徐先森® Oracle数据库Web相关错误集
    createtablestudents(idintunsignedprimarykeyauto_increment,namevarchar(50)notnull,ageintunsigned,highdecimal(3,2),genderenum('男','女','中性','保密','妖')default'保密',cls_idintunsigned);在对数据库插入如上带有中文带有默认值的字段的时
  • HarmonyOS Next鸿蒙扫一扫功能实现 JohnLiu_ HarmonyOSNextharmonyos华为扫一扫鸿蒙
    直接使用的是华为官方提供的api，封装成一个工具类方便调用。import{common}from'@kit.AbilityKit';import{scanBarcode,scanCore}from'@kit.ScanKit';exportnamespaceScanUtil{exportasyncfunctionstartScan(context:common.Context):Promise{if
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
  • 自定义分区 我的K8409 Hadoophdfshadoop大数据
    通过简单例子了解partition分区类的重写方法分区是在MR的过程中进行的，属于Shuffle阶段但是在Job端不要忘记进行调用：job.setPartitionerClass(xxx.class)按照年龄分区：classAgePartitionerextendsPartitioner{@OverridepublicintgetPartition(MyComparablekey,NullWrit
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • ubuntu安装opencv最快的方法 Derek重名了
    最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • Spring中@Value注解，需要注意的地方 无量 springbean@Valuexml
    Spring 3以后,支持@Value注解的方式获取properties文件中的配置值，简化了读取配置文件的复杂操作 1、在applicationContext.xml文件(或引用文件中)中配置properties文件 <bean id="appProperty" class="org.springframework.beans.fac
  • mongoDB 分片 开窍的石头 mongodb
        mongoDB的分片。要mongos查询数据时候 先查询configsvr看数据在那台shard上，configsvr上边放的是metar信息，指的是那条数据在那个片上。由此可以看出mongo在做分片的时候咱们至少要有一个configsvr,和两个以上的shard（片）信息。     第一步启动两台以上的mongo服务 &nb
  • OVER(PARTITION BY)函数用法 0624chenhong oracle
    这篇写得很好，引自 http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数用法 2010年10月26日 OVER(PARTITION BY)函数介绍 开窗函数        &nb
  • Android开发中，ADB server didn't ACK 解决方法 一炮送你回车库 Android开发
    首先通知：凡是安装360、豌豆荚、腾讯管家的全部卸载，然后再尝试。   一直没搞明白这个问题咋出现的，但今天看到一个方法，搞定了！原来是豌豆荚占用了 5037 端口导致。 参见原文章：一个豌豆荚引发的血案——关于ADB server didn't ACK的问题 简单来讲，首先将Windows任务进程中的豌豆荚干掉，如果还是不行，再继续按下列步骤排查。 &nb
  • canvas中的像素绘制问题 换个号韩国红果果 JavaScriptcanvas
    pixl的绘制，1.如果绘制点正处于相邻像素交叉线，绘制x像素的线宽，则从交叉线分别向前向后绘制x/2个像素，如果x/2是整数，则刚好填满x个像素，如果是小数，则先把整数格填满，再去绘制剩下的小数部分，绘制时，是将小数部分的颜色用来除以一个像素的宽度，颜色会变淡。所以要用整数坐标来画的话（即绘制点正处于相邻像素交叉线时），线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的
  • 编码乱码问题 灵静志远 javajvmjsp编码
    1、JVM中单个字符占用的字节长度跟编码方式有关，而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式；2、对于单个字符：ISO-8859-1单字节编码，GBK双字节编码，UTF-8三字节编码；因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节，而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。 3、getBytes()、getByte
  • java 求几个月后的日期 darkranger calendargetinstance
    Date plandate = planDate.toDate(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); Calendar cal = Calendar.getInstance(); cal.setTime(plandate); // 取得三个月后时间 cal.add(Calendar.M
  • 数据库设计的三大范式（通俗易懂） aijuans 数据库复习
    关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。数据库的设计范式是数据库设计所需要满足的规范。只有理解数据库的设计范式，才能设计出高效率、优雅的数据库，否则可能会设计出错误的数据库. 目前，主要有六种范式：第一范式、第二范式、第三范式、BC范式、第四范式和第五范式。满足最低要求的叫第一范式，简称1NF。在第一范式基础上进一步满足一些要求的为第二范式，简称2NF。其余依此类推。
  • 想学工作流怎么入手 atongyeye jbpm
    工作流在工作中变得越来越重要，很多朋友想学工作流却不知如何入手。 很多朋友习惯性的这看一点，那了解一点，既不系统，也容易半途而废。好比学武功，最好的办法是有一本武功秘籍。研究明白，则犹如打通任督二脉。 系统学习工作流，很重要的一本书《JBPM工作流开发指南》。 本人苦苦学习两个月，基本上可以解决大部分流程问题。整理一下学习思路，有兴趣的朋友可以参考下。 1  首先要
  • Context和SQLiteOpenHelper创建数据库 百合不是茶 androidContext创建数据库
           一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper     一:SQLiteOpenHelper创建数据库:   1,SQLi
  • 浅谈group by和distinct bijian1013 oracle数据库group bydistinct
            group by和distinct只了去重意义一样，但是group by应用范围更广泛些，如分组汇总或者从聚合函数里筛选数据等。         譬如：统计每id数并且只显示数大于3 select id ,count(id) from ta
  • vi opertion 征客丶 macoprationvi
    进入 command mode （命令行模式） 按 esc 键 再按 shift + 冒号 注：以下命令中 带 $ 【在命令行模式下进行】，不带 $ 【在非命令行模式下进行】 一、文件操作 1.1、强制退出不保存 $ q! 1.2、保存 $ w 1.3、保存并退出 $ wq 1.4、刷新或重新加载已打开的文件 $ e 二、光标移动 2.1、跳到指定行 数字
  • 【Spark十四】深入Spark RDD第三部分RDD基本API bit1129 spark
      对于K/V类型的RDD,如下操作是什么含义？   val rdd = sc.parallelize(List(("A",3),("C",6),("A",1),("B",5)) rdd.reduceByKey(_+_).collect  reduceByKey在这里的操作，是把
  • java类加载机制 BlueSkator java虚拟机
    java类加载机制 1.java类加载器的树状结构 引导类加载器 ^ | 扩展类加载器 ^ | 系统类加载器 java使用代理模式来完成类加载，java的类加载器也有类似于继承的关系，引导类是最顶层的加载器，它是所有类的根加载器，它负责加载java核心库。当一个类加载器接到装载类到虚拟机的请求时，通常会代理给父类加载器，若已经是根加载器了，就自己完成加载。 虚拟机区分一个Cla
  • 动态添加文本框 BreakingBad 文本框
      <script>     var num=1; function AddInput() {      var str="";     str+="<input 
  • 读《研磨设计模式》-代码笔记-单例模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ public class Singleton { } /* * 懒汉模式。注意，getInstance如果在多线程环境中调用，需要加上synchronized，否则存在线程不安全问题 */ class LazySingleton
  • iOS应用打包发布常见问题 chenhbc iosiOS发布iOS上传iOS打包
    这个月公司安排我一个人做iOS客户端开发，由于急着用，我先发布一个版本，由于第一次发布iOS应用，期间出了不少问题，记录于此。   1、使用Application Loader 发布时报错：Communication error.please use diagnostic mode to check connectivity.you need to have outbound acc
  • 工作流复杂拓扑结构处理新思路 comsci 设计模式工作算法企业应用OO
    我们走的设计路线和国外的产品不太一样，不一样在哪里呢？  国外的流程的设计思路是通过事先定义一整套规则(类似XPDL)来约束和控制流程图的复杂度(我对国外的产品了解不够多，仅仅是在有限的了解程度上面提出这样的看法)，从而避免在流程引擎中处理这些复杂的图的问题，而我们却没有通过事先定义这样的复杂的规则来约束和降低用户自定义流程图的灵活性，这样一来，在引擎和流程流转控制这一个层面就会遇到很
  • oracle 11g新特性Flashback data archive daizj oracle
    1. 什么是flashback data archive Flashback data archive是oracle 11g中引入的一个新特性。Flashback archive是一个新的数据库对象，用于存储一个或多表的历史数据。Flashback archive是一个逻辑对象，概念上类似于表空间。实际上flashback archive可以看作是存储一个或多个表的所有事务变化的逻辑空间。
  • 多叉树:2-3-4树 dieslrae 树
        平衡树多叉树,每个节点最多有4个子节点和3个数据项,2,3,4的含义是指一个节点可能含有的子节点的个数,效率比红黑树稍差.一般不允许出现重复关键字值.2-3-4树有以下特征:     1、有一个数据项的节点总是有2个子节点(称为2-节点)     2、有两个数据项的节点总是有3个子节点(称为3-节
  • C语言学习七动态分配 malloc的使用 dcj3sjt126com clanguagemalloc
    /* 2013年3月15日15:16:24 malloc 就memory(内存) allocate(分配)的缩写 本程序没有实际含义，只是理解使用 */ # include <stdio.h> # include <malloc.h> int main(void) { int i = 5; //分配了4个字节 静态分配 int * p
  • Objective-C编码规范[译] dcj3sjt126com 代码规范
      原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : raywenderlich.com Objective-C编码规范 译者 : Sam Lau
  • 0.性能优化-目录 frank1234 性能优化
    从今天开始笔者陆续发表一些性能测试相关的文章，主要是对自己前段时间学习的总结，由于水平有限，性能测试领域很深，本人理解的也比较浅，欢迎各位大咖批评指正。 主要内容包括： 一、性能测试指标 吞吐量、TPS、响应时间、负载、可扩展性、PV、思考时间 http://frank1234.iteye.com/blog/2180305 二、性能测试策略 生产环境相同 基准测试 预热等 htt
  • Java父类取得子类传递的泛型参数Class类型 happyqing java泛型父类子类Class
      import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import org.junit.Test; abstract class BaseDao<T> { public void getType() { //Class<E> clazz =
  • 跟我学SpringMVC目录汇总贴、PDF下载、源码下载 jinnianshilongnian springMVC
      ----广告-------------------------------------------------------------- 网站核心商详页开发 掌握Java技术，掌握并发/异步工具使用，熟悉spring、ibatis框架； 掌握数据库技术，表设计和索引优化，分库分表/读写分离； 了解缓存技术，熟练使用如Redis/Memcached等主流技术； 了解Ngin
  • the HTTP rewrite module requires the PCRE library 流浪鱼 rewrite
    ./configure: error: the HTTP rewrite module requires the PCRE library. 模块依赖性Nginx需要依赖下面3个包 1. gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) 2. rewrite 模块需要 pcre 库 ( 下载: http://www.pcre.org/ ) 3. s
  • 第12章 Ajax（中） onestopweb Ajax
    index.html <!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/
  • Optimize query with Query Stripping in Web Intelligence blueoxygen BO
    http://wiki.sdn.sap.com/wiki/display/BOBJ/Optimize+query+with+Query+Stripping+in+Web+Intelligence and a very straightfoward video http://www.sdn.sap.com/irj/scn/events?rid=/library/uuid/40ec3a0c-936
  • Java开发者写SQL时常犯的10个错误 tomcat_oracle javasql
    1、不用PreparedStatements 　　有意思的是，在JDBC出现了许多年后的今天，这个错误依然出现在博客、论坛和邮件列表中，即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个： 　　他们对PreparedStatements不了解 　　他们认为使用PreparedStatements太慢了 　　他们认为写Prepar
  • 世纪互联与结盟有感 阿尔萨斯
    10月10日，世纪互联与（Foxcon）签约成立合资公司，有感。 全球电子制造业巨头（全球500强企业）与世纪互联共同看好IDC、云计算等业务在中国的增长空间，双方迅速果断出手，在资本层面上达成合作，此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任，另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。 众所周知，精于电子产品制造（世界第一），对于世纪互联而言，能够与结盟
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他