Yoson_He
Yoson_He

layui-tree实现Ajax异步请求后动态添加节点

最近在弄一个产品分类管理，是一个树形菜单的形式，用的是layui-tree ,由于它并没有动态添加节点，所以只能自己刚了。

                                                                                                        layui-tree实现Ajax异步请求后动态添加节点_第1张图片大概效果如左图

    具体的实现是当我鼠标移入“长袖”这个分类时，出现三个icon (如图)，按“增加”按钮，会发送ajax异步请求到后台，在数据库库中增加以“长袖”为父类id 的一个子分类，成功后返回到前台，然后相应的节点下动态添加子节点，主要是通过append 来增加html元素

[html] view plain copy

  1. >  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>多级分类管理title>  
  6. <meta name="renderer" content="webkit">  
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
  8. <meta name="format-detection" content="telephone=no">  
  9. <link rel="stylesheet" type="text/css"  
  10.     href="layui/css/layui.css" media="all">  
  11.   
  12. head>  
  13.   
  14. <style>  
  15. .panel {  
  16.     margin-bottom: 0;  
  17. }  
  18.  i{  
  19.       
  20.     cursor: pointer !important ;   
  21.     cursor: hand !important;  
  22.  }   
  23.  body{  
  24.   
  25.  }  
  26.   
  27.   a:hover{  
  28.     background-color:#E6E6E6 ;  
  29.  }   
  30.   
  31. .active{  
  32.     background:#E6E6E6;  
  33. }  
  34. .hide{  
  35.     display:none;  
  36. }  
  37.   
  38. style>  
  39. <body style="height:100%;">  
  40.   
  41.   
  42.   
  43.     <div    style="height:100%;">  
  44.                 <div class="panel panel-default"  
  45.                     style=" position:fixed;   width: 250px; height:800px;   overflow:auto;">  
  46.                     <div class="panel-body"  style=" ">  
  47.                         <h4 style="text-align: center;">分类管理h4>  
  48.                         <ul unselectable="on" id="demo"  
  49.                             style="margin-top: 30px; -moz-user-select: none; -webkit-user-select: none;"  
  50.                             onselectstart="return false;"  >ul>  
  51.                             <button  id="addcate" class="layui-btn  layui-btn-primary"  style="margin-top:20px; margin-left:28px; width:70%;">添加分类button>  
  52.                     div>  
  53.     div>  
  54.           
  55.       
  56.   
  57.     div>  
  58.   
  59.   
  60.     <script type="text/javascript" src="layui/layui.js">script>  
  61.     <script type="text/javascript">  
  62.     layui.use(['jquery','layer','element','form','tree'],function(){  
  63.           window.jQuery = window.$ = layui.jquery;  
  64.           window.layer = layui.layer;  
  65.           var form  =  layui.form;  
  66.           var elem = layui.element;  
  67.           var topcateid=0;  //为模拟顶级分类id用  
  68.   
  69.           //初始化layer.tree  
  70.            var tree = layui.tree({  
  71.               elem: '#demo',  
  72.               nodes:[]     //这里可以通过后台获取（如ThinkPHP框架则可以通过后台拼接好，再生成模板变量类似{$tree}就可以）  
  73.             });   
  74.             
  75.             window.onload=function(){  
  76.   
  77.                  //删除layui-tree 自带的样式      
  78.                   $("i.layui-tree-branch").remove();  
  79.                   $("i.layui-tree-leaf").remove();  
  80.                   //添加操作的图标(即鼠标划过时显示的添加，修改，删除的按钮组)  
  81.                   $("ul#demo").find("a").after("<i class='layui-icon add select hide ' )'>i>"+  
  82.                                                "<i class='layui-icon edit select hide'>i>"+  
  83.                                                "<i class='layui-icon del select hide'>i>");  
  84.             }  
  85.   
  86. //添加顶级分类  
  87.     $("#addcate").on("click",function(){  
  88.         layer.prompt({title: '输入分类名称，并确认', formType:0}, function(text, index){  
  89.               layer.close(index);  
  90.            //TODO 可以ajax到后台操作，这里只做模拟  
  91.            layer.load(2);  
  92.            setTimeout(function(){     
  93.            layer.closeAll("loading");  
  94.            //手动添加节点，肯定有更好的方法=.=！这里的方法感觉有点LOW  
  95.            // li里面的pid属性为父级类目的id,顶级分类的pid为0  
  96.            topcateid= topcateid+1;  
  97.             $("ul#demo").append("<li  pid='0' id="+(topcateid)+">"+  
  98.                                "<a ><cite>"+text+"cite> a>"+  
  99.                                "<i class='layui-icon select hide add'>i>"+  
  100.                                "<i class='layui-icon edit select hide'>i>"+  
  101.                                "<i class='layui-icon del select hide'>i>"+  
  102.                                "li>");  
  103.            },1000)  
  104.             });   
  105. })  
  106.       
  107. //显示/隐藏 分类的操作栏  
  108. $("ul#demo").on({  
  109.     mouseover: function(event) {  
  110.       event.stopPropagation();  
  111.       $(this).children(".select").removeClass("hide")  
  112.     },  
  113.       
  114.     mouseout: function(event) {   
  115.      event.stopPropagation();   
  116.      $(this).children(".select").addClass("hide")  
  117.     },   
  118.   
  119. },"li","a")  
  120.   
  121. //添加子分类  
  122. $("ul#demo ").on("click","li .add",function(){  
  123.       
  124.      var pid = $(this).closest("li").attr("id");//将父级类目的id作为父类id  
  125.      var that= $(this).closest("li");  
  126.     layer.prompt({title: '输入子分类名称，并确认', formType:0}, function(text, index){  
  127.           layer.close(index);  
  128.             
  129.            //TODO 可以ajax到后台操作，这里只做模拟  
  130.            layer.load(2);  
  131.            setTimeout(function(){     
  132.            layer.closeAll("loading");  
  133.            topcateid= topcateid+1;  
  134.            if(that.children("ul").length == 0){  
  135.                          //表示要新增   i 以及 ul 标签  
  136.                          that.prepend('<i class="layui-icon layui-tree-spread">i>')  
  137.                          that.append("<ul class='layui-show'><li  pid="+pid+"   id="+(topcateid)+"><a    ><cite>"+text+"cite> a><i  class='layui-icon select hide add' )'>i> <i    class='layui-icon edit select hide'>i> <i    class='layui-icon del select hide'>i>li>ul>")  
  138.                      }else{  
  139.                         that.children("ul").append("<li pid="+pid+"    id="+(topcateid)+"><a  ><cite>"+text+"cite> a><i  class='layui-icon select hide add' )'>i> <i    class='layui-icon edit select hide'>i> <i    class='layui-icon del select hide'>i>li>");  
  140.                      }  
  141.            },1000)  
  142.             });     
  143.   
  144.               
  145. })  
  146. //重命名  
  147. $("ul#demo ").on("click","li .edit",function(){  
  148.    var node=$(this).parent().children("a").children("cite");  
  149.    var id=$(this).parent().attr("id")  
  150.    var that= $(this).closest("li");  
  151.     layer.prompt({title: '输入新的分类名称，并确认',value:node.text(), formType:0}, function(text, index){  
  152.           layer.close(index);  
  153.             
  154.          //TODO 可以ajax到后台操作，这里只做模拟  
  155.            layer.load(2);  
  156.            setTimeout(function(){     
  157.            layer.closeAll("loading");  
  158.             node.text(text);  
  159.            },1000)  
  160.             });   
  161.             
  162.           
  163. })  
  164. //删除分类  
  165. $("ul#demo ").on("click","li .del",function(){  
  166.       
  167.       var that= $(this).closest("li");  
  168.     if(that.children("ul").length > 0){  
  169.         layer.msg("该分类下含有子分类不能删除")  
  170.         return;  
  171.     }  
  172.    var id=$(this).parent().attr("id")  
  173.   
  174.  layer.confirm('确定要删除？该分类下的课程亦将删除！', {  
  175.   btn: ['删除','取消']   
  176. }, function(){  
  177.       
  178.          //TODO 可以ajax到后台操作，这里只做模拟  
  179.            layer.load(2);  
  180.            setTimeout(function(){     
  181.            layer.closeAll("loading");  
  182.             if((that.parent("ul").children("li").length == 1)&&(that.parent("ul").parent("li").children("i.layui-tree-spread").length=1)){  
  183.                    //要把分类名前的三角符号和ul标签删除  
  184.                     that.parent("ul").parent("li").children("i.layui-tree-spread").remove();             
  185.                }  
  186.               that.remove()  
  187.            },1000)  
  188.             });   
  189.   
  190.   
  191. })  
  192. //打开/关闭菜单  
  193.       
  194.     $("ul#demo").on({  
  195.       
  196.     click:function(event){  
  197.         event.stopPropagation();  
  198.         event.preventDefault();  
  199.         if( $(this).parent().children("ul").hasClass("layui-show")){  
  200.               
  201.       
  202.               $(this).html("");  
  203.               $(this).parent().children("ul").removeClass("layui-show");  
  204.               return;  
  205.         }else{    
  206.               
  207.           
  208.          $(this).html("");  
  209.          $(this).parent().children("ul").addClass("layui-show");   
  210.         return;  
  211.         }   
  212.        return;  
  213.     }     
  214. },  'i.layui-tree-spread');    
  215.   
  216.               
  217.  });   
  218.   
  219. script>  
  220.   
  221.   
  222.   
  223. body>  
  224.   
  225. html>  

