ABP进阶教程6 - 布局配置
解读参数
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, //固定高度,内容过多时显示滚动条
预览效果
布局调整效果如下.
ABP进阶教程6 - 布局配置的更多相关文章
- ABP进阶教程0 - 目录
ABP进阶教程 本教程主要讲解如何基于ABP实现条件查询/分页/排序/导出/打印等功能. 源码已分享: GitHub Gitee ABP进阶教程0 - 目录 ABP进阶教程1 - 条件查询 A ...
- ABP进阶教程5 - 多语言配置
点这里进入ABP进阶教程目录 更新脚本 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Cours ...
- ABP进阶教程10 - PDF导出中文乱码
点这里进入ABP进阶教程目录 问题描述 功能按钮 - 导出PDF,中文信息导出为乱码. 解决方案 导出PDF是通过pdfmake.js实现的. 检查发现是pdfmake引用的vfs_fonts.js字 ...
- ABP进阶教程7 - 功能按钮
点这里进入ABP进阶教程目录 下载插件 打开Datatables官网(https://datatables.net/download/) 勾选Extensions/Buttons,下载插件,复制到JD ...
- ABP进阶教程11 - 小结
点这里进入ABP进阶教程目录 效果预览 至此,ABP进阶教程的查询/分页/排序/导出/打印示例已完成,效果如下 登录 首页 办公室信息 院系信息 课程信息 教职员信息 学生信息 新增 修改 删除 查询 ...
- ABP进阶教程9 - CSV导出中文乱码
点这里进入ABP进阶教程目录 问题描述 功能按钮 - 导出CSV,中文信息导出为乱码. 解决方案 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\View ...
- ABP进阶教程3 - 优化编辑
点这里进入ABP进阶教程目录 我们尝试在新增/编辑界面增加一个下拉框用来代替输入框编辑Status 添加实体 打开领域层(即JD.CRS.Core)的Entitys目录 //用以存放实体对象添加一个类 ...
- ABP进阶教程8 - 自定义按钮
点这里进入ABP进阶教程目录 在功能按钮区增加一个自定义按钮 - Add(创建课程) 添加按钮 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views ...
- ABP进阶教程4 - 分页排序
点这里进入ABP进阶教程目录 下载插件 打开Datatables官网(https://datatables.net/download/) 下载插件,复制到JD.CRS.Web.Mvc\wwwroot\ ...
随机推荐
- PHP制作的掷色子点数抽奖游戏实例
PHP制作的掷色子点数抽奖游戏实例,通过掷色子点数来达到抽奖的效果,为抽奖活动增添一些趣味性. 我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信息,#prize则是用来 ...
- gor实现线上HTTP流量复制压测引流
一.使用背景 gor 是一款go语言实现的简单的http流量复制工具,它的主要目的是使你的生产环境HTTP真实流量在测试环境和预发布环境重现.只需要在 代理例如nginx入口服务器上执行一个进程,就可 ...
- 微服务与Spring Cloud基本概念、Spring Cloud版本命名方式与版本选择
微服务是什么?Spring Cloud是什么?Spring Cloud版本命名方式?Spring Cloud版本选择? 一.微服务是什么 微服务是一种架构风格,是一种将单体应用开发为一组小型服务的方法 ...
- 北航软件学院Java历届期末考题整理
文章目录 abstract static Thread finally package Exception I/O 子类和父类 关键字 标识符 垃圾收集 数据类型 环境配置 网路编程 initial ...
- 数据结构笔记2(c++)_跨函数使用内存的问题
预备知识 1.所有的指针变量只占4个子节 用第一个字节的地址表示整个变量的地址 //1.cpp 所有的指针变量只占4个子节 用第一个字节的地址表示整个变量的地址 # include <stdi ...
- Linux—磁盘管理
https://www.cnblogs.com/new-journey/p/10076387.html https://www.cnblogs.com/jiangxiaoxian/p/9610903. ...
- Linux部署NFS服务共享文件
NFS(网络文件系统)用于linux共享文件 第1步:配置所需要的环境 使用两台Linux主机 主机名称 操作系统 IP地址 NFS Centos7 192.168.218.139 NFSa Cent ...
- GetPrivateProfileInt 使用方法
GetPrivateProfileInt =>从ini文件取得数值 <参数> lpApplicationName String,指定在其中查找条目的小节.注意这个字串是不区分大小写的 ...
- CentOS安装docker-compose
一.compose简介 compose是一个定义和运行多容器的docker应用的工具.compose 通过yaml文件配置应用服务,然后仅需一个命令就可以创建和运行所有配置中的服务. 二.compos ...
- 关于python内open函数encoding编码问题
自己学python的open函数时,发现在pycharm里新建一个file_name.txt文本文件,输入中文保存.再用open(file_name,'r+')打开,再去读写时出现了一些问题.再三控制 ...