xyx清风暖阳
xyx清风暖阳

JavaWeb-LayUI框架的介绍与使用方式（前端框架篇）

LayUI

主要内容

LayUI 的安装及使用

LayUI 的介绍

​ layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。

​ 由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。

​

LayUI 的特点

（1）layui属于轻量级框架，简单美观。适用于开发后端模式，它在服务端页面上有非常好的效果。

（2）layui是提供给后端开发人员的ui框架，基于DOM驱动。

下载与使用

  1. 在 官网首页 下载到 layui 的最新版。目录结构如下：

     ├─css // css目录
  │  │─modules // 模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css // 核心样式文件
  ├─font  // 字体图标目录
  ├─images // 图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay // 模块核心目录
  │  └─modules // 各模块组件
  │─layui.js // 基础核心库
  └─layui.all.js // 包含layui.js和所有模块的合并文件

  2. 获得 layui 后，将其完整地部署（拷贝到项目中）到你的项目目录，你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js // 提示：如果是采用非模块化方式，此处可换成：./layui/layui.all.js
  1. 基本的入门页面



  
  
  开始使用layui

  1. 还需要声明需要使用的 模块 和 回调函数。参照官方文档，选择自己想要的效果就行。

    比如：

页面元素

布局

布局容器

固定宽度

将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。


  

    ……
完整宽度

可以不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应


  ……

栅格系统

​ 为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 引进了一套具备响应式能力的栅格系统。将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。

栅格布局规则

  1. 采用 layui-row 来定义行，如：

  2. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：

    • 变量 md 代表的是不同屏幕下的标记
    • 变量 ***** 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
    • 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

  3. 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕）。

  4. 可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。

  5. 可以在列（column）元素中放入你自己的任意元素填充内容

示例：

常规布局（以中型屏幕桌面为例）：



    

      你的内容 9/12
    

    

      你的内容 3/12
响应式规则

​ 栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理。

超小屏幕 (手机<768px) 小屏幕 (平板≥768px) 中等屏幕 (桌面≥992px) 大型屏幕(桌面≥1200px)
.layui-container的值 auto 750px 970px 1170px
标记 xs sm md lg
列对应类 * 为1-12的等分数值 layui-col-xs* layui-col-sm* layui-col-md* layui-col-lg*
总列数 12 12 12 12
响应行为 始终按设定的比例水平排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列 
平板、桌面端的不同表现：



    

        平板≥768px：6/12 | 桌面端≥992px：4/12
    





     
    

        平板≥768px：4/12 | 桌面端≥992px：6/12
    






    

        平板≥768px：12/12 | 桌面端≥992px：8/12
列边距

​ 通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会出现左边距，最右的列不会出现右边距。列间距在保证排版美观的同时，还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距，预设了 12 种不同尺寸的边距，分别是：

/* 支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔 */
layui-col-space1 
layui-col-space2 
layui-col-space4 
layui-col-space5 
layui-col-space6 
layui-col-space8 
layui-col-space10 
layui-col-space12 
layui-col-space14 
layui-col-space15 
layui-col-space16 
layui-col-space18 
layui-col-space20 
layui-col-space22 
layui-col-space24 
layui-col-space25 
layui-col-space26 
layui-col-space28 
layui-col-space30

示例：

列间距



    

        
        

            1/3
        

    

    

        

            1/3
        

    

    

        

            1/3

注：

1\. layui-col-space：设置后不起作用主要是因为**设置的是padding**,也就是说是**向内缩**，所以设置背景色padding也是会添上颜色，看起来好像没有间距一样。可以在里面在加一个div，来达到目的。
2\. 间距一般不高于30px，如果超过30，建议使用列偏移。
列偏移

​ 对列追加 类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
​ 如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度

列偏移



    

        4/12
    

    

        偏移4列，从而在最右

​ 注：列偏移可针对不同屏幕的标准进行设定，在当前设定的屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。

列嵌套

​ 可以对栅格进行无穷层次的嵌套。在列元素（layui-col-md）中插入行元素（layui-row*），即可完成嵌套。

列嵌套



    

        

            

                内部列
            

            

                内部列
            

            

                内部列

基本元素

按钮

用法

​ 向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。



一个可跳转的按钮

一个按钮
主题
名称 组合
原始 class=“layui-btn layui-btn-primary”
默认 class=“layui-btn”
百搭 class=“layui-btn layui-btn-normal”
暖色 class=“layui-btn layui-btn-warm”
警告 class=“layui-btn layui-btn-danger”
禁用 class=“layui-btn layui-btn-disabled”

示例：
尺寸
尺寸 组合
大型 class=“layui-btn layui-btn-lg”
默认 class=“layui-btn”
小型 class=“layui-btn layui-btn-sm”
迷你 class=“layui-btn layui-btn-xs”
圆角

layui-btn-radius
图标

导航

​ 导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。

​ 依赖加载模块：element

实现步骤：

  1. 引入的资源

  2. 依赖加载模块

  3. 显示指定类型的导航

水平导航
垂直/侧边导航

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

水平导航：layui-nav
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side
导航主题

​ 通过对导航追加CSS背景类，让导航呈现不同的主题色



    
  …

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

面包屑

  首页
  国际新闻
  亚太地区
  正文

你还可以通过设置属性 lay-separator="" 来自定义分隔符。例如：


  首页
  国际新闻
  亚太地区
  正文

选项卡

​ 导航菜单可应用于头部和侧边，支持响应式，支持删除选项卡等功能。

​ 依赖加载模块：element

实现步骤

  1. 引入的资源

  2. 依赖加载模块

  3. 加载HTML

    
  
      
    
    • 网站设置
      • 
    
    • 用户管理
      • 
    
    • 权限分配
      • 
    
    • 商品管理
      • 
    
    • 订单管理
      • 
  
    
  
    
    
    内容1
    
    
    内容2
    
    
    内容3
    
    
    内容4
    
    
    内容5
选项卡风格
默认风格：layui-tab
简洁风格需要追加class：layui-tab-brief
卡片风格需要追加class：layui-tab-card
带删除的选项卡

