欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ABP进阶教程6 - 布局配置

程序员文章站 2022-05-29 09:29:21
点这里进入ABP进阶教程目录 解读参数 l - length changing input control (左上,每页显示记录数) f - filtering input (右上,过滤条件) t - The table (*,数据表格) r - processing display elemen ......

点这里进入abp进阶教程目录 

解读参数

  • l - length changing input control (左上,每页显示记录数)

  • f - filtering input (右上,过滤条件)

  • t - the table (*,数据表格)

  • r - processing display element (*,过场动画) 

  • i - table information summary (左下,表格信息)

  • p - pagination control (右下,分页)

  • ABP进阶教程6 - 布局配置

布局配置

打开展示层(即jd.crs.web.mvc)的\wwwroot\view-resources\views\course\index.js //用以存放course查询相关脚本

配置插件参数.

左上,每页显示记录数

alengthmenu

设置每页显示记录数的下拉框,第一项为默认值.

alengthmenu: [[10, 25, 50, -1], [10, 25, 50, "全部"]], //每页显示记录数

左下,表格信息

sinfo

设置表格信息显示内容及格式

注: 格式为"_大写英文_"的是内置参数.

例如: 

_page_ //当前页数

_pages_ //总页数

"sinfo": "显示第 _start_ 至 _end_ 项记录,共 _total_ 项", //当有数据时显示当前记录范围
"sinfo": "第 _page_ 页/共 _pages_ 页", //当有数据时显示当前页
"sinfoempty": "显示第 0 至 0 项记录 / 共 0 项", //当无数据时显示
"sinfofiltered": "(从 _max_ 条记录过滤)", //过滤时显示

右下,分页

pagingtype

设置分布类型,5种可选.

pagingtype: "full_numbers", //分页类型
//可选参数
numbers // 只显示数字 
simple // 只显示上页/下页 
simple_numbers // 显示上页/下页/数字
full // 显示首页/末页/上页/下页
full_numbers // 显示首页/末页/上页/下页/数字

布局参数

dom

排列布局六大元素(lfrtip),顺序可任意调换.

dom: 'lfrtip', //简单布局
dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>", //定制布局 

滚动设置

lfscrolly
默认设置高度按内容自动调整.
可手动修改设置为固定高度.
scrolly: 470, //固定高度,内容过多时显示滚动条

预览效果

布局调整效果如下.

ABP进阶教程6 - 布局配置