Dreamy_lin
Dreamy_lin

原生Javascript实现表格行上下拖拽

拖放事件：
拖动元素时，依次触发的事件

  • dragstart 按下鼠标并移动时触发
  • drag 拖动期间持续触发
  • dragend 松开鼠标触发

拖动到有效的放置目标上时，依次触发

  • dragenter 元素被拖到放置目标上
  • dragover 被拖元素在放置目标内移动，持续触发
  • dragleave 元素被拖到放置目标外触发
  • drop 元素被拖到有效的放置目标上（默认无效），并松开鼠标触发

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style>
  tr,th {
    padding: 30px;
  }
</style>
</head>
<body>
  <table id="myTable" border="1" >
    <thead>
      <tr>
        <th>序列</th>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
      </tr>
    </thead>
    <tbody>
      <tr draggable="true">
        <td>1</td>
        <td>冰箱</td>
        <td>13</td>
        <td>14</td>
      </tr>
      <tr draggable="true">
        <td>2</td>
        <td>彩电</td>
        <td>113</td>
        <td>114</td>
      </tr>
      <tr draggable="true">
        <td>3</td>
        <td>空调</td>
        <td>12</td>
        <td>12</td>
      </tr>
      <tr draggable="true">
        <td>4</td>
        <td>洗衣机</td>
        <td>12</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
  
  <script>
    function drag_row_table() {
      var EventUtil = {  //跨浏览器的事件处理程序,视情况分别选择以下事件处理程序
        addHandler: function(element, type, handler) {
          if(element.addEventListener) {  //DOM2级
            element.addEventListener(type, handler, false);
          }
          else if (element.attachEvent) {  //IE方法
            element.attachEvent('on' + type, handler);
          }
          else {  //DOM1级
            element["on" + type] = handler;
          }
        },
        getTarget: function(event) {  //获取事件的实际目标（在这里是tr），不同于event.currentTarget和this指向的是绑定事件处理程序的目标，（tbody）
          return event.target || event.srcElement;
        },
        preventDefault: function(event) {  //取消事件默认方法
          if(event.preventDefault) {  
            event.preventDefault();
          }
          else {
            event.returnValue = false;  //默认为true，设为falsew为取消默认行为。
          }
        }
      }

      var myTable = document.querySelector('#myTable');
      var tbody = myTable.querySelector("tbody");  //这里监听的是tbody，而不是tr。目的是利用事件冒泡，减少监听的元素个数，提高性能
      var trs = tbody.querySelectorAll("tr");  

      EventUtil.addHandler(tbody, "dragover", function(event) { //默认元素不可放置，这里取消默认，将放置目标修改为可放置的
        EventUtil.preventDefault(event);  
      })

      EventUtil.addHandler(tbody, "dragstart", function(event) {  //监听点击的拖动的元素
      	event.dataTransfer.setData("drag_index", event.target.rowIndex); //将被拖元素的信息，传给放置位置
      })

      EventUtil.addHandler(tbody, "drop", function(event) {  //监听鼠标移动到可放置的放置目标上，松开鼠标的事件
	     EventUtil.preventDefault(event);  //取消在Firefox 3.5+中，放置事件的默认行为是打开被放置目标上的URL
	     let drag_index = parseInt(event.dataTransfer.getData("drag_index"));  //获取传过来的被拖元素的信息
	     let drop_index = EventUtil.getTarget(event).parentNode.rowIndex;  //this为当前触发drop的元素，即放置目标的行下标
	
	     tbody.insertBefore(trs[drag_index], EventUtil.getTarget(event).parentNode.nextSibling);   //将被拖元素放到放置目标的兄弟节点上
	     trs = myTable.querySelectorAll("tr");  //更新变换的tr行信息
      })
    }
    drag_row_table();
  </script>
</body>
</html>

效果：
原生Javascript实现表格行上下拖拽_第1张图片
这里遇到的坑是，querySelectorAll()方法的底层实现是类似于一组元素的快照，而不是动态查询的(即更新文档结构时,对应的变量也自动更新)，为的是避免使用NodeList对象引起的性能问题。因此我们得手动更新querySelectorAll()方法的变量。
符合动态查询的方法有getElementsByTagName()

