Bootstrap-table基础篇（基于js构建表格）

Bootstrap
placeholder image
admin 发布于：2020-04-09 21:45:24
阅读：loading

bootstrap类的组件基本上都分为使用原生html渲染与JS渲染的方式，本篇文章将使用最简单的js代码实现一个基于bootstrap-table的运行效果案例，包含的功能点为：表格排序、表格工具栏、自定义图标、单选、点击行选中表格、点击某列不触发选中行、工具栏工具图标显示等，采用url的json请求实现仍然简单，具体参考如下。

运行结果

JS渲染.gif

参考代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>From Js</title>

<link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />

<link rel="stylesheet" href="../../bootstrap.min.css" />

<link rel="stylesheet" href="../dist/bootstrap-table.css" />

<script type="text/javascript" src="../../jquery/jquery.min.js"></script>

<script type="text/javascript" src="../../popper.min.js"></script>

<script type="text/javascript" src="../../bootstrap.min.js"></script>

<script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>

</head>

<body>

<div id="array-toolbar">数组对象数据渲染</div>

<table id="array-table"></table>

<div id="toolbar">    <button class="btn btn-primary"><i class="fa fa-plus fa-1"></i>&nbsp;新增</button>    <button class="btn btn-info"><i class="fa fa-edit fa-1"></i>&nbsp;修改</button>    <button class="btn btn-danger"><i class="fa fa-times fa-1"></i>&nbsp;删除</button>

</div>

<table id="data-table"></table>

<script type="text/javascript">

$("#array-table").bootstrapTable({    showColumns: true,    showRefresh: true,//示例中缺少该属性对应的图标,    icons: {        refresh: "fa-refresh",        toggleOff: 'fa-toggle-off',        toggleOn: 'fa-toggle-on',        columns: 'fa-th-list',        fullscreen: 'fa-arrows-alt'    },    showToggle: true,    showFullscreen: true,    clickToSelect: true,    toolbar: "#array-toolbar",    data: [        {"a":"aaa1" , "b" : "bbb1" , "c" : "ccc1" , "d" : "ddd1"},        {"a":"aaa2" , "b" : "bbb2" , "c" : "ccc2" , "d" : "ddd2"},        {"a":"aaa3" , "b" : "bbb3" , "c" : "ccc3" , "d" : "ddd3"}    ],    columns: [        {radio: true},        {field: "a" , title: "A"},        {field: "b" , title: "B"},        {field: "c" , title: "C"},        {field: "d" , title: "D"}    ]});$("#data-table").bootstrapTable({    showColumns: true,    showRefresh: true,//示例中缺少该属性对应的图标,    icons: {        refresh: "fa-refresh",        toggleOff: 'fa-toggle-off',        toggleOn: 'fa-toggle-on',        columns: 'fa-th-list',        fullscreen: 'fa-arrows-alt'    },    showToggle: true,    showFullscreen: true,    clickToSelect: true,    toolbar: "#toolbar",    url: "list.json",    columns: [        {radio: true},        {field: "force" , title: "势力" , align: "center", sortable: true},        {field: "magatama" , title: "勾玉" , align: "center", sortable: true},        {field: "name" , title: "姓名" , sortable: true},        {field: "sex" , title: "性别" , align: "center" , sortable: true},        {field: "designation" , title: "称号"},        {field: "description" , title: "称号描述"}    ]

});

</script>

</body>

</html>


上一篇：Bootstrap实践之table应用
下一篇：Bootstrap-table基础篇（分页实现）

 点赞

 发表评论
当前回复：作者

 评论列表

留言区