ᥬ 小月亮
ᥬ 小月亮

原生JS使用PrintJs进行表格打印 -- 遇到的问题总结

需求1：表格自动分页之后，表头在每一页都需要显示

html中表头增加 thead 标签
css样式新增：

thead {
   display: table-header-group; /* 这个属性使thead总是在新的page-break之后重新开始 */
}

需求2：表格自动分页之后，页头需要在每一页都显示

因为表头能重复显示，所以我是直接将需要重复的页头也放在表头中，然后给一个高度进行样式的调整。

不论是多表头还是只有一个表头，表头的高度要小于整页高度的四分之一，表头过高会让浏览器认为是一种错误，不重复显示表头

需求3：表格自动分页之后，页尾需要在每一页都显示

html中增加 tfoot 标签，使用空格来进行高度占位。

 <tfoot>
    <tr>
        <td>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
            <div class="footer-space">&nbsp;</div>
        </td>
    </tr>
</tfoot>

css样式：

/* 页尾内容固定显示在底部 */
.printFooter {
    position: fixed;
    bottom: 0;
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印页面</title>
    <style>
        /* 点击的按钮 */
        #btn {
            margin: 20px;
            padding: 20px 40px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <button id="btn">点击按钮进行打印</button>

    <div id="printJS-form">
        <!-- 打印单中间 表格部分-->
        <div class="printBody">
            <table class="printBody-table">
                <thead class="printBody-tableThead">
                </thead>
                <tbody class="printTbody">
                    <tr>
                        <!-- 表格数据 -->
                        <td>1234567890zxcvbnmnmm,Print.js can be used to quickly print any image on your page, by passing the image url. This can be useful when you have multiple images on the screen, using a low resolution version of the images. When users try to print the selected image, you can pass the high resolution url to Print.js.</td>
                        <td>M</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                            <div class="footer-space">&nbsp;</div>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <!-- 打印单尾部 -->
        <div class="printFooter">
            <div class="printFooter-tips">尾部</div>
        </div>
    </div>

    <!-- 引入printJs -->
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/print-js/1.6.0/print.js"></script>
    <script>
        // 动态的数据，这里是示例，如果示例的数据的键不确定，需要对整体的数据重新进行处理，以下演示为数据的键是固定的
        let resData = {
            "tableData": [{
                "a": "1",
                "b" : '动态数据-YVHYVHYVHYVHYVHYVHYVH',
                "c" : '动态数据-456',
                "d" : '动态数据-M',
                "e" : '动态数据-Y',
            },{
                "a": "1",
                "b" : '动态数据-YVHYVHYVHYVHYVHYVHYVH',
                "c" : '动态数据-456',
                "d" : '动态数据-M',
                "e" : '动态数据-Y',
            }]
        }
        // 点击按钮之后，首先进行动态数据的插入，然后再调用printJs进行打印
        let btnDom = document.getElementById("btn")
        btnDom.onclick=function() {
            // 将动态的数据拿到后，进行模板数据的插入
            handleTemplate()
            // 打印
            printJS({
                printable: 'printJS-form', // 数据源:pdf or image的url，html类型则填打印区域元素id，json类型则是数据object。
                type: 'html', // 默认pdf，可选类型:pdf, html, image, json
                scanStyles: false, 	//此属性默认为true，printJs会自动扫描当前html结构所用的样式表
                style: stringCssFunc(), // 打印的内容是没有css样式的，此处需要string类型的css样式
            })
        }

        // 插入动态的数据
        var handleTemplate = () => {
            // 打印单页眉的数据动态添加
            let tHeadDom = document.getElementsByClassName('printBody-tableThead')[0]
            let printHeadHtml = `
            
                1
                2
                3
                4
                5
            
            `
            tHeadDom.innerHTML = printHeadHtml
            // 打印单中间的表格
            let printTbody = document.getElementsByClassName('printTbody')[0]
            let tempHtml = '' // 表格中的数据
            for(let i = 0; i < 100;i++){
                let item = resData.tableData[i] || {}
                tempHtml += `
                    ${item.a || 'a'}
                    ${item.b || 'b'}
                    ${item.c || 'c'}
                    ${item.d || 'd'}
                    ${item.e || 'e'}
                `
            }
            printTbody.innerHTML = tempHtml
        }

        // 样式代码
        var stringCssFunc = function() {
            return `
                @page {
                    margin: 10mm;
                };
                .printBody-table thead tr:last-child {
                    border: 1px solid #333;  
                }
                .printBody-table thead tr:last-child th {
                    border-right: 1px solid #333;  
                }
                .printBody-table tbody tr td {
                    white-space: wrap;
                    text-align: center;
                    border: 1px solid #333;
                }
                

                /*  **************************   打印单尾部 start ********************************* */
                .printFooter {
                    width: calc(100% - 80px);
                    padding: 20px;
                }
                .printHead-single {
                    display: flex;
                }
                .printFooter-tips{
                    margin-bottom: 10px;
                    font-size: 12px;
                }
                /*  **************************   打印单尾部 end ********************************* */
                /* 页眉、页脚设置 */
                @media print {
                    .printBody-table {
                        page-break-inside: avoid;
                        border-collapse: collapse;
                    }
                    /* 保证thead始终出现在新页顶部 */
                    .printBody-table thead {
                        display: table-header-group; /* 这个属性使thead总是在新的page-break之后重新开始 */
                    }
                    .printFooter {
                        position: fixed;
                        bottom: 0;
                    }
                }
            `
        }
    </script>
</body>
</html>

最终效果：

原生JS使用PrintJs进行表格打印 -- 遇到的问题总结_第1张图片

你可能感兴趣的:(JS,javascript,开发语言,ecmascript)

  • 微服务之间的调用方式总结 lanbing 微服务微服务架构云原生
    微服务架构是一种将一个单一应用程序划分为多个小型、独立服务的设计模式，每个服务运行在自己的进程中，并通过轻量级通信机制（通常是HTTP或消息队列）进行交互。微服务之间的调用是构建分布式系统的关键部分，常见的调用方式包括以下几种：一、同步调用（SynchronousCommunication）1.HTTP/REST使用标准的HTTP协议和RESTful风格进行服务间通信。使用JSON/XML传输数据
  • 基于 WebGL 与 GIS 的智慧垃圾分类三维可视化技术方案 图扑可视化 数字孪生三维可视化垃圾分类智慧环卫
    图扑自主研发的HT可视化引擎，基于HTML5的WebGL与Canvas技术构建，形成了完整的2D/3D图形渲染体系。该引擎无需依赖第三方插件，通过纯JavaScript脚本调用API，即可实现跨平台的可视化交互体验，支持PC端、移动端及大屏终端的多屏协同。在三维渲染技术层面，引擎深度集成WebGL底层图形接口，构建了高效的轻量化处理体系。HT还支持3DTiles格式航拍倾斜摄影实景数据、城市建筑群
  • 基于nodejs+vue.js服装商店电子商务管理系统
    如果你是一个小白,你不懂得像javaPHP、Python等编程语言，那么Node.js是一个非常好的选择。采用vscode软件开发,配套软件安装.包安装调试部署成功,有视频讲解前端:html+vue+elementui+jQuery、js、css数据库：mysql,Navicatvue框架于Node运行环境的Web框架,随着互联网技术的飞速发展，世界逐渐成了一个地球村，空间的距离也不再是那么重要。
  • JWT认证授权原理和简单实现 风铃喵游 node
    1.关于JWT:(1).JWT(jsonwebtoken)是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准(2).JWT的声明一般被用于在身份提供者和服务提供者之间传递被认证的用户身份信息，以便于从资源服务器获取资源。最为常见的场景就是用户登录认证(3).因为数字签名的存在，这些信息是可信的，JWT可以使用HMAC算法或者是RSA的公私密钥对进行签名2.主要的应用场景:(1).身份
  • 计算机毕业设计Node.js+Vue新海图书商城网页设计论文（程序+源码+LW+部署) Node.js橙子毕设程序 vue.js课程设计node.js
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：Node.js+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：Express框架+Node.js+Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可
  • （附源码）node.js+mysql+基于JavaScript网上商城开发设计 毕业设计261620 Wx-Biye_Design springbootjavamysqlpythonphp
    Node.js网上商城的开发摘要随着Internet的使用越来越广泛，在传统的商业模式中，对于日常各类商品，人们习惯于到各种商家店铺购买。然而在快节奏的新时代中，人们不一定能为购买各类商品腾出时间，更不会耐心挑选自己想要的商品。所以设计一个网上商城，既是迎合电子商务的大潮流，也是传统商品销售行业的一个突破口，可以给传统销售行业带来转变和机遇。本系统主要是提供给用户一个购买各类商品的平台，通过价格优
  • 24个 JavaScript 循环遍历方法 xixi_666 javascript开发语言ecmascript
    一、数组遍历方法1、forEach()forEach方法用于调用数组的每个元素，并将元素传递给回调函数。数组中的每个值都会调用回调函数。其语法如下：array.forEach(function(currentValue,index,arr),thisValue)该方法的第一个参数为回调函数，是必传的，它有三个参数：currentValue：必需。当前元素index：可选。当前元素的索引值。arr：
  • js打开word文件相关总结 xixi_666 jsword
    打开方法：一.在IE中,可以通过js创建Word.Application,来打开,修改服务器上的文档.varurl="http://localhost/test/a.doc";//直接打开wordvarword=newActiveXObject("Word.Application");word.Visible=true;word.Activate();//打开的word激活房子最前面窗口word.
  • JavaScript零基础入门速通（完整） 小黄编程快乐屋 javascripthtml5
    JavaScript（简称JS）是现代网页开发中不可或缺的编程语言之一。它为网页增加了动态交互性，是一种前端编程语言，用于处理网页上的各种用户行为，如按钮点击、表单提交、页面加载等。它的强大不仅体现在浏览器端，也可以通过Node.js在服务器端运行。本文将详细介绍JavaScript的基础知识，帮助你从零开始掌握这门语言。1.JavaScript简介JavaScript最早由Netscape公司的
  • JavaScript爬虫使用API提取代理模板 q56731523 javascript爬虫开发语言
    JavaScript爬虫有两大优势：直接执行页面JS（Puppeteer/Playwright）和解析SPA（单页应用）如React/Vue这就是我为何钟爱于JavaScript爬虫的原因。最近有几个同行说，使用API代理IP配合JavaScript经常报错，修改请求头或者访问频率也未能解决问题，因此，请求我们出手修改代码，一看代码简直惨不忍睹，能运行起来算他运气好，索性我自己写个通用模版给他参考
  • Chart.js 安装使用教程 小奇JAVA面试 安装使用教程javascript开发语言ecmascript
    一、Chart.js简介Chart.js是一个简单而灵活的JavaScript图表库，支持8种常用图表类型（折线图、柱状图、饼图等），基于HTML5Canvas渲染。它轻量易用，适合快速构建响应式图表，广泛应用于仪表盘、可视化后台、统计图展示等场景。二、Chart.js安装方式2.1使用CDN引入（推荐快速使用）2.2使用npm安装（适合前端工程项目）npminstallchart.js--sav
  • 一份来自前端开发工程师的规范简历 追影的React开发者 前端javascriptphotoshop
    个人资料姓名：嘻嘻性别：女电话：12132323613邮箱：[email protected]现居地：上海市工作年限：3年求职意向期望职位：前端开发工程师期望薪资：面议工作性质：全职到岗时间：离职,一周内入职专业技能精通DIV+CSS页面布局，重构,掌握JavaScript，熟悉w3c标准，了解HTML语义化有一定的了解。熟练运用浏览器兼容技术，熟练进行前端性能优化设计。熟练掌握HTML5技术
  • Vue-Highcharts 使用教程 柳嵘英Humphrey
    Vue-Highcharts使用教程项目地址:https://gitcode.com/gh_mirrors/vu/vue-highcharts项目介绍Vue-Highcharts是一个基于Vue.js的高级图表库，它允许开发者轻松地在Vue项目中集成Highcharts。Highcharts是一个功能强大的图表库，支持多种图表类型，包括线图、柱状图、饼图、散点图等，并且具有高度的可定制性和交互性。
  • JWT认证性能优化实战指南
    JWT认证性能优化实战指南一、技术背景与应用场景随着微服务与云原生架构的普及，基于Token的认证方式成为保证系统安全与可扩展性的首选方案。JWT（JSONWebToken）以其自包含、自验证、跨语言支持等优点，在分布式环境中广泛应用。但在高并发场景下，JWT的解析、签名与验证过程可能成为性能瓶颈。本篇文章将结合真实生产环境，深入剖析JWT认证的核心原理，重点分析性能瓶颈，并提供多种可落地的优化实
  • 深入理解React的虚拟DOM与性能优化 天天进步2015 前端开发react.js性能优化javascript
    React作为现代前端开发的主流框架，其高效的渲染能力和良好的开发体验离不开虚拟DOM（VirtualDOM）的设计理念。本文将带你深入理解React的虚拟DOM原理，并结合实际案例，探讨如何进行性能优化。一、什么是虚拟DOM？虚拟DOM（VirtualDOM，简称VDOM）是React引入的一种轻量级JavaScript对象，用于描述真实DOM的结构。它本质上是DOM的一个抽象表示，React通
  • LangChain + Ollama + Spring AI：打造能自动决策的智能 Agent 大模型应用 langchainspring人工智能llamaLLMprompt
    AI的出现极大的提升了生产力，对我们程序员来说，积极的拥抱新技术是非常有必要的。今天我们基于LangChain框架，创建一个我们自己的Agent,并集成我们自己的MCP工具。体验一把LangChain。我的系统是Windows。在开始之前，我们需要:•使用Ollama运行deepseek-r1:7b•使用Node.js开发的MCPWeatherService工具•使用Flask提供WebAPI服务
  • 52-【JavaScript-Day 52】告别“野路子”代码：ESLint、Prettier与Web安全入门 吴师兄大模型 javascript开发语言ecmascriptjava人工智能大模型ESLint
    Langchain系列文章目录01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南02-玩转LangChainMemory模块：四种记忆类型详解及应用场景全覆盖03-全面掌握LangChain：从核心链条构建到动态任务分配的实战指南04-玩转LangChain：从文档加载到高效问答系统构建的全程实战05-玩转LangChain：深度评估问答系统的三种高效方法（示例生成、手
  • 【微信小程序】5步轻松搞定Node.js环境，微信小程序开发从此畅通无阻 墨瑾轩 微信小程序微信小程序node.js小程序
    关注墨瑾轩，带你探索编程的奥秘！超萌技术攻略，轻松晋级编程高手技术宝库已备好，就等你来挖掘订阅墨瑾轩，智趣学习不孤单即刻启航，编程之旅更有趣标题：5步轻松搞定Node.js环境，微信小程序开发从此畅通无阻！引言嘿，小伙伴们！今天我们要聊的是如何在你的电脑上搭建Node.js环境，为微信小程序开发做好准备。是不是觉得听起来就很高大上？别担心，跟着我们的步伐一步步来，保证让你轻松上手，让小程序开发变得
  • threejs-夜景
    记录threejs实现夜景光照、投影、阴影、反射、材质颜色编码的效果主要是光源设置了shadow、encodingThree.jsScenebody{margin:0;}canvas{width:100%;height:100%}{"imports":{"three":"./three172/build/three.module.js","three/addons/":"./three172/ex
  • Node.js 安装使用教程 小奇JAVA面试 安装使用教程node.js
    一、Node.js简介Node.js是一个基于ChromeV8引擎的JavaScript运行时，允许在服务器端运行JavaScript。它以事件驱动、非阻塞I/O为核心，适合构建高性能的网络服务、API接口、中间层服务器、命令行工具等。二、Node.js安装方式2.1官方安装包（推荐）访问Node.js官网：https://nodejs.org/下载LTS（长期支持）版本安装完成后，在命令行验证：
  • UniApp 开发第一个项目 速易达网络 uni-app
    UniApp开发第一个项目全流程指南，涵盖环境搭建、项目创建、核心开发到调试发布，结合最新实践整理而成，适合零基础快速上手：一、环境准备（5分钟）安装开发工具HBuilderX（官方推荐IDE）：下载App开发版，安装路径避免中文或空格微信开发者工具（调试小程序必备）：官网下载，安装后开启服务端口（设置→安全设置）Node.js（可选）：用于包管理，建议v18+️
  • AJAX使用教程以及axios的安装使用 崽崽彤 ajaxjavascript前端
    什么是AJAX？AJAX即asyncjavascriptandXML（异步的js和xml），主要是用来实现页面的局部刷新的一门技术。AJAX的核心对象是XMLHttpRequestAJAX的工作原理在发送请求后可继续注册，解决了传统注册存在的问题。使用AJAX发送异步请求的方法步骤实例化核心对象var变量名=newXMLHttpRequest()varxhr=newXMLHttpRequest()
  • python 月之梦 python数据库开发语言
    实时监控MT5和BITMEXimportMetaTrader5asmt5//用来连接MT5并与其交互importtime//用于时间延迟fromdatetimeimportdatetime#用于处理日期和时间importrequests#用于发送HTTP请求（BitMEXAPI）importjson#用于处理JSON数据（BitMEXAPI）frommultiprocessingimportPro
  • AJAX 安装使用教程 小奇JAVA面试 安装使用教程ajax前端javascript
    一、AJAX简介AJAX（AsynchronousJavaScriptandXML）是一种在无需重新加载整个网页的情况下，能够与服务器交换数据并更新部分网页内容的技术。它不是一种新语言，而是使用现有的标准组合：JavaScript+XMLHttpRequest（或Fetch）+HTML+CSS。二、AJAX是否需要安装？不需要单独安装！AJAX是浏览器原生支持的技术，主流浏览器均内置XMLHttp
  • 【精品毕设】基于SSM+JSP的简易版营业厅宽带系统设计与实现 想念@思恋 java毕业设计课程设计java课程设计毕业设计SSM
    关注【墨岚创客】，回复【毕设】，赠送免费毕设资源，具体联系方式见文末摘要现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本营业厅宽带系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此营业厅宽带系统利用当下成熟完善的SSM框架，使
  • React 学习（一） COLDEHY react.js学习前端
    1.b/s架构是浏览器的形式，就是通过网页的方式访问2.是构建用户界面的javascript库，react是用来替代dom的，原本使用ajax结合dom实现页面局部刷新的方式需要频繁的操作dom不方便，所以我们可以使用前端框架来解决，不再直接操作dom，而是操作react，react去操作dom3.react特点虚拟dom，不用原生dom，原生dom存在兼容性问题，可能这个浏览器能用下一个就不能用
  • 跟着AI学习C#之项目实战-电商平台 Day7 蓝胖子不会敲代码 C#学习c#开发语言
    Day7：部署准备与优化✅今日目标：添加静态资源（CSS、JS、图片）优化页面样式与交互体验添加分页功能（商品、订单列表）配置生产环境设置（appsettings.Production.json）准备发布部署（dotnetpublish）功能概览类型内容静态资源wwwroot/css,wwwroot/js,wwwroot/images页面样式优化使用Bootstrap+自定义CSS增强用户体验分页
  • mysqlx_max_connections 讓丄帝愛伱 数据库#MySQLmysql
    mysqlx_max_connections是MySQL8.0版本中的一个系统变量，它用于设置MySQLXProtocol（X协议）的最大连接数。MySQLXProtocol是MySQL的一种新的协议，它基于WebSocket和JSON，用于提供无状态、基于文档的访问MySQL的功能。mysqlx_max_connections定义了通过X协议允许的最大并发连接数。当达到该限制时，新的连接请求将被
  • springboot+微信小程序接入微信小程序支付（使用证书与JSAPI） 小杨HPDay！ springboot微信小程序后端
    1、maven引入依赖com.github.wechatpay-apiv3wechatpay-apache-httpclient0.4.52、配置文件application.yml#微信支付相关参数wx-pay:#商户id(微信支付商户平台获取)mch-id:xxxxxxxxx#公众号appid(和商户id绑定过后，微信支付商户平台或者微信公众平台获取)appid:xxxxxxxxx#商户证书序列
  • JavaScript对象(Object)常用操作
    创建对象//使用对象字面量、构造函数或者Object.create()方法来创建对象//对象字面量constperson={name:'John',age:30,hobbies:['reading','swimming']};//构造函数functionCar(make,model){this.make=make;this.model=model;}constmyCar=newCar('Toyot
  • mysql主从数据同步 林鹤霄 mysql主从数据同步
    配置mysql5.5主从服务器(转) 教程开始：一、安装MySQL 说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22  二、配置MySQL主服务器（192.168.21.169）mysql  -uroot  -p   &nb
  • oracle学习笔记 caoyong oracle
    1、ORACLE的安装    a>、ORACLE的版本    8i,9i :   i是internet    10g,11g : grid (网格)    12c : cloud (云计算)       b>、10g不支持win7 &
  • 数据库，SQL零基础入门 天子之骄 sql数据库入门基本术语
    数据库，SQL零基础入门        做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。          数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关
  • pom.xml 一炮送你回车库 pom.xml
    1、一级元素dependencies是可以被子项目继承的 2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素 3、父项目里的一级元素<modules> <module>lcas-admin-war</module> <
  • sql查地区省市县 3213213333332132 sqlmysql
    -- db_yhm_city SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35 SELECT * FROM db_yhm_city WHERE class_parent_id =169 SELECT d1.cla
  • 关于监听器那些让人头疼的事 宝剑锋梅花香 画图板监听器鼠标监听器
           本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。       
  • JAVA的遍历MAP darkranger map
    Java Map遍历方式的选择 1. 阐述 　　对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？ 　　为了解遍历性能的真实差距，包括在遍历ke
  • POJ 2312 Battle City 优先多列+bfs aijuans 搜索
    来源：http://poj.org/problem?id=2312 题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。 思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1
  • Hibernate与Jpa的关系，终于弄懂 avords javaHibernate数据库jpa
    我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。 在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany
  • 酸爽的console.log bee1314 console
    在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。 /** * log.js hufeng * The safe wrapper for `console.xxx` functions *
  • 哈佛教授：穷人和过于忙碌的人有一个共同思维特质 bijian1013 时间管理励志人生穷人过于忙碌
            一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。 　　这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业
  • other operate 征客丶 OSosx
    一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中 二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证] -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一
  • 【Scala五】分析Spark源代码总结的Scala语法三 bit1129 scala
    1. If语句作为表达式 val properties = if (jobIdToActiveJob.contains(jobId)) { jobIdToActiveJob(stage.jobId).properties } else { // this stage will be assigned to "default" po
  • ZooKeeper 入门 BlueSkator 中间件zk
    ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。 值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利
  • MySQL取得当前时间的函数是什么 格式化日期的函数是什么 BreakingBad mysqlDate
    取得当前时间用 now() 就行。 在数据库中格式化时间 用DATE_FORMA T(date, format) . 根据格式串format 格式化日期或日期和时间值date，返回结果串。 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值: %S, %s 两位数字形式的秒（ 00,01,
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 4_JAVA+Oracle面试题(有答案) chenke oracle
    基础测试题 卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。 选择题 1、 What will happen when you attempt to compile and run the following code? （3） public class Static { static { int x = 5; // 在static内有效 } st
  • 新一代工作流系统设计目标 comsci 工作算法脚本
      用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。 在这个设计中，最难的地方是系统根据什么来生成流
  • oracle 行链接与行迁移 daizj oracle行迁移
    表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下) 第一种情况: INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据
  • [JShop]开源电子商务系统jshop的系统缓存实现 dinguangx jshop电子商务
    前言 jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache
  • 初三全学年难记忆单词 dcj3sjt126com englishword
    several 儿子；若干 shelf 架子 knowledge 知识；学问 librarian 图书管理员 abroad 到国外，在国外 surf 冲浪 wave 浪；波浪 twice 两次；两倍 describe 描写；叙述 especially 特别；尤其 attract 吸引 prize 奖品；奖赏 competition 比赛；竞争 event 大事；事件 O
  • sphinx实践 dcj3sjt126com sphinx
      安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server   yum install sphinx 如果失败的话使用下面的方式安装 wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm yum loca
  • JPA之JPQL（三） frank1234 ormjpaJPQL
    1 什么是JPQL JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。 2 检索单个对象 @Test public  void querySingleObject1() {     Query query = em.createQuery("sele
  • Remove Duplicates from Sorted Array II hcx2013 remove
    Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For example,Given sorted array nums = [1,1,1,2,2,3], Your function should return length
  • Spring4新特性——Groovy Bean定义DSL jinnianshilongnian spring 4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装Mysql5.5 liuxingguome centos
    CentOS下以RPM方式安装MySQL5.5 首先卸载系统自带Mysql： yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mysql rm /etc/my.cnf 查看是否还有mysql软件： rpm -qa|grep mysql 去http://dev.mysql.c
  • 第14章 工具函数（下） onestopweb 函数
    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/
  • POJ 1050 SaraWon 二维数组子矩阵最大和
    POJ ACM第1050题的详细描述，请参照 http://acm.pku.edu.cn/JudgeOnline/problem?id=1050 题目意思： 给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。 如二维数组 0 -2 -7 0 9 2 -6 2 -4 1 -4 1 -1 8 0 -2 中和最大的子矩阵是 9 2 -4 1 -1 8 且最大和是15
  • [5]设计模式——单例模式 tsface java单例设计模式虚拟机
    单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点   安全的单例模式：     /* * @(#)Singleton.java 2014-8-1 * * Copyright 2014 XXXX, Inc. All rights reserved. */ package com.fiberhome.singleton;
  • Java8全新打造，英语学习supertool yangshangchuan javasuperword闭包java8函数式编程
    superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。   升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他