你可能感兴趣的:(前端,drag,拖拽,表格,javascript)

  • Python网络爬虫调试技巧：解决爬虫中的问题 master_chenchengg pythonpythonPythonpython开发IT
    Python网络爬虫调试技巧：解决爬虫中的问题引子：当你的小蜘蛛遇到大麻烦知己知彼：了解常见的爬虫错误类型侦探出马：使用开发者工具和日志追踪问题源头化险为夷：调整User-Agent与添加延时策略进阶秘籍：处理JavaScript渲染页面与动态加载内容引子：当你的小蜘蛛遇到大麻烦在一个阳光明媚的下午，我正坐在电脑前，满怀信心地运行着我的Python爬虫脚本。这个脚本是为了从一个大型电子商务网站上抓
  • Unity游戏基本设计模式 Ayanami艾 unity游戏引擎设计模式游戏
    一.组合模式介绍：将对象组合成树形结构以表示"部分-整体"的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。实现：将不同的功能用不同的脚本实现，然后使用拖拽的方式自由组合，来实现不同的目的。因为在Unity中，一切物体都可当做组件(包括脚本)，这就极有利于实现组合模式。目的：提高代码的复用性，降低增加对象成本。二.单例模式介绍：保证一个类只有一个实例，并提供一个·访问它的全局访问点
  • 探究Fingerprintjs：了解浏览器指纹技术的原理和应用 Bj陈默 javascript
    一、什么是FingerprintjsFingerprintjs是一个用于生成浏览器指纹的JavaScript库。浏览器指纹是一种通过收集浏览器的各种信息来识别用户设备的技术。它类似于人的指纹，具有一定的独特性，可以用于区分不同的用户设备。二、浏览器指纹技术的原理（一）基本信息收集用户代理（UserAgent）用户代理字符串包含了浏览器的类型、版本、操作系统等信息。例如，一个典型的用户代理字符串可能
  • 微前端框架qiankun剖析 浮游本尊 前端框架前端javascript
    一、single-spa简介要了解qiankun的实现机制，那我们不得不从其底层依赖的single-spa说起。随着微前端的发展，我们看到在这个领域之中出现了各式各样的工具包和框架来帮助我们方便快捷的实现自己的微前端应用。在发展早期，single-spa可以说是独树一帜，为我们提供了一种简便的微前端路由工具，大大降低了实现一个微前端应用的成本。我们来看一下一个典型single-spa微前端应用的架
  • matlab快速入门（2）-- 数据处理与可视化 kyle~ matlabmatlab人工智能算法
    MATLAB的数据处理1.数据导入与导出(1)从文件读取数据Excel文件：data=readtable('data.xlsx');%读取为表格（Table）CSV文件：data=readtable('data.csv');%自动处理表头和分隔符文本文件：data=load('data.txt');%数值数据直接加载为矩阵(2)导出数据到文件保存为Excel：writetable(data,'ou
  • 精讲 JS return 语句的作用 谦虚的w javascript前端
    函数作用域的限制-在JavaScript中，函数有自己的作用域。在函数内部定义的变量和对象（如localObj）默认情况下在函数外部是无法直接访问的。这是因为函数的作用域是封闭的，它将内部的变量和对象隐藏起来，以防止外部代码随意访问和修改。return语句的作用-当在函数内部使用return语句返回一个对象（如returnlocalObj;）时，实际上是将这个对象的引用传递到函数外部。这样，在函数
  • HTML基础与进阶技术指南 王奥雷
    本文还有配套的精品资源，点击获取简介：HTML是构建网页的基础语言，负责定义网页的内容结构和样式。初学者需要掌握HTML元素、属性、结构等基础知识，并了解HTML5新增的语义化标签，表单元素的使用，布局与定位技术，响应式设计原则，以及如何与JavaScript交互。此外，学习SEO优化和无障碍性设计也是提高网页质量和可访问性的关键。本指南旨在引导初学者从基础到高级技巧，逐步深入理解并实践网页开发。
  • 前端调试技巧：从 Console 到 Chrome DevTools 的进阶指南 技术出海录 人工智能前端React
    作为前端开发者，你可能每天都在和Bug打交道。有时候一个简单的问题可能会耗费几个小时，而掌握正确的调试技巧可以大大提高解决问题的效率。今天，我就来分享一些在实际工作中常用的调试技巧。Console的高级用法除了常见的console.log，Console还有很多强大的功能：//1.使用console.table展示数组或对象constusers=[{id:1,name:'Alice',role:'
  • 深入剖析 HTML5 新特性：语义化标签和表单控件完全指南 吴师兄大模型 html5前端html语义化标签表单控件HTML5编程
    系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验
  • JavaScript Navigator：深入理解浏览器导航机制 lly202406 开发语言
    JavaScriptNavigator：深入理解浏览器导航机制引言在Web开发中，浏览器导航是用户与网页交互的重要部分。JavaScriptNavigator对象提供了丰富的API，允许开发者深入理解并控制浏览器的导航行为。本文将详细介绍JavaScriptNavigator对象的功能、使用方法以及在实际开发中的应用。一、什么是JavaScriptNavigator？JavaScriptNavig
  • 手写防抖、节流函数 不点外卖 前端javascript
    是什么本质上是优化高频率执行代码的一种手段如：浏览器的resize、scroll、keypress、mousemove等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用防抖（debounce）和节流（throttle）的方式来减少调用频率#定义防抖函数防抖是指在事件被触发n秒后再执行回调，如果在这n秒内
  • 表单提交实战教程：HTML、CSS、JavaScript到Java后端 河马和荷花
    本文还有配套的精品资源，点击获取简介：网页表单是用户与服务器交互的重要界面元素，本资源提供了从构建表单到数据提交的完整流程。介绍了HTML表单基础、GET与POST提交方法、JavaScript事件处理、CSS样式设计，并通过demo.html文件展示综合应用，以及Java后端的接收和处理。同时，强调了表单安全和性能优化的重要性。1.HTML表单基础知识HTML表单的作用和结构HTML表单是Web
  • JavaScript中的防抖节流函数为什么要用call或apply去执行fn EuForth javascript开发语言ecmascriptJavaScript
    防抖（Debounce）和节流（Throttle）是前端开发中常用的性能优化技术，它们可以限制函数的执行频率，有效地控制事件触发的次数。在实际应用中，经常会将防抖节流函数与回调函数一起使用，以避免频繁触发导致的性能问题。在JavaScript中，有时我们会使用call或apply方法来执行回调函数。本文将详细解释防抖节流函数为什么要用call或apply去执行回调函数，并提供相应的源代码示例。了解
  • LeetCode169. 多数元素 (JavaScript解法) 煲纸 数据结构与算法leetcode
    169.多数元素题解思路1：摩尔投票法思路由于数的数量超过一半，所以那个数的出现的频率,一定大于等于50%，如果res为正确的众数，则voted的数量不可能为0，所以最后的res就是众数。分析时间复杂度O(N)空间复杂度O(1)代码实现varmajorityElement=function(nums){//初始化备选人和票数letres=nums[0],voted=0;for(letnofnums
  • Python-基于PyQt5,pdf2docx,pathlib的PDF转Word工具(专业版) 闪云-微星 实用小程序pdfwordpythonpycharm开发语言pyqt
    前言：日常生活中，我们常常会跟WPSOffice打交道。作表格，写报告，写PPT......可以说，我们的生活已经离不开WPSOffice了。与此同时，我们在这个过程中也会遇到各种各样的技术阻碍，例如部分软件的PDF转Word需要收取额外费用等。那么，可不可以自己开发一个小工具来实现PDF转Word这个功能呢?答案是肯定的，Python生来就是为应用层开发的。话不多说，我们直接开始今天的Pytho
  • 除了layui.js还有什么比较好的纯JS组件WEB UI？在谷歌浏览上显示 专注VB编程开发20年 javascript前端layui
    以下是一些比较好的纯JS组件WEBUI，可以在谷歌浏览器上良好显示：1.Sencha特点：提供超过140个高性能UI组件，用于构建现代应用程序。支持与Angular和React集成，提供企业级网格解决方案。适用场景：适用于需要高性能、可定制的UI组件的项目，尤其是企业级应用。2.Webix特点：包含102个UI组件，支持跨平台和跨浏览器，提供快速的渲染速度和纯JavaScript代码。适用场景：适
  • Node.js 全局对象 wjs2024 开发语言
    Node.js全局对象引言在Node.js中，全局对象是JavaScript环境中的一部分，它提供了对Node.js运行时环境的访问。全局对象在Node.js中扮演着重要的角色，它使得开发者能够访问和操作Node.js的许多核心功能。本文将详细介绍Node.js的全局对象，包括其特点、常用方法和应用场景。全局对象概述Node.js的全局对象是global，它是Node.js中所有模块的父对象。在N
  • JavaScript函数中this的指向 暗渡x JavaScriptjavascript前端
    总结：谁调用我，我就指向谁（es6箭头函数不算）一、ES6之前每一个函数内部都有一个关键字是this，可以直接使用重点：函数内部的this只和函数的调用方式有关系，和函数的定义方式没有关系1、函数内部的this指向谁，取决于函数的调用方式1.1、全局定义的函数直接调用，this=>windowfunctionfn(){console.log(this)}fn()//此时this指向window1.
  • Tauri应用开发实践指南（5）—Tauri 集成本地数据库 前端徐徐 Tauri应用开发实践指南数据库前端
    本文首发于微信公众号：前端徐徐。欢迎关注，获取更多前端技能分享。前言Tauri是一个构建跨平台桌面应用程序的框架，利用Web技术构建前端，并使用Rust构建后端。它以其小巧的体积和高性能受到开发者的欢迎。在开发过程中，我们常常需要数据本地持久化，所以会需要与本地数据库进行交互。方案比较在Tauri中集成本地数据库有多种方案，常见的包括：SQLite通过直接绑定使用第三方数据库库Tauri插件：ta
  • iconv-lite：一个库搞定所有字符编码问题？ 前端徐徐 宝藏工具electron
    本文首发同名微信公众号：前端徐徐大家好，我是徐徐。今天跟大家分享一款强大的字符编码转换库：iconv-lite。前言在全球化的开发环境中，处理不同字符编码已成为许多应用程序的关键需求。无论你是在开发需要支持多语言的应用，还是需要处理来自不同源的文本数据，一个高效且可靠的字符编码转换工具可以大大提升你的开发效率。今天，我们要介绍的是iconv-lite这个纯JavaScript实现的字符编码转换库，
  • Tauri应用开发实践指南（1）— Tauri 怎么样 前端徐徐 Tauri应用开发实践指南前端前端框架
    本文首发于微信公众号：前端徐徐。欢迎关注，获取更多前端技能分享。Tarui是什么Tauri是一个用于构建针对所有主要桌面和移动平台的小型、高速二进制文件的框架。开发人员可以集成任何能编译为HTML、JavaScript和CSS的前端框架来构建用户体验,同时在需要时利用诸如Rust、Swift和Kotlin等语言进行后端逻辑开发。官网：https://tauri.appTarui架构Tauri的整体
  • javascript-前后端交互模式-简介 gaog2zh #javascirptjavascript前后端交互
    javascript-前后端交互模式-简介目录文章目录1、相关知识2、异步接口调用方式3、URL地址2.1、传统形式的URL2.2、Restful风格的URL2.2.1、http请求方式2.2.3、示例：***后记***：内容图示0-1：随着前后端分离，前后端交互技术不断更新，下面我们看下前后端交互相关知识。1、相关知识前端通过相关接口发送请求，后端接收请求，处理返回响应结果，前端接收响应结果，完
  • 使用Python开发windows桌面程序 ww2890chen
    使用Python开发windows桌面程序一、开发前期准备1.boa-constructor-0.6.1.bin.setup.exe#一个wxWidges的集成开发环境，简单如Delphi，可以直接拖拽控件，并且和其他集成环境不一样，#它不与集成开发环境的MainLoop冲突，用pythonwin,pyScripter都会冲突，典型报错就是运行第二次#程序的时候，直接导致集成开发环境的强制退出，因
  • axios 登录后设置header_axios如何利用promise无痛刷新token weixin_39648430 axios登录后设置header
    需求最近遇到个需求：前端登录后，后端返回token和token有效时间，当token过期时要求用旧token去获取新的token，前端需要做到无痛刷新token，即请求刷新token时要做到用户无感知。需求解析当用户发起一个请求时，判断token是否已过期，若已过期则先调refreshToken接口，拿到新的token后再继续执行之前的请求。这个问题的难点在于：当同时发起多个请求，而刷新token
  • Python的Json方法 weixin_34293059 jsonpythonjavascriptViewUI
    Json简介：Json，全名JavaScriptObjectNotation，是一种轻量级的数据交换格式。Json最广泛的应用是作为AJAX中web服务器和客户端的通讯的数据格式。现在也常用于http请求中，所以对json的各种学习，是自然而然的事情。dumps方法将字典数据类型转换为json字符串类型例子：importjsonm={'a':123,'b':'hahaha'}json_str=js
  • 一文解锁 NVM：Node版本随意切换不再发愁 一个小白的小白人 前端nvmnode.js前端node.js
    前言搞前端开发的朋友肯定都对Node.js不陌生，它在咱们的工作里，就像得力助手，没了它，很多工作都没法顺利开展。但Node.js更新得那叫一个快，新特性、新优化不断冒出来。这就好比你本来开着一辆顺手的车，开得正稳呢，突然厂家说出了新款，性能更强，功能更多，你心里肯定痒痒，想试试新的。可实际情况是，每个项目就像不同的乘客，需求不一样。我之前做一个老项目维护，它就像个念旧的乘客，只认Node.js的
  • 前端必知必会-Vue 简介 编程岁月 vue.js前端javascript
    文章目录Vue简介Vue是一个JavaScript框架为什么要学习Vue？OptionsAPI我的第一页文本插值文本插值中的JavaScript总结Vue简介Vue是一个JavaScript框架。可以使用标记将其添加到HTML页面。Vue使用指令扩展HTML属性，并使用表达式将数据绑定到HTML。Vue是一个JavaScript框架Vue是一个用JavaScript编写的前端JavaScript框
  • 详细介绍：使用 Axios 上传图片文件 还是鼠鼠 javascript前端开发语言ajaxbootstrap前端框架vscode
    目录1.项目背景和功能概述2.（index.html完整代码）结构解析3.JavaScript部分解析3.1事件监听和图片上传3.2处理响应和错误4.完整流程5.总结6.适用场景这篇文章将展示如何通过Axios发送POST请求来实现图片上传。通过用户选择图片文件后，使用FormData构造上传的文件数据，并通过Axios将其提交到服务器。服务器返回图片的URL后，页面会显示上传的图片。下面是详细的
  • 图书管理系统 Axios 源码 __删除图书功能 还是鼠鼠 javascriptbootstrapajaxvscode前端前端框架node.js
    目录代码实现（index.js）代码解析使用方法下面是完整的删除图书功能代码，基于HTML+Bootstrap+JavaScript+Axios开发。代码实现（index.js）//删除图书功能document.querySelector('.list').addEventListener('click',(e)=>{//判断是否点击了删除按钮if(e.target.classList.conta
  • Axios 的地区查询(案例) 还是鼠鼠 ajax前端javascriptbootstrapweb
    目录1.项目背景与功能概述2.完整代码3.HTML结构解析输入表单查询按钮地区列表4.JavaScript部分解析监听点击事件发送Axios请求处理响应数据5.完整流程6.总结7.适用场景8.优化和扩展本案例展示了如何使用Axios发送带查询参数的HTTP请求，查询指定省份和城市下的地区列表。通过用户输入的省份名称和城市名称，向后端API发送请求，获取该地区下的具体区域信息，并将返回的数据动态渲染
  • ASM系列四 利用Method 组件动态注入方法逻辑 lijingyao8206 字节码技术jvmAOP动态代理ASM
            这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇，知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道，同ClassVisitor改变类成员一样，MethodVIsistor如果需要改变方法成员，注入逻辑，也可以
  • java编程思想 --内部类 百合不是茶 java内部类匿名内部类
    内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅   1,内部类的创建  内部类是创建在类中的 package com.wj.InsideClass; /* * 内部类的创建 */ public class CreateInsideClass { public CreateInsideClass(
  • web.xml报错 crabdave web.xml
    web.xml报错   The content of element type "web-app" must match "(icon?,display-  name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s
  • 泛型类的自定义 麦田的设计者 javaandroid泛型
       为什么要定义泛型类，当类中要操作的引用数据类型不确定的时候。 采用泛型类，完成扩展。   例如有一个学生类     Student{ Student(){ System.out.println("I'm a student....."); } }  有一个老师类  
  • CSS清除浮动的4中方法 IT独行者 JavaScriptUIcss
    清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。 1、结尾处加空div标签 clear:both 1 2 3 4 .div 1 { background : #000080 ; border : 1px   s
  • Cygwin使用windows的jdk 配置方法 _wy_ jdkwindowscygwin
    1.[vim /etc/profile]    JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43"  (windows下jdk路径为D:\Java\jdk1.6.0_43)    PATH="$JAVA_HOME/bin:${PATH}"    CLAS
  • linux下安装maven 无量 mavenlinux安装
    Linux下安装maven(转) 1.首先到Maven官网 下载安装文件，目前最新版本为3.0.3，下载文件为 apache-maven-3.0.3-bin.tar.gz，下载可以使用wget命令； 2.进入下载文件夹，找到下载的文件，运行如下命令解压 tar -xvf  apache-maven-2.2.1-bin.tar.gz 解压后的文件夹
  • tomcat的https 配置,syslog-ng配置 aichenglong tomcathttp跳转到httpssyslong-ng配置syslog配置
    1) tomcat配置https,以及http自动跳转到https的配置     1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)      keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit
  • 关于领号活动总结 alafqq 活动
    关于某彩票活动的总结 具体需求，每个用户进活动页面，领取一个号码，1000中的一个； 活动要求 1，随机性，一定要有随机性； 2，最少中奖概率，如果注数为3200注，则最多中4注 3，效率问题，（不能每个人来都产生一个随机数，这样效率不高）； 4，支持断电（仍然从下一个开始），重启服务；（存数据库有点大材小用，因此不能存放在数据库） 解决方案 1，事先产生随机数1000个，并打
  • java数据结构 冒泡排序的遍历与排序 百合不是茶 java
    java的冒泡排序是一种简单的排序规则   冒泡排序的原理：           比较两个相邻的数，首先将最大的排在第一个，第二次比较第二个 ，此后一样；         针对所有的元素重复以上的步骤，除了最后一个     例题；将int array[]
  • JS检查输入框输入的是否是数字的一种校验方法 bijian1013 js
    如下是JS检查输入框输入的是否是数字的一种校验方法： <form method=post target="_blank"> 数字：<input type="text" name=num onkeypress="checkNum(this.form)"><br> </form>
  • Test注解的两个属性：expected和timeout bijian1013 javaJUnitexpectedtimeout
    JUnit4：Test文档中的解释： 　　The Test annotation supports two optional parameters. 　　The first, expected, declares that a test method should throw an exception. 　　If it doesn't throw an exception or if it
  • [Gson二]继承关系的POJO的反序列化 bit1129 POJO
    父类     package inheritance.test2; import java.util.Map; public class Model { private String field1; private String field2; private Map<String, String> infoMap
  • 【Spark八十四】Spark零碎知识点记录 bit1129 spark
    1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的 ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功，DAGScheduler会收到通知，在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中  
  • WAS各种脚本作用大全 ronin47 WAS 脚本
    　　　http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html 　　　无意中，在WAS官网上发现的各种脚本作用，感觉很有作用，先与各位分享一下 　　　 获取下载 这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自
  • java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句 bylijinnan switch
    借鉴网上的思路，用java实现： public class NoIfWhile { /** * @param args * * find x=1+2+3+....n */ public static void main(String[] args) { int n=10; int re=find(n); System.o
  • Netty源码学习-ObjectEncoder和ObjectDecoder bylijinnan javanetty
    Netty中传递对象的思路很直观： Netty中数据的传递是基于ChannelBuffer（也就是byte[]）； 那把对象序列化为字节流，就可以在Netty中传递对象了 相应的从ChannelBuffer恢复对象，就是反序列化的过程 Netty已经封装好ObjectEncoder和ObjectDecoder 先看ObjectEncoder ObjectEncoder是往外发送
  • spring 定时任务中cronExpression表达式含义 chicony cronExpression
    一个cron表达式有6个必选的元素和一个可选的元素，各个元素之间是以空格分隔的，从左至右，这些元素的含义如下表所示： 代表含义            是否必须 允许的取值范围         &nb
  • Nutz配置Jndi ctrain JNDI
    1、使用JNDI获取指定资源： var ioc = { dao : { type :"org.nutz.dao.impl.NutDao", args : [ {jndi :"jdbc/dataSource"} ] } } 以上方法,仅需要在容器中配置好数据源,注入到NutDao即可.
  • 解决 /bin/sh^M: bad interpreter: No such file or directory daizj shell
    在Linux中执行.sh脚本，异常/bin/sh^M: bad interpreter: No such file or directory。   分析：这是不同系统编码格式引起的：在windows系统中编辑的.sh文件可能有不可见字符，所以在Linux系统下执行会报以上异常信息。 解决： 1）在windows下转换： 利用一些编辑器如UltraEdit或EditPlus等工具
  • [转]for 循环为何可恨？ dcj3sjt126com 程序员读书
      Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案，要在Java将来的版本中加入闭包特征。 然而，提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。 不久前，出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨？”[http://ju
  • Android实用小技巧 dcj3sjt126com android
    1、去掉所有Activity界面的标题栏 　　修改AndroidManifest.xml 　　在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"   2、去掉所有Activity界面的TitleBar 和StatusBar  　　修改AndroidManifes
  • Oracle 复习笔记之序列 eksliang Oracle 序列sequenceOracle sequence
    转载请出自出处：http://eksliang.iteye.com/blog/2098859 1.序列的作用 序列是用于生成唯一、连续序号的对象 一般用序列来充当数据库表的主键值 2.创建序列语法如下：   create sequence s_emp start with 1 --开始值 increment by 1 --増长值 maxval
  • 有“品”的程序员 gongmeitao 工作
    完美程序员的10种品质　　   完美程序员的每种品质都有一个范围，这个范围取决于具体的问题和背景。没有能解决所有问题的   完美程序员（至少在我们这个星球上），并且对于特定问题，完美程序员应该具有以下品质： 　　1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强   （范围：用简单方式解决复杂问题）　　
  • 使用KeleyiSQLHelper类进行分页查询 hvt sql.netC#asp.nethovertree
    本文适用于sql server单主键表或者视图进行分页查询，支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码：http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D
  • SVG 教程 （三）圆形，椭圆，直线 天梯梦 svg
    SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆： 下面是SVG代码： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" c
  • 链表栈 luyulong java数据结构
    public class Node { private Object object; private Node next; public Node() { this.next = null; this.object = null; } public Object getObject() { return object; } public
  • 基础数据结构和算法十：2-3 search tree sunwinner Algorithm2-3 search tree
      Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga
  • spring配置定时任务 stunizhengjia springtimer
    最近因工作的需要，用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下，以便以后用到：     //------------------------定时任务调用的方法------------------------------ /** * 存储过程定时器 */ publi
  • ITeye 8月技术图书有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 8月试读活动回顾： http://webmaster.iteye.com/blog/2102830 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《跨终端Web》 gleams：http
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他