可以对父层容器设置属性 lay-allowClose=“true”来允许Tab选项卡被删除


  
    
    
  • 网站设置
    • 
    
  • 用户管理
    • 
    
  • 权限分配
    • 
    
  • 商品管理
    • 
    
  • 订单管理
    • 
  

  

    
内容1

    
内容2

    
内容3

    
内容4

    
内容5

表格

常规用法

  
    
    
    
  
  
    

      昵称
      加入时间
      签名
    
 
  
  
    

      贤心
      2016-11-29
      人生就像是一场修行
    

    

      许闲心
      2016-11-28
      于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
基础属性
属性名 属性值 备注
lay-even 无 用于开启 隔行 背景，可与其它属性一起使用
lay-skin=“属性值” line （行边框风格）

row （列边框风格）
nob （无边框风格） | 若使用默认风格不设置该属性即可 |
| lay-size=“属性值” | sm （小尺寸）
lg （大尺寸） | 若使用默认尺寸不设置该属性即可 |

你所需要的基础属性写在table标签上，例如：




  
    
    
    
  
  
    

      昵称
      加入时间
      签名
    
 
  
  
    

      贤心
      2016-11-29
      人生就像是一场修行
    

    

      许闲心
      2016-11-28
      于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…

表单

​ 依赖加载模块：form

  1. 在一个容器中设定 class=“layui-form” 来标识一个表单元素块

  2. 基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。

    
    
    
    
        原始表单元素区域
输入框

  • required：注册浏览器所规定的必填字段

  • lay-verify：注册form模块需要验证的类型

  • class=“layui-input”：layui.css提供的通用CSS类

下拉选择框
  • 属性selected可设定默认项
  • 属性disabled开启禁用，select和option标签都支持
  • 可以通过 optgroup 标签给select分组
  • 通过设定属性 lay-search 来开启搜索匹配功能
复选框
默认风格：


 
 


原始风格：
  • 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
  • 属性checked可设定默认选中
  • 属性lay-skin可设置复选框的风格 （原始风格：lay-skin=“primary”）
  • 设置value=“1”可自定义值，否则选中时返回的就是默认的on
开关

将复选框checkbox，通过设定 lay-skin=“switch”形成了开关风格
  • 属性checked可设定默认开
  • 属性disabled开启禁用
  • 属性lay-text可自定义开关两种状态的文本 （两种文本用 “|” 隔开）
  • 设置value=“1”可自定义值，否则选中时返回的就是默认的on
单选框
  • 属性title可自定义文本
  • 属性disabled开启禁用
  • 设置value=“xxx”可自定义值，否则选中时返回的就是默认的on
文本域
  • class=“layui-textarea”：layui.css提供的通用CSS类
组装行内表单

    

        
        

          
        

        
-
  • class=“layui-inline”：定义外层行内
  • class=“layui-input-inline”：定义内层行内
忽略美化渲染

​ 可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。
表单方框风格

​ 通过追加 layui-form-pane 的class，来设定表单的方框风格。

组件示例

弹出层

模块加载名称：layer，独立版本：layer.layui.com

使用场景

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景 用前准备 调用方式
1. 作为独立组件使用 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。 通过script标签引入layer.js后，直接用即可。
2. layui 模块化使用 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js 通过layui.use(‘layer’, callback)加载模块

  1. 作为独立组件使用 layer

  2. 在 layui 中使用 layer

    layui.use('layer', function(){
  var layer = layui.layer;

  layer.msg('hello');
});
基础参数

  1. type - 基本层类型

    类型：Number，默认：0

可传入的值有：
    0（信息框，默认）
    1（页面层）
    2（iframe层）
    3（加载层）
    4（tips层）

  2. title - 标题

    类型：String/Array/Boolean，默认：'信息'

title支持三种类型的值：
    若传入的是普通的字符串，如 title :'我是标题'，那么只会改变标题文本；
    若需要自定义样式，可以title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；
    若你不想显示标题栏，可以 title: false；

  3. content - 内容

    类型：String/DOM/Array，默认：''

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM。


     /* 信息框 */
layer.open({
    type:0,
    title:"系统消息",
    // content可以传入任意的文本或html
    content:"Hello"
});

/* 页面层 */
layer.open({
    type:1,
    title:"系统消息",
    // content可以传入任意的文本或html
    content:"
    Hello
    "
});

