Layui 表格

Layui 分页是由 laypage 实现的,所以既需要分页 laypage 还需要数据表格相关的内容。

数据表格设置

table.render({
page: true
...
})

这样就可以进行分页了,但是如果想要修改分页的样式,可以按下面的方式进行修改:

table.render({
page: {
    layout: ['limit','count','prev','page','next','skip'] // 分页布局
    ,groups: 1 // 只显示1个连续页码
    ,first: false // 不显示首页
    ,last: false // 不显示尾页
    ,theme: '#c00' // 可以传入颜色或者任意普通字符
}
})

其中 layout 中支持数据有:

  1. count 总条目输区域
  2. prev 上一页区域
  3. page 分页区域
  4. next 下一页区域
  5. limit 条目选项区域
  6. refresh 页面刷新区域
  7. skip 快捷跳页区域

~实现复选框~

在后来的版本,已经提供了复选框功能了。

实现

首先要在 templet 加上行号数据

<script type="text/html" id="test_id">
<input type="checkbox" title="testbox" id="id{{d.LAY_TABLE_INDEX}}">
</script>

然后在 table 的表头中增加对应的内容

table.render({
cols: [[ //表头
    field: 'test'
    ,title: 'test'
    ,templet: '#test_id'
]]
});

然后对数据进行赋值

var data = res.data;
for(var item in data){
$('#testbox' + data[item].LAY_TABLE_INDEX).attr('checked', 'checked');
}
form.render();

这主要是因为 table 中默认有一个数值,叫 LAY_TABLE_INDEX 是用来做为返回的组数据的行号,这里使用这个参数对每一行进行操作,就可以了。

Author
Tags
总结(3) Emacs(2) org mode(4) 年度清单(2) 读书清单(2) 电影清单(2) 电视清单(2) Python(3) 学习计划(1) 子弹笔记(1) 手帐体系(1) 时间管理(1) 时间使用效率(1) 形意拳(1) 知识管理(1) 简历(1) 技能水平(1) 生活(1) 减法生活(1) 阅读(1) 阅读分组(1) org(1) docx(1) markdown(2) cmder(1) 图床(1) jsdelivr(1) github(1) 安卓系统(1) 手动更新手机系统(1) post link(1) post path(1) hexo(2) hugo(2) GitHub Pages(1) travis(1) 自动部署博客(1) presentation(1) gcc(1) g++(1) 默认表格(1) 复杂表格(1) multimd table(1) google adsense(1) evil(1) surround(1) librime(2) emacs-rime(1) liberime(1) dot(1) graphviz(1) use-sub-superscripts(1) ditaa(1) Evil Multiple cursors(1) turn evil mode off(1) modifier keys(1) keymap(1) super(1) hyper(1) install Emacs(1) Mac OS(1) keybinds(1) clocktable(1) coding system(1) image library(1) keybind(1) spacemacs(1) org babel(1) homebrew(1) dd(1) diskutil(1) tmux(1) xcode(1) xcrun(1) node-gyp(1) tar(1) tree(1) pacman(1) plantuml(1) find(1) grep(2) du(1) apt-get(1) apt(1) regex(1) wildcard(1) zsh(1) gdb(1) lsof(1) netstat(1) rebase(2) workflow(1) 工作流(1) .gitignore(1) postbuffer(1) hung up(1) merge(1) cache(1) reset(1) Git(1) command(1) submodule(1) GitHub Pull Request(1) pr(1) Matplotlib(1) beautifusoup(1) 下载小说(1) SOLID(1) Leetcode(2) 透视表(1) read_excel()(1) pandas(1) conda(1) django(1) markdown-deux(1) mysql(1) oracle(1) 模糊查询(1) logging level(1) reflex(1) Field(1) Maven(1) Selenium(1) 下拉框(1) select into(1) insert into select(1) CAST(1) CONVERT(1) timestamp(1) concat(1) concat_ws(1) group_concat(1) union(1) grant privileges(1) 重置 root 密码(1) 报错 10060(1) 清理连接数(1) create user(1) set password(1) exists(1) in(1) markdown-it(1) emoji(1) tasks(1) valine(1) Code 504(1) Hugo(1) theme(1) substring(1) indexOf(1) RegExp(1) 定位节点(1) 正则匹配(1) async(1) 异步请求(1) css(2) layui(1) 滚动条(1) JavaScript(1)