ABP进阶教程5 - 布局配置

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

解读参数

• 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, //固定高度，内容过多时显示滚动条

预览效果

布局调整效果如下．