/* iframe */
layer.open({
    type:2,
    title:"系统消息",
    // content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['url', 'no']
    content:"http://www.baidu.com"
    // content:["http://www.baidu.com",'no']
});

 /* tips层 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

  4. area - 宽高

    类型：String/Array，默认：'auto'

在默认状态下，layer是宽高都自适应的。
当定义宽度时，你可以area: '500px'，高度仍然是自适应的。
当宽高都要定义时，你可以area: ['500px', '300px']。

  5. icon - 图标

    注：信息框和加载层的私有参数。

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认层可以传入0-6。如果是加载层，可以传入0-2。


    // eg1
layer.alert('酷毙了', {icon: 1});
// eg2
layer.msg('不开心。。', {icon: 5});
// eg3
layer.load(1); // 风格1的加载

  6. 示例

    // eg1
layer.alert('很高兴见到你', {icon: 6});

// eg2
layer.msg('你愿意和我做朋友么？', {
    time: 0, //不自动关闭
    btn: ['当然愿意', '狠心拒绝'], // 按钮
    yes: function(index){ 
        layer.close(index); // 关闭当前弹出框
        layer.msg('新朋友，你好！', {
            icon: 6, // 图标
            btn: ['开心','快乐']
        });
    }
});

// eg3
layer.msg('这是常用的弹出层');

// eg4
layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});

// eg5
layer.msg('玩命加载中...=￣ω￣=', function(){
    // 关闭后的操作
    layer.msg('(⊙o⊙)？');
});

日期与时间选择

​ 模块加载名称：laydate，独立版本：http://www.layui.com/laydate/

​ layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式。

快速使用

​ 和 layer 一样，可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，请按照实际需求来选择。

场景 用前准备 调用方式
1. layui 模块化使用 下载 layui 后，引入layui.css和layui.js即可 通过layui.use(‘laydate’, callback)加载模块后，再调用方法
2. 作为独立组件使用 去 layDate 独立版本官网下载组件包，引入 laydate.js 即可 直接调用方法使用

在layui模块中使用



    
        
        日期与时间选择
基础参数

  1. elem - 绑定元素

    类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象


    laydate.render({ 
  elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等
});

  2. type - 控件选择类型

    类型：String，默认值：date

用于单独提供不同的选择器类型，可选值如下表：
    type可选值 名称 用途
    year 年选择器 只提供年列表选择
    month 年月选择器 只提供年、月选择
    date 日期选择器 可选择：年、月、日。type默认值，一般可不填
    time 时间选择器 只提供时、分、秒选择
    datetime 日期时间选择器 可选择：年、月、日、时、分、秒 
    //年选择器
laydate.render({ 
  elem: '#test'
  ,type: 'year'
});

//年月选择器
laydate.render({ 
  elem: '#test'
  ,type: 'month'
});

//日期选择器
laydate.render({ 
  elem: '#test'
  //,type: 'date' //默认，可不填
});

//时间选择器
laydate.render({ 
  elem: '#test'
  ,type: 'time'
});

//日期时间选择器
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
});

  3. format - 自定义格式

    类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：
    格式符 说明
    yyyy 年份，至少四位数。如果不足四位，则前面补零
    y 年份，不限制位数，即不管年份多少位，前面均不补零
    MM 月份，至少两位数。如果不足两位，则前面补零。
    M 月份，允许一位数。
    dd 日期，至少两位数。如果不足两位，则前面补零。
    d 日期，允许一位数。
    HH 小时，至少两位数。如果不足两位，则前面补零。
    H 小时，允许一位数。
    mm 分钟，至少两位数。如果不足两位，则前面补零。
    m 分钟，允许一位数。
    ss 秒数，至少两位数。如果不足两位，则前面补零。
    s 秒数，允许一位数。

    通过上述不同的格式符组合成一段日期时间字符串，可任意排版。

    //自定义日期格式
laydate.render({ 
  elem: '#test'
  ,format: 'yyyy年MM月dd日' //可任意组合
});

  4. value - 初始值

    类型：String，默认值：new Date()

支持传入符合format参数设定的日期格式字符，或者 new Date()


    // 传入符合format格式的字符给初始值
laydate.render({ 
  elem: '#test'
  ,value: '2018-08-18' //必须遵循format参数设定的格式
});

// 传入Date对象给初始值
laydate.render({ 
  elem: '#test'
  ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳
});

分页

​ 模块加载名称：laypage

快速使用

​ laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。



    
        
        分页
基础参数

通过核心方法：laypage.render(options) 来设置基础参数。

参数选项 说明 类型 默认值
elem 指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id’ 注意：这里不能加 # 号2. elem: document.getElementById(‘id’) String/Object -
count 数据总数。一般通过服务端得到 Number -
limit 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 Number 10
limits 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框 Array [10, 20, 30, 40, 50]
curr 起始页。一般用于刷新类型的跳页以及HASH跳页。如：

// 开启location.hash的记录
laypage.render({
elem: ‘test1’ ,
count: 500 ,
// 获取起始页
curr: location.hash.replace(’#!fenye=’, ‘’)
// 自定义hash值
,hash: ‘fenye’
}); ` | Number | 1 |
| groups | 连续出现的页码个数 | Number | 5 |
| prev | 自定义“上一页”的内容，支持传入普通文本和HTML | String | 上一页 |
| next | 自定义“下一页”的内容，同上 | String | 下一页 |
| first | 自定义“首页”的内容，同上 | String | 1 |
| last | 自定义“尾页”的内容，同上 | String | 总页数值 |
| layout | 自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域） | Array | [‘prev’, ‘page’, ‘next’] |
| theme | 自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题 | String | - |
| hash | 开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页 | String/Boolean | false |

jump - 切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

laypage.render({
    elem: 'page'
    ,count: 100 //数据总数，从服务端得到
    ,groups:10 // 连续出现的页码个数
    ,layout:['prev', 'page', 'next','limit','count'] // 自定义排版
    ,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框
    ,jump: function(obj, first){
        // obj包含了当前分页的所有参数，比如：
        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if(!first){
            //do something
        }
    }
});

数据表格

​ 模块加载名称：table

快速使用

​ 创建一个table实例最简单的方式是，在页面放置一个元素

，然后通过 table.render() 方法指定该容器。



    
      
      table数据表格

数据接口 user.json

{
    "code": 0,
    "msg": "",
    "count": 50,
    "data": [{
            "id": 10000,
            "username": "user-0",
            "sex": "女",
            "city": "城市-0",
            "sign": "签名-0"          
        },
        {
            "id": 10001,
            "username": "user-1",
            "sex": "男",
            "city": "城市-1",
            "sign": "签名-1"
        },
        {
            "id": 10002,
            "username": "user-2",
            "sex": "女",
            "city": "城市-2",
            "sign": "签名-2"
        },
        {
            "id": 10003,
            "username": "user-3",
            "sex": "女",
            "city": "城市-3",
            "sign": "签名-3"
        },
        {
            "id": 10004,
            "username": "user-4",
            "sex": "男",
            "city": "城市-4",
            "sign": "签名-4"
        }

    ]
}
三种初始化渲染方式
机制 适用场景
方法渲染 用JS方法的配置完成渲染 （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
自动渲染 HTML配置，自动渲染 无需写过多 JS，可专注于 HTML 表头部分
转换静态表格 转化一段已有的表格元素 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可
方法渲染

  1. 将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器

  2. 渲染表格

    layui.use('table', function(){
     var table = layui.table;

     // 执行渲染
     table.render({
        elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
        ,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
     });      
});

    注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作。

自动渲染

​ 在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。

​ 1) 带有 class=“layui-table” 的

标签。
​ 2) 对标签设置属性 lay-data="" 用于配置一些基础参数
​ 3) 在

| 标签中设置属性lay-data=""用于配置表头信息 |


  
    

      ID
      用户名
      性别
转换静态表格

​ 页面已经存在了一段有内容的表格，由原始的table标签组成，只需要赋予它一些动态元素。


    
        

            昵称
            积分
            签名
        
 
    
    
        

            贤心1
            66
            人生就像是一场修行a

执行用于转换表格的JS方法

layui.use('table', function(){
    var table = layui.table;

    // 转换静态表格
    table.init('demo', {
        height: 315 // 设置高度
        // 支持所有基础参数
    }); 

});
基础参数使用的场景
// 场景一：下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: 'user.json'
});

// 场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
 …… 


// 更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); // 转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); // 重载表格
开启分页





// JS实现代码 
layui.use('table', function(){
    var table = layui.table;

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
        ,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
    });   
});
开启头部工具栏









layui.use('table', function(){
    var table = layui.table;

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
        ,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
            ,{title:'操作', toolbar: '#barDemo'} // 绑定表头工具栏
        ]]
        ,toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
    });  

    /**
      * 头工具栏事件
      * 语法：
            table.on('toolbar(demo)', function(obj){

            });
            注：demo表示选择器元素上设置的lay-filter属性值
      */
    table.on('toolbar(demo)', function(obj){
        // obj.config.id 当前选择器的id属性值，即demo
        // 获取当前表格被选中的记录对象，返回数组
        var checkStatus = table.checkStatus(obj.config.id);
        // obj.event 得到当前点击元素的事件名
        switch(obj.event){ 
            case 'getCheckData':
                // 获取被选中的记录的数组
                var data = checkStatus.data;
                // 将数组数据解析成字符串
                layer.alert(JSON.stringify(data));
                break;
            case 'getCheckLength':
                var data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
                break;
            case 'isAll':
                // checkStatus.isAll 判断记录是否被全选
                layer.msg(checkStatus.isAll ? '全选': '未全选');
                break;
                // 自定义头工具栏右侧图标 - 提示
            case 'LAYTABLE_TIPS':
                layer.alert('这是工具栏右侧自定义的一个图标按钮');
                break;
        };
    });

    /**
      * 监听行工具事件
      */
    table.on('tool(demo)', function(obj){
        // 得到当前操作的tr的相关信息
        var data = obj.data;
        if(obj.event === 'del'){
            // 确认框
            layer.confirm('真的删除行么', function(index){
                // 删除指定tr
                obj.del();
                // index 当前弹出层的下标，通过下标关闭弹出层
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            // 输入框
            layer.prompt({
                // 表单元素的类型 0=文本框 1=密码框 2=文本域 
                formType: 0
                ,value: data.username 
            }, function(value, index){
                // 修改指定单元格的值
                // value表示输入的值
                obj.update({
                    username: value
                });
                // 关闭弹出层
                layer.close(index);
            });
        }
    });

});
开启单元格编辑

    
        

            ID
            ID
            用户名
            性别
            城市
            积分
        

    




