ABP进阶教程6 - 布局配置
程序员文章站
2022-05-29 09:29:21
点这里进入ABP进阶教程目录 解读参数 l - length changing input control (左上,每页显示记录数) f - filtering input (右上,过滤条件) t - The table (*,数据表格) r - processing display elemen ......
解读参数
-
l
- length changing input control (左上,每页显示记录数) -
f
- filtering input (右上,过滤条件) -
t
- the table (*,数据表格) -
r
- processing display element (*,过场动画) -
i
- table information summary (左下,表格信息) -
p
- pagination control (右下,分页) -
布局配置
打开展示层(即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, //固定高度,内容过多时显示滚动条
预览效果
布局调整效果如下.
推荐阅读