第二天·引入boostrap-table插件

(一)准备:下载以下文件
        1、bootstrap-table.css
        2、bootstrap-table.js
        3、bootstrap-table-zh-CN.js

(二)学习boostrap-table的API
1、表格选项

 

属性 类型 默认值 详情
data-toggle String table 无需编写JavaScript即可激活引导表。
data-height Number undefined 表的高度,启用表的固定标题。
请注意,如果页面上有多个表并且同时设置了height选项,则需要将该id属性添加到每个表中,否则,窗口调整大小将无法正常工作。
data-classes String table table-bordered table-hover 表的类名。'table', 'table-bordered', 'table-hover', 'table-striped', 'table-dark', 'table-sm' 和 'table-borderless' 可被使用。默认情况下,表格是有界的。


2、列表选项

属性 类型 默认值 详情
data-field String undefined 列字段名称
data-title String  undefined 列标题文本
data-title-tooltip String undefined 列标题工具提示文本。此选项还支持标题HTML属性

3、列表选项

事件 详情
onAll

触发所有事件时触发,参数包含:

name: 事件名称,
args: 事件数据。

onClickRow 用户点击一行时触发,参数包含:
row: 与单击的行对应的记录。
$element: tr元素。
field:与单击的单元格对应的字段名称。
onDblClickRow 用户双击一行时触发,参数包含:
row: 与单击的行对应的记录。
$element: tr元素。
field:与单击的单元格对应的字段名称。

        更多内容参考:https://www.bootstrap-table.com.cn/doc/api/events/

(三)总结
        今天的工作是下载并学习boostrap-table插件。接下来的工作就是在项目中引入并使用boostrap-table插件。

你可能感兴趣的:(考试管理系统)