你可能感兴趣的:(layui)

  • java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署 一梵sheji288 javamybatisvue.js
    java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、
  • 基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件 练练科技 java课程设计mysql
    基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署 鸿源网络 数据库mysqljava
    java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
  • 基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署 源新网络 java开发语言
    基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档 影伴设计 java开发语言前端
    java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://pan.b
  • 计算机毕业设计springboot健身中心前台信息管理系统qotli源码+系统+程序+lw文档+部署 呦呦网络 数据库
    计算机毕业设计springboot健身中心前台信息管理系统qotli源码+系统+程序+lw文档+部署计算机毕业设计springboot健身中心前台信息管理系统qotli源码+系统+程序+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1
  • 基于JAVA家庭记账系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署 丽扬科技 数据库javamysql
    基于JAVA家庭记账系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署基于JAVA家庭记账系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0
  • 基于JAVA智能推荐二手车交易网站计算机毕业设计源码+系统+数据库+lw文档+部署 光光网络 java开发语言
    基于JAVA智能推荐二手车交易网站计算机毕业设计源码+系统+数据库+lw文档+部署基于JAVA智能推荐二手车交易网站计算机毕业设计源码+系统+数据库+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0
  • layUI基本元素--乐字节前端 dirft_din
    基本元素按钮用法向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。一个标准的按钮一个可跳转的按钮一个按钮主题名称组合原始class="layui-btnlayui-btn-primary"默认class="layui-btn"百搭class="layui-btnlayui-btn-normal"
  • layuiAdmin - 一个强大的后台管理框架 潘惟妍
    layuiAdmin-一个强大的后台管理框架layuiAdminlayuiAdmin后台管理模板完全由layui自建的一套前端架构实现而成的通用型后台管理模板系统项目地址:https://gitcode.com/gh_mirrors/lay/layuiAdmin是一个基于前端框架Layui设计的后台管理系统模板。它旨在提供一种快速、高效的方式，帮助开发者搭建简洁、美观且功能丰富的后台管理界面。技术
  • 计算机毕业设计SSM_Vue宠物商城系统【代码讲解+安装调试+文档指导】 计算机毕业设计_吉哥
    作者：计算机编程-吉哥简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。心愿：点赞收藏⭐评论文末获取源码联系技术选型spring、springmvc、mybatis、vue、elementUI、LayUI、mysql、tomcat8.5、jdk1.8数据库表结构14张开发工具：idea或者eclipse、navi
  • 前端框架大盘点 HITZXL 前端开发#VUE前端框架前端javascript
    最近项目中用到了很多前后端分离的框架。很多框架虽然类似，但项目中却总用混用的情况，看到陌生的框架，总是一头雾水，干脆来个大盘点。一扫心中困惑。目前对于前端的各种技术，还有很多理解不到的地方。例如前端框架，前端组件，UI库，这些总感觉有些傻傻分不清楚。毕竟都是用来协助项目快速开发和上手的，因此，看到了别人的总结，感觉清晰明了。放在这里压住阵脚：css框架：Bootstrap、Layui、Zui、Am
  • layui 树形表格 小贵子的博客 layui树形表格
    最近的一个项目，用layui里的表格要实现树形表格功能，去官网查找没有，最后在网上找了一位大神开发的插件—treeTable。插件地址演示地址：https://whvse.gitee.io/treetable-lay/项目地址：https://gitee.com/whvse/treetable-lay使用方法按照文档介绍或者下载demo自己在此基础上实现了功能，效果如下：html文件js文件lay
  • JAVA毕业设计酒店管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库 妮维网络 java开发语言jvm
    JAVA毕业设计酒店管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库JAVA毕业设计酒店管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0
  • 基于Springboot的在线小说阅读平台。Javaee项目，springboot项目。 气宇轩昂固执狂 #Springboot项目springbootjava-ee后端
    演示视频：基于Springboot的在线小说阅读平台。Javaee项目，springboot项目。项目介绍：采用M（model）V（view）C（controller）三层体系结构，通过Spring+SpringBoot+Mybatis+Vue+Maven+Layui+Elementui来实现。MySQL数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。系统设计思想
  • Layui之JSON&Ajax 大腕先生 jsonjava开发语言前端
    1.JSON1.1.什么是JSONJSON全称“JavaScriptObjectNotation”，译为“JavaScript对象简谱”或“JavaScript对象表示法”，是一种轻量级的、基于文本的、开放的数据交换格式。JSON在Web开发领域有着举足轻重的地位，如果您想在Web开发领域大展身手的话，就必须了解JSON。数据交换是指，两个设备之间建立连接并互相传递数据的过程。尽管JSON的名称中
  • 手把手学习Vue3.0：CSS样式基础和HTML5基础收藏 帅哥趣谈 手把手学习Vue3.0vue
    背景最近在做管理系统的时候我还不会用Vue，时间紧任务重就先用J2EE那套，利用layUI先实现了。现在从头学习前后端分离技术来搞，在做的过程中对CSS和HTML5的基础语法都已经全忘了，正好总结一下，其实也没有什么好总结，就是一个搜集一下语法手册，用的时候方便查查。我也顺便弄明白了一个事情，就是到底人们常说的H5到底是什么，当我从知乎上看明白后，心中一万个草拟吗奔腾而过。如果你有幸读到我这篇文章
  • Go后台管理框架 半城 风雨 GoFrameLayuiGoGoFrame
    项目介绍一款Go语言基于GoFrame、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。项目特点模块化、松耦合模块丰富、开箱即
  • 转载：ASP.NET MVC+Layui数据分页的实现和说明 djk8888 asp.netlayui后端
    原文地址：http://blog.csdn.net/qq_42077395/article/details/104667506带查询条件:http://blog.csdn.net/weixin_42128648/article/details/129611274
  • Flask+LayUI开发手记（五）：树型表格实现数据展示与编辑 hbrown layui前端javascript
    说起来，树型表格treeTable绝对是后端程序员的巨大福利。要知道，在系统编程中，有父子节点关系的数据真是太多了，随便想一下就可以举出很多例子，比如权限、栏目、机构、产品、科目、货币、行业诸般等等，其实只要是稍微复杂一点的参数数据都会以树型方式来进行组织。以前做这种要专门找个树型组件来做，很麻烦的。Layui提供的树型表格TreeTable，实际是对表格的一个扩展类，把树和表格合在一起，前端配置
  • javaweb基于ssm框架校园即时服务平台管理系统设计与实现 ancen_73bd
    1、项目介绍系统开发平台：JDK1.8+Windows7+Maven3.6.1开发语言：Java后台框架：SSM前端：layui数据库：MySql5.7Navicat开发环境：IntellijIdea浏览器：Chrome或360浏览器本系统分为两个用户：学生、管理员。学生：可以发布任务、已接受任务、已发布任务、资料修改管理员：可以对用户进行管理、任务的管理、安全设置管理2、项目技术后端框架：SSM
  • java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档 法姆利 javamysql开发语言
    java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档java计算机毕业设计智能停车场管理系统源码+mysql数据库+系统+部署+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8
  • 【组件】layui-v2.9.14 smart_dream layui前端javascript
    官网：Layui-极简模块化前端UI组件库(官方文档)github：GitHub-layui/layui:一套遵循原生态开发模式的WebUI组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。gitee：Layui:一套开源免费且受众广泛的WebUI组件库下载：可以在官网首页或更新日志页面下载到Layuilayer：通用弹出层组件layer-Layui文档laydate：Lay
  • java-net-php-python-ssmKTV点歌系统查重PPT计算机毕业设计程序 荣荣科技 javaphp开发语言
    java-net-php-python-ssmKTV点歌系统查重PPT计算机毕业设计程序java-net-php-python-ssmKTV点歌系统查重PPT计算机毕业设计程序本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5
  • layui栅格布局设置列间距不起作用 gc_2299 网页编程layui栅格列间距
      layui栅格布局支持设置列间距，只需使用预置类layui-col-space*即可。不过实际使用时却始终看不到效果。  根据layui官网文档的说明，只需要在行所在div元素的class属性中增加layui-col-space*即可出现列间距。如下图所示：  但是实际使用时，一般会在行所在div元素中设置行背景色，此时设置列间距就看不出效果。html示例如下所示（示例代码取自参考文献1），将
  • flask+echarts+pyecharts+layui+bootstrap+爬虫 flask快速搭建学习 陈彦祖本祖 pythonpyechartspython爬虫flaskpythonbootstrapechartslayui
    首先看一下示例图，按顺序以下页面称首页，什么都有（乱取的），登录页，资源管理开始。bootstarp模板包下载地址https://codeload.github.com/twbs/bootstrap/zip/v3.4.1前端页面确实是个难事，资源管理页面和首页，用的分别是layui的模板与bootstrap，我也只会对模板进行使用。首先来看首页代码，本界面使用的是carousel，方法：直接将ht
  • Flask+Layui开发案例教程 mangge08 flasklayuipython
    基于Python语言的敏捷开发框架_DjangoAdmin敏捷开发框架Flask+Layui版本_开发文档软件产品基于Python语言，采用Flask2.x、Layui、MySQL等技术栈精心打造的一款集模块化、高性能、组件化于一体的企业级敏捷开发框架，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选
  • Flask+LayUI开发手记（序） hbrown layui前端javascriptflask
    学习python编程，起始是希望能够找一个比较简单且用途广泛的开发语言，作为一个UNIX/C语言的骨灰级程序猿的新方向。一直以来都有种感觉，用传统编程语言搭建系统真是一件很大的工程，随便一点小应用，就要弄一整套环境出来，而且这种趋势还越来越明显。当然，系统重点没啥，关键是不灵活，远不象python这样的脚本语言，可以灵活处理任务。而在用python的过程中，不但习惯了它的简单（比如用缩进来表示层次
  • Flask+LayUI开发手记（一）：LayUI表格的前端数据分页展现 hbrown 前端flasklayui
    用数据表格table展示系统数据，是LayUI的基本功能，编码十分简单，就是通过table.render()渲染，把属性配置好就OK了，十分方便，功能也十分强大。不过，在实现时，把table的有个功能却理解错了，就是分页。table.render()的分页属性，主要包括三个，page、limit和limits，page是逻辑值，设置为true是分页，limit是每页显示行数，limits是设置面显
  • flask+layui实现前后端文件传输 焦志坤 Flask前端
    flask+layui实现前后端文件传输此处不再赘述flask跟layui的基本配置了前端：可以查看文档https://www.layui.com/demo/upload.html效果图代码前端（注：大多数是layui中的部分，需要关注的是前后端文件传输部分）选择多文件文件名大小上传进度操作开始上传layui.use(['upload','element','layer'],function(){
  • 桌面上有多个球在同时运动，怎么实现球之间不交叉，即碰撞？ 换个号韩国红果果 html小球碰撞
    稍微想了一下，然后解决了很多bug，最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后，遍历整个在dom树中的其他小球，看一下它们与当前小球的距离是否小于球半径的两倍？若小于说明下一次绘制该小球（设为a）前要把他的方向变为原来相反方向（与a要碰撞的小球设为b），即假如当前小球的距离小于球半径的两倍的话，马上改变当前小球方向。那么下一次绘制也是先绘制b，再绘制a，由于a的方向已经改变
  • 《高性能HTML5》读后整理的Web性能优化内容 白糖_ html5
    读后感         先说说《高性能HTML5》这本书的读后感吧，个人觉得这本书前两章跟书的标题完全搭不上关系，或者说只能算是讲解了“高性能”这三个字，HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲，再去分析性能优化的内容，这样才会有吸引力。因为只是在线试读，没有机会看后面的内容，所以不胡乱评价了。  
  • [JShop]Spring MVC的RequestContextHolder使用误区 dinguangx jeeshop商城系统jshop电商系统
        在spring mvc中，为了随时都能取到当前请求的request对象，可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量，如request, response等。         在jshop中，对RequestContextHolder的
  • 算法之时间复杂度 周凡杨 java算法时间复杂度效率
          在 计算机科学 中， 算法 的时间复杂度是一个 函数 ，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的 字符串 的长度的函数。时间复杂度常用 大O符号 表述，不包括这个函数的低阶项和首项系数。使用这种方式时，时间复杂度可被称为是 渐近 的，它考察当输入值大小趋近无穷时的情况。 这样用大写O()来体现算法时间复杂度的记法，
  • Java事务处理 g21121 java
    一、什么是Java事务 通常的观念认为，事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性（atomicity）、一致性（consistency）、隔离性（isolation）和持久性（durability）的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时，所有被该事务影响的数据都应该恢复到事务执行前的状
  • Linux awk命令详解 510888780 linux
    一.  AWK 说明   awk是一种编程语言，用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件，或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能，是linux/unix下的一个强大编程工具。它在命令行中使用，但更多是作为脚本来使用。    awk的处理文本和数据的方式：它逐行扫描文件，从第一行到
  • android permission 布衣凌宇 Permission
    <uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中，改值可以修改上传 <uses-permission android:na
  • Oracle和谷歌Java Android官司将推迟 aijuans javaoracle
    北京时间 10 月 7 日，据国外媒体报道，Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行，这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测，谷歌 Oracle 案很可能会被推迟。　　该案中的第二波辩护被安排在 10 月 17 日出庭，从目前看来
  • linux shell 常用命令 antlove linuxshellcommand
    grep [options] [regex] [files] /var/root # grep -n "o" * hello.c:1:/* This C source can be compiled with:
  • Java解析XML配置数据库连接(DOM技术连接 SAX技术连接) 百合不是茶 sax技术Java解析xml文档dom技术XML配置数据库连接
        XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习   XML配置数据库的连接主要技术点的博客; JDBC编程 : JDBC连接数据库 DOM解析XML:  DOM解析XML文件 SA
  • underscore.js 学习（二） bijian1013 JavaScriptunderscore
            Array Functions 所有数组函数对参数对象一样适用。1.first   _.first(array, [n])   别名: head, take       返回array的第一个元素，设置了参数n，就
  • plSql介绍 bijian1013 oracle数据库plsql
    /* * PL/SQL 程序设计学习笔记 * 学习plSql介绍.pdf * 时间：2010-10-05 */ --创建DEPT表 create table DEPT ( DEPTNO NUMBER(10), DNAME NVARCHAR2(255), LOC NVARCHAR2(255) ) delete dept; select
  • 【Nginx一】Nginx安装与总体介绍 bit1129 nginx
    启动、停止、重新加载Nginx nginx 启动Nginx服务器，不需要任何参数u nginx -s stop 快速(强制)关系Nginx服务器 nginx -s quit 优雅的关闭Nginx服务器 nginx -s reload 重新加载Nginx服务器的配置文件 nginx -s reopen 重新打开Nginx日志文件  
  • spring mvc开发中浏览器兼容的奇怪问题 bitray jqueryAjaxspringMVC浏览器上传文件
        最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件.     在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer
  • Lua的io库函数列表 ronin47 lua io
    1、io表调用方式：使用io表，io.open将返回指定文件的描述，并且所有的操作将围绕这个文件描述 　　io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr 　　2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄 　　多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil
  • java-26-左旋转字符串 bylijinnan java
    public class LeftRotateString { /** * Q 26 左旋转字符串 * 题目：定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部。 * 如把字符串abcdef左旋转2位得到字符串cdefab。 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n)，辅助内存为O(1)。 */ pu
  • 《vi中的替换艺术》-linux命令五分钟系列之十一 cfyme linux命令
    vi方面的内容不知道分类到哪里好，就放到《Linux命令五分钟系列》里吧！ 今天编程，关于栈的一个小例子，其间我需要把”S.”替换为”S->”(替换不包括双引号)。 其实这个不难，不过我觉得应该总结一下vi里的替换技术了，以备以后查阅。   1 所有替换方案都要在冒号“:”状态下书写。 2 如果想将abc替换为xyz，那么就这样 :s/abc/xyz/ 不过要特别
  • [轨道与计算]新的并行计算架构 comsci 并行计算
         我在进行流程引擎循环反馈试验的过程中，发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段，而整个流程中又充满着很多并行路由，每个并行路由中又包含着一些并行节点，那么当整个流程图开始循环反馈过程的时候，这个流程图的运行过程是否变成一个并行计算的架构呢？      
  • 重复执行某段代码 dai_lm android
    用handler就可以了 private Handler handler = new Handler(); private Runnable runnable = new Runnable() { public void run() { update(); handler.postDelayed(this, 5000); } }; 开始计时 h
  • Java实现堆栈（list实现） datageek 数据结构——堆栈
    public interface IStack<T> { //元素出栈，并返回出栈元素 public T pop(); //元素入栈 public void push(T element); //获取栈顶元素 public T peek(); //判断栈是否为空 public boolean isEmpty
  • 四大备份MySql数据库方法及可能遇到的问题 dcj3sjt126com DBbackup
    一：通过备份王等软件进行备份前台进不去？ 用备份王等软件进行备份是大多老站长的选择，这种方法方便快捷，只要上传备份软件到空间一步步操作就可以，但是许多刚接触备份王软件的客用户来说还原后会出现一个问题：因为新老空间数据库用户名和密码不统一，网站文件打包过来后因没有修改连接文件，还原数据库是好了，可是前台会提示数据库连接错误，网站从而出现打不开的情况。 解决方法：学会修改网站配置文件，大多是由co
  • github做webhooks：[1]钩子触发是否成功测试 dcj3sjt126com githubgitwebhook
    转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html github和svn一样有钩子的功能，而且更加强大。例如我做的是最常见的push操作触发的钩子操作，则每次更新之后的钩子操作记录都会在github的控制板可以看到！ 工具/原料 github 方法/步骤
  • ">的作用" target="_blank">JSP中的作用 蕃薯耀
    JSP中<base href="<%=basePath%>">的作用 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  • linux下SAMBA服务安装与配置 hanqunfeng linux
    局域网使用的文件共享服务。 一.安装包： rpm -qa | grep samba samba-3.6.9-151.el6.x86_64 samba-common-3.6.9-151.el6.x86_64 samba-winbind-3.6.9-151.el6.x86_64 samba-client-3.6.9-151.el6.x86_64 samba-winbind-clients
  • guava cache IXHONG cache
    缓存，在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说，cache 就是为了提升系统性能而开辟的一块内存空间。 　　缓存的主要作用是暂时在内存中保存业务系统的数据处理结果，并且等待下次访问使用。在日常开发的很多场合，由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时，当我们发现我们的系统这个数据请求量很大的时候，频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的
  • Query的开始--全局变量,noconflict和兼容各种js的初始化方法 kvhur JavaScriptjquerycss
    这个是整个jQuery代码的开始，里面包含了对不同环境的js进行的处理，例如普通环境，Nodejs，和requiredJs的处理方法。 还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解  完整资源： http://www.gbtags.com/gb/share/5640.htm jQuery 源码：   (
  • 美国人的福利和中国人的储蓄 nannan408
       今天看了篇文章，震动很大，说的是美国的福利。    美国医院的无偿入院真的是个好措施。小小的改善，对于社会是大大的信心。小孩，税费等，政府不收反补，真的体现了人文主义。    美国这么高的社会保障会不会使人变懒？答案是否定的。正因为政府解决了后顾之忧，人们才得以倾尽精力去做一些有创造力，更造福社会的事情，这竟成了美国社会思想、人
  • N阶行列式计算(JAVA) qiuwanchi N阶行列式计算
    package gaodai; import java.util.List; /** * N阶行列式计算 * @author 邱万迟 * */ public class DeterminantCalculation { public DeterminantCalculation(List<List<Double>> determina
  • C语言算法之打渔晒网问题 qiufeihu c算法
    如果一个渔夫从2011年1月1日开始每三天打一次渔，两天晒一次网，编程实现当输入2011年1月1日以后任意一天，输出该渔夫是在打渔还是在晒网。 代码如下：   #include <stdio.h> int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/ { if((a%4 == 0 && a%100 != 0
  • XML中DOCTYPE字段的解析 wyzuomumu xml
    DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL.   私有DTD <!DOCTYPErootSYST
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他