layui.use('table', function(){
    var table = layui.table;

    // 监听单元格编辑
    table.on('edit(demo)', function(obj){
        var value = obj.value // 得到修改后的值
        ,data = obj.data // 得到所在行所有键值
        ,field = obj.field; // 得到字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
    });

});
数据表格的重载

    搜索ID：
    

        
    

    




 


layui.use('table', function(){
    var table = layui.table;
    var $ = layui.jquery; // 获取jquery对象

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器（推荐id选择器）
        ,url: 'user.json' // 数据接口
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {type: 'checkbox', fixed: 'left'} // 设置复选框
            ,{field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
    });  

    // 给指定元素绑定事件
    $(document).on('click', '#searchBtn', function(data) {
        // 获取搜索框对象
        var demoReload = $('#demoReload');
        table.reload('demo', {
            where: { // 设定异步数据接口的额外参数，任意设
                id: demoReload.val()
            }
            ,page: {
                // 让条件查询从第一页开始查询，不写则从当前页开始查询，此页之前的数据将不纳入条件筛选
                curr: 1 // 重新从第 1 页开始
            }
        }); // 只重载数据
    });
});

你可能感兴趣的:(JavaWeb-LayUI框架的介绍与使用方式（前端框架篇）)

  • 美易官方：盘前道指期货涨0.5%，游戏驿站跌逾15% 美股投资 财经人工智能大数据新浪微博微信微信公众平台百度金融
    在股市开盘前的交易时段，道指期货上涨了0.5%，而游戏驿站（GameStop）的股价却出现了大幅下跌，跌幅超过15%。这一市场动态引发了投资者的广泛关注，也反映了当前股市的复杂性和不确定性。美股股指期货周三盘前走强，交易员为季度末的再平衡做准备。本周因假期而缩短，美国将公布关键通胀数据。道指期货涨0.5%，标普500指数期货涨0.6%，纳指期货涨0.5%。德国DAX指数涨0.4%，英国富时100指
  • 亲亲往这里来 神道仙灵
    图片发自App…哈…哈……上次……失误…失误……此…次……哈…哈…哈……我不会……哪么……大舌头……哪么……呆笨……直…白…了…！…亲们……看见…我口中……喝的…啥了么……呵…呵…呵……看见…我手上……又…拿的……啥了…么……哈…哈…哈……哈我的小宝贝
  • 别人能伤害你，是你允许的。 1125198e6b7d
    不要对别人抱有太大期望，保护自己的最佳方式,就是从不高估自己在别人心中的份量。能伤害你的从来不是别人的无情，而是你心存幻想的坚持。及时止损，不盼望就不会失望。相识很久的关系，明明内心很不舒服，却还要装作若无其事的样子，强撑着去面对。一次又一次为了迎合而迎合，自我qipian，精神内耗。对于那些不能带给你任何积极能量的人，我们真正要做的就是及时止损。伤害你的人从来没想过帮助你成长，真正让你成长的是你
  • 2023-02-16 执剑饮烈酒
    1、开心点，反正谁也别想活着离开这个世界。——朱德庸2、我一直以为爱的反义词是不爱，直到现在我才明白，爱的反义词是遗忘。——《寻梦环游记》3、人生的最高境界是佛为心，道为骨，儒为表，大度看世界。技在手，能在身，思在脑，从容过生活。——南怀瑾4、如果一个民族沦落到，只剩下把升官发财当成最终目标和追求的时候，那么这个民族就危险了，一旦金钱和权利成了唯一的信仰，那将是悲哀的。——鲁迅5、人和人如果不在一
  • 为什么wal会 提升数据库性能 浩澜大大 数据库
    由于对于一个数据库内会存在很多张表，那么当数据库更新表数据时（1）直接写入磁盘实际写入的位置，会根据表的不同对应到不同的磁盘位置，在写入数据的时候，就会不停的寻找磁盘地址，找到地址后再去写入，对于机械硬盘来说，无规律的寻址是非常耗时的，对应SSD来说虽然性能提升很多，但是也会消耗时间；（2）先写入日志，在写入磁盘（WAL）WAL的过程，由于总是按照在文件末尾追加，只要找到文件写入位置，写入修改后，
  • 【Python】一文详细介绍 py格式 文件 高斯小哥 Python基础【高质量合集】python新手入门学习
    【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py
  • 《昼颜》里的日本女人：相遇要万种风情，分手要残忍绝情 迷影咖啡
    作者：迷之菌子神奇菇迷影咖啡：一本正经做烘焙，胡说八道聊电影漫天萤火虫消散之时良宵就将过去，人们也说含苞待放的花蕾总会开了又谢，因紧紧相拥而面红耳赤的躯体，便是我们经历过这热爱的证明。夫妻关系介绍《昼颜》是2014年电视剧《昼颜：工作日下午三点的恋人们》的续集，故事发在电视剧情节结束的三年后，讲述了已经恢复独身的纱和偶然与曾经的出轨对象北野重逢后再次陷入感情漩涡的故事。《昼颜》制作灵感源自利佳子在
  • 迎接2019 唯有杜康1994
    告别2018这一年是机遇与挑战，痛苦与喜悦，失去与收获的一年一月:收获了第一份爱情，开始真正想去了解一个人三月:对工作有了更深入的认识，靠自己的力量完成晋升五月:搬家，住进了自己理想的公寓，一间属于自己的屋子。满地的书六月:外调广州，升经理，有了自己的第一个团队。七月:怀着自我否定，第一次完成了部门任务八月:第一个员工流失，痛哭不已明白无不散之筵席九月:员工陆续离开，经济是一切的根本。十月:陪员工
  • 亲子日记之祝姑姥姥生日快乐（282） 冰心雨露_d504
    2021年7月18日，周日，晴周日上班的不上班，上学的不上学，全家都属于休息状态，洗衣做饭是上午的主要任务，中午休息一会儿，下午比较晚了出去给梦怡买了二年级上册的口算题卡，然后去参加姑姑的生日聚餐，本来姑姑应该是周一生日，因为周一都要上班，就提前到周日过了，说是过生日其实就是想借此机会一家人聚聚，毕竟平常都忙，没有时间聚在一起，梦怡还给姑姥姥做了生日贺卡，虽然长相一般，重在心意。生日快乐
  • 100天30本书读书计划（2018-06-11）DAY 62 一个姜姜
    【书名】当我谈跑步时，我谈些什么【作者】村上春树【读书页数】51--128/187【读书时间】2018年6月11日【精彩句子】01肌肉难长，易消。赘肉易长，难消。P5502肌肉也同有血有肉的动物一般无二，它也愿意过更舒服的日子，不继续给它负荷，它便会心安理得地将记忆出去。想再度输入的话，必须得从头开始，将同样的模式重复一遍。P7703不管怎样，反正得坚持跑步。每天跑步对我来说好比生命线，不能说忙就
  • 植物小记 番茄秧子
    小时候，我养过一院子的花。今年，我重新开始从头开始养一点儿植物。别人说那也只是别人说临到快过年，我逛了一趟花市，买了两棵水仙花。路过另外一个卖水仙的摊位，霸气的卖花小妹瞧了一眼我捧着的那两棵弱小，说了一句：“你那个水仙不行，都不会开花的。”以我的脾气，这当然不能相信啊。结果，带回家好几天没动静。某一天早晨起来，两棵水仙悄不吭声全开了，然后香了屋子好多天。水仙三月，我在花市扛了一盆栀子花，花店老板见
  • 大学播音主持都学什么内容？播音主持专业学什么？ 配音新手圈
    有些喜欢播音主持并且犹豫要不要报考这个大学专业的小伙伴们就会想要了解大学播音主持都学什么内容吧，毕竟如果不够了解就直接选择这个专业真的等选择完进去学习以后才知道这个专业并不是自己想要学习的东西那就来不及了。下面是小编为大家整理出来的一些播音主持专业学习的内容，请往下看吧。大学播音主持专业主要学习的课程有：播音发声、播音创作基础、广播播音主持、电视播音主持、文艺作品演播学概论、新闻学概论、新闻采编、
  • Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法 江上清风山间明月 FlutterandroidiosflutterKeepAlive屏幕常亮wakelock熄屏
    文章目录Flutter应用让屏幕在app运行期间保持常亮的方法方法一：使用系统插件方法二：使用Widgets注意事项Flutter应用让屏幕在app运行期间保持常亮的方法在Flutter开发中，可以使用以下两种方法让屏幕在app运行期间保持常亮：方法一：使用系统插件Flutter社区中已经有很多相关插件可供使用，比如wakelock:https://pub.dev/packages/wakeloc
  • 微信小程序监听用户经纬度变化 某公司摸鱼前端 微信小程序小程序
    一些打卡App需要根据用户的位置来完成打卡那么就需要监听用户位置变化情况：示例：//在某个生命周期函数中，如onLoad中onLoad:function(options){//开始监听位置变化wx.startLocationUpdate({success:function(){console.log('开始更新位置');},fail:function(){console.log('开始更新位置失败
  • 2019-04-08早 梦雅的简动力
    在上瑜伽课前10分钟的调息中，你的眼睛为什么总是想睁开？（焦虑）。你的眉头为什么总是紧锁？（压力）。练习体式时你为什么总是去看别人？（攀比）保持体式时你为什么总是烦躁？（性急）。保持长久而规律的练习，以上这些，终归离你远去。瑜伽，首先，不是帮你得到，而是教你放下。图片发自App时间，一时间无法跳离这个特殊的词汇毅力，坚持，真诚，需要时间来见证真相，现实，伪装，时间自然会揭秘珍惜它又害怕它可它丝毫不
  • 3/31总结 静心第一
    今日总结：1.上午体验课以及反馈2.p1专注力上课3.情绪精品营上课4.燕子营队辅营以及前台值班5.活动室带孩子接待带到访今日反思：1.合理安排体力2.对于准客户记得跟进3.不要放过每一次成交的机会（这个精品营转发有点失败，后期需调整）今日感受：1.为了效果，后期课程一定想方设法布置家庭，给予一个好的支持系统2.上到下午的课程感觉特别特别的累3.晚上在做辅营一个孩子大声叫喊，后来单独出去沟通，其实
  • 极狐GitLab 论坛 2.0 全新上线，可以在论坛上查找与 GitLab 相关的问题了～ 极小狐 gitlab极狐GitLabdevopsGitLabci/cddevsecopsSCM
    安装出现依赖错误？版本升级搞不定？遇到422、500就懵逼了？不知道某个功能是免费or付费？……使用GitLab这种全球顶级的DevOps平台进行软件研发时，总会遇到一些困惑，想跟专业的技术人员快速交流以便获得答案，同时又想把这些问题沉淀下来以帮助他人？有这种赠人玫瑰，手有余香的解决方案吗？答案肯定有：论坛！！！论坛——一个各路大神聚集的地方，一个可以解惑答疑问道的地方。解惑：搜索与自己问题相同或
  • 数据结构奇妙旅程之深入解析快速排序 山间漫步人生路 数据结构排序算法算法
    快速排序（QuickSort）是一种高效的排序算法，它使用了分治法的策略来将一个数组排序。其基本思想是选择一个基准元素，通过一趟排序将待排序的数据分割成独立的两部分，其中一部分的所有数据都比基准元素小，另一部分的所有数据都比基准元素大，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。工作原理选择基准：从待排序的序列中选一个元素作为基准（pivo
  • 被隔离的日子（五）@三七会写作营 三七会萍海临风
    从隔离的初期，我们三人都不适应，彼此说话都还火药味十足。后随着时间的推移，到现在，我们仨人能够心平气和，幽默地对待彼此。看来，时间可真是个好东西，不仅能见证一个人的心性，还能看清自己的需求、他人的本质。今天晚上，孩子跑到厨房，告诉我她给人捐款了。我纳闷，不是给河南捐过款了么。当时，我还落后于她捐的呢。这次又捐给谁？看到我一脸狐疑，孩子说，还记得初四给她补课的那个男老师么？当让记得，当时，就因为是男
  • 教育微创新的意蕴 知北老师
    我是1992年参加工作的，一毕业就被分配到一所全县最偏僻落后的农村学校——付窝中学，12年后被调往一所已经连续十年全县倒数第一，也是很偏僻落后的农村学校——北宋镇第三中学。三年后到了北宋镇第一中学工作，这所学校教学质量也是连续几年落后了。2014年我到了北京市育英学校，这所学校是京城名校。2016年7月，我被育英学校派往原密云区第七中学工作，这是一所城乡接合部薄弱学校。学校现名为北京市育英学校密云
  • 我喝醉了，但是与你无关 Z先生的日记本
    2019年04月10号晚上我和一个朋友喝酒了，彻彻底底的喝醉了，喝到短片，事后我问L，我说我喝醉了之后，都发生了什么，L没有告诉我详情，但是跟我说了大致，他说我跟他一直聊天，说自己小的时候的事，说自己爸妈的事，说自己现在过得很苦可能，确实是喝醉了酒，才会毫无防备的跟其他人说这些吧。L还说感觉我过得很苦，很心疼。醉了酒之后还哭了，想想还真是丢人一年前，在宿舍也有一瓶红酒，那是舍友出去拉赞助时候，友商
  • python抓包与解包_Python—网络抓包与解包（pcap、dpkt） weixin_39691055 python抓包与解包
    pcap安装[root@localhost~]#pipinstallpypcap抓包与解包#-*-coding:utf-8-*-importpcap,dpktimportre,threading,requests__black_ip=['103.224.249.123','203.66.1.212']#抓包：param1eth_name网卡名，如：eth0,eth3。param2p_type日志捕
  • android 自定义曲线图,Android自定义View——贝赛尔曲线 weixin_39767513 android自定义曲线图
    个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化
  • Flink中的SQL Client和SQL Gateway BigDataMLApplication flinkflinksqlgateway
    Flink中的SQLClient和SQLGateway对比目录定义基本原理适用场景主要区别常用运维命令示例官方链接正文1.定义SQLClient：FlinkSQLClient是一种用于提交和执行FlinkSQL语句的命令行界面或图形界面工具。SQLGateway：FlinkSQLGateway是一个独立的服务，它允许客户端通过RESTfulAPI将SQL查询提交到Flink集群。2.基本原理SQL
  • 2022年河南省高等职业教育技能大赛云计算赛项竞赛赛卷（样卷） 忘川_ydy 云计算云计算openstackkubernetesdockerpythonk8sansible
    #需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！第一部分：私有云任务1私有云服务搭建(10分)使用提供的用户名密码，登录竞赛用的云计算平台，按要求自行使用镜像创建两台云主机，创建完云主机后确保网络正常通信，然后按要求配置服务器。根据提供安装脚本框架，补充脚本完成OpenStack平台的安装搭
  • 浪潮 M5系列服务器IPMI无法监控存储RAID卡问题. Songxwn 硬件服务器服务器运维
    简介浪潮的M5代服务器，可能有WebBMC无法查看存储RAID/SAS卡状态的情况，可以通过以下方式修改。修改完成后重启BMC即可生效。ESXiIPMITools使用：https://songxwn.com/ESXi8_IPMI/（Linux也可以直接使用）Linux/ESXiIPMITool下载：https://songxwn.com/file/ipmitoolWindows下载：https:/
  • 打印出1-100的奇数 。（C语言） 王多鱼001 C语言c语言算法数据结构
    代码：#includeintmain(){for(inti=1;i<101;i++){if(i%2==1){printf("%d,",i);}}return0;}
  • 【OpenModelica】4命令行大全 Wumbuk python开发语言modelica
    命令行大全文章目录命令行大全一、SummaryofCommandsfortheInteractiveSessionHandler二、Runningthecompilerfromcommandline一、SummaryofCommandsfortheInteractiveSessionHandler以下是交互式会话处理器中当前可用命令的完整列表。•simulate(modelname)：翻译一个名为
  • 通俗易懂：MySQL中如何设置只读实例并确保数据一致性？ 大龄下岗程序员 mysqljavamysqlspring
    在MySQL中设置只读实例主要应用于构建高可用性和扩展性的数据库环境，通常是为了分担读取负载或者用于备份和灾难恢复。以下是创建MySQL只读实例并确保数据一致性的基本步骤：1.创建并配置只读实例-主从复制设置-首先，你需要有一个主数据库实例（Master）负责接收所有的写操作。-创建一个或多个从数据库实例（Slave），并将它们配置为主数据库的复制品。这通常通过设置主从复制（Replication
  • 拼多多纸巾推荐：品质与性价比的完美结合 氧惠帮朋友一起省
    拼多多纸巾推荐拼多多纸巾返现怎么做在我们的日常生活中，纸巾已经成为不可或缺的用品。无论是在家庭、办公室还是旅途中，纸巾都是我们随时随地需要的物品。随着电商平台的兴起，越来越多的人选择在网上购买纸巾。其中，拼多多作为国内知名的电商平台之一，以其独特的社交电商模式和实惠的价格吸引了大量用户。今天，我们就来探讨如何在拼多多上选择品质优良、性价比高的纸巾，以及如何通过一些小技巧来获取更多的优惠。一、品质与
  • TOMCAT在POST方法提交参数丢失问题 357029540 javatomcatjsp
    摘自http://my.oschina.net/luckyi/blog/213209 昨天在解决一个BUG时发现一个奇怪的问题，一个AJAX提交数据在之前都是木有问题的，突然提交出错影响其他处理流程。 检查时发现页面处理数据较多，起初以为是提交顺序不正确修改后发现不是由此问题引起。于是删除掉一部分数据进行提交，较少数据能够提交成功。 恢复较多数据后跟踪提交FORM DATA ，发现数
  • 在MyEclipse中增加JSP模板 删除-2008-08-18 ljy325 jspxmlMyEclipse
    在D:\Program Files\MyEclipse 6.0\myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\jsp  目录下找到Jsp.vtl，复制一份，重命名为jsp2.vtl,然后把里面的内容修改为自己想要的格式，保存。 然后在 D:\Progr
  • JavaScript常用验证脚本总结 eksliang JavaScriptjavaScript表单验证
         转载请出自出处：http://eksliang.iteye.com/blog/2098985        下面这些验证脚本，是我在这几年开发中的总结，今天把他放出来，也算是一种分享吧，现在在我的项目中也在用！包括日期验证、比较，非空验证、身份证验证、数值验证、Email验证、电话验证等等...! &nb
  • 微软BI（4） 18289753290 微软BI SSIS
    1） Q:查看ssis里面某个控件输出的结果：  A MessageBox.Show(Dts.Variables["v_lastTimestamp"].Value.ToString()); 这是我们在包里面定义的变量 2):在关联目的端表的时候如果是一对多的关系，一定要选择唯一的那个键作为关联字段。 3) Q：ssis里面如果将多个数据源的数据插入目的端一
  • 定时对大数据量的表进行分表对数据备份 酷的飞上天空 大数据量
    工作中遇到数据库中一个表的数据量比较大，属于日志表。正常情况下是不会有查询操作的，但如果不进行分表数据太多，执行一条简单sql语句要等好几分钟。。   分表工具：linux的shell + mysql自身提供的管理命令 原理：使用一个和原表数据结构一样的表，替换原表。   linux shell内容如下： =======================开始 
  • 本质的描述与因材施教 永夜-极光 感想随笔
             不管碰到什么事,我都下意识的想去探索本质,找寻一个最形象的描述方式。        我坚信,世界上对一件事物的描述和解释,肯定有一种最形象,最贴近本质,最容易让人理解        &
  • 很迷茫。。。 随便小屋 随笔
    小弟我今年研一，也是从事的咱们现在最流行的专业（计算机）。本科三流学校，为了能有个更好的跳板，进入了考研大军，非常有幸能进入研究生的行业（具体学校就不说了，怕把学校的名誉给损了）。   先说一下自身的条件，本科专业软件工程。主要学习就是软件开发，几乎和计算机没有什么区别。因为学校本身三流，也就是让老师带着学生学点东西，然后让学生毕业就行了。对专业性的东西了解的非常浅。就那学的语言来说
  • 23种设计模式的意图和适用范围 aijuans 设计模式
    Factory Method 意图 定义一个用于创建对象的接口，让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。 　　适用性 当一个类不知道它所必须创建的对象的类的时候。 　　当一个类希望由它的子类来指定它所创建的对象的时候。 　　当类将创建对象的职责委托给多个帮助子类中的某一个，并且你希望将哪一个帮助子类是代理者这一信息局部化的时候。 Abstr
  • Java中的synchronized和volatile aoyouzi javavolatilesynchronized
    说到Java的线程同步问题肯定要说到两个关键字synchronized和volatile。说到这两个关键字，又要说道JVM的内存模型。JVM里内存分为main memory和working memory。 Main memory是所有线程共享的，working memory则是线程的工作内存，它保存有部分main memory变量的拷贝，对这些变量的更新直接发生在working memo
  • js数组的操作和this关键字 百合不是茶 js数组操作this关键字
    js数组的操作;   一:数组的创建: 1、数组的创建 var array = new Array();　//创建一个数组 var array = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]
  • 别人的阿里面试感悟 bijian1013 面试分享工作感悟阿里面试
    原文如下：http://greemranqq.iteye.com/blog/2007170         一直做企业系统，虽然也自己一直学习技术，但是感觉还是有所欠缺，准备花几个月的时间，把互联网的东西，以及一些基础更加的深入透析，结果这次比较意外，有点突然，下面分享一下感受吧！    &nb
  • 淘宝的测试框架Itest Bill_chen springmaven框架单元测试JUnit
    Itest测试框架是TaoBao测试部门开发的一套单元测试框架，以Junit4为核心， 集合DbUnit、Unitils等主流测试框架，应该算是比较好用的了。 近期项目中用了下，有关itest的具体使用如下： 1.在Maven中引入itest框架： <dependency>   <groupId>com.taobao.test</groupId&g
  • 【Java多线程二】多路条件解决生产者消费者问题 bit1129 java多线程
    package com.tom; import java.util.LinkedList; import java.util.Queue; import java.util.concurrent.ThreadLocalRandom; import java.util.concurrent.locks.Condition; import java.util.concurrent.loc
  • 汉字转拼音pinyin4j 白糖_ pinyin4j
    以前在项目中遇到汉字转拼音的情况，于是在网上找到了pinyin4j这个工具包，非常有用，别的不说了，直接下代码：   import java.util.HashSet; import java.util.Set; import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin
  • org.hibernate.TransactionException: JDBC begin failed解决方案 bozch ssh数据库异常DBCP
    org.hibernate.TransactionException: JDBC begin failed:     at org.hibernate.transaction.JDBCTransaction.begin(JDBCTransaction.java:68)    at org.hibernate.impl.SessionImp
  • java-并查集（Disjoint-set）-将多个集合合并成没有交集的集合 bylijinnan java
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap; import java.util.HashSet; import java.util.Iterator; import java.util.List; import java.util.Map; import java.ut
  • Java PrintWriter打印乱码 chenbowen00 java
    一个小程序读写文件，发现PrintWriter输出后文件存在乱码，解决办法主要统一输入输出流编码格式。 读文件： BufferedReader 从字符输入流中读取文本，缓冲各个字符，从而提供字符、数组和行的高效读取。 可以指定缓冲区的大小，或者可使用默认的大小。大多数情况下，默认值就足够大了。 通常，Reader 所作的每个读取请求都会导致对基础字符或字节流进行相应的读取请求。因
  • [天气与气候]极端气候环境 comsci 环境
          如果空间环境出现异变...外星文明并未出现,而只是用某种气象武器对地球的气候系统进行攻击,并挑唆地球国家间的战争,经过一段时间的准备...最大限度的削弱地球文明的整体力量,然后再进行入侵......      那么地球上的国家应该做什么样的防备工作呢?  &n
  • oracle order by与union一起使用的用法 daizj UNIONoracleorder by
    当使用union操作时，排序语句必须放在最后面才正确，如下： 只能在union的最后一个子查询中使用order by，而这个order by是针对整个unioning后的结果集的。So： 如果unoin的几个子查询列名不同，如 Sql代码  select supplier_id, supplier_name  from suppliers  UNI
  • zeus持久层读写分离单元测试 deng520159 单元测试
    本文是zeus读写分离单元测试,距离分库分表,只有一步了.上代码: 1.ZeusMasterSlaveTest.java package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Assert; import org.j
  • Yii 截取字符串(UTF-8) 使用组件 dcj3sjt126com yii
    1.将Helper.php放进protected\components文件夹下。 2.调用方法：   Helper::truncate_utf8_string($content,20,false);   //不显示省略号  Helper::truncate_utf8_string($content,20);  //显示省略号  &n
  • 安装memcache及php扩展 dcj3sjt126com PHP
    安装memcache    tar zxvf memcache-2.2.5.tgz     cd memcache-2.2.5/     /usr/local/php/bin/phpize (?)    ./configure --with-php-confi
  • JsonObject 处理日期 feifeilinlin521 javajsonJsonOjbectJsonArrayJSONException
        写这边文章的初衷就是遇到了json在转换日期格式出现了异常 net.sf.json.JSONException: java.lang.reflect.InvocationTargetException  原因是当你用Map接收数据库返回了java.sql.Date 日期的数据进行json转换出的问题话不多说  直接上代码  &n
  • Ehcache（06）——监听器 234390216 监听器listenerehcache
    监听器          Ehcache中监听器有两种，监听CacheManager的CacheManagerEventListener和监听Cache的CacheEventListener。在Ehcache中，Listener是通过对应的监听器工厂来生产和发生作用的。下面我们将来介绍一下这两种类型的监听器。  
  • activiti 自带设计器中chrome 34版本不能打开bug的解决 jackyrong Activiti
      在acitivti modeler中，如果是chrome 34，则不能打开该设计器，其他浏览器可以， 经证实为bug，参考 http://forums.activiti.org/content/activiti-modeler-doesnt-work-chrome-v34 修改为，找到 oryx.debug.js 在最头部增加 if (!Document.
  • 微信收货地址共享接口-终极解决 laotu5i0 微信开发
       最近要接入微信的收货地址共享接口，总是不成功，折腾了好几天，实在没办法网上搜到的帖子也是骂声一片。我把我碰到并解决问题的过程分享出来，希望能给微信的接口文档起到一个辅助作用，让后面进来的开发者能快速的接入，而不需要像我们一样苦逼的浪费好几天，甚至一周的青春。各种羞辱、谩骂的话就不说了，本人还算文明。    如果你能搜到本贴，说明你已经碰到了各种 ed
  • 关于人才 netkiller.github.com 工作面试招聘netkiller人才
    关于人才 每个月我都会接到许多猎头的电话，有些猎头比较专业，但绝大多数在我看来与猎头二字还是有很大差距的。 与猎头接触多了，自然也了解了他们的工作，包括操作手法，总体上国内的猎头行业还处在初级阶段。 总结就是“盲目推荐，以量取胜”。 目前现状 许多从事人力资源工作的人，根本不懂得怎么找人才。处在人才找不到企业，企业找不到人才的尴尬处境。 企业招聘，通常是需要用人的部门提出招聘条件，由人
  • 搭建 CentOS 6 服务器 - 目录 rensanning centos
    (1) 安装CentOS ISO（desktop/minimal）、Cloud（AWS/阿里云）、Virtualization（VMWare、VirtualBox） 详细内容 (2) Linux常用命令 cd、ls、rm、chmod...... 详细内容 (3) 初始环境设置 用户管理、网络设置、安全设置...... 详细内容 (4) 常驻服务Daemon
  • 【求助】mongoDB无法更新主键 toknowme mongodb
      Query query = new Query();          query.addCriteria(new Criteria("_id").is(o.getId()));                &n
  • jquery 页面滚动到底部自动加载插件集合 xp9802 jquery
    很多社交网站都使用无限滚动的翻页技术来提高用户体验，当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件： 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。 2. jQuery Screw S
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他