bootstrap-table_Ajax加载数据到表格(1)

最新推荐文章于 2022-03-04 09:31:32 发布

Nobita Chen

最新推荐文章于 2022-03-04 09:31:32 发布

阅读量1.6k

点赞数

分类专栏：前端开发笔记

本文链接：https://blog.csdn.net/chenxiong103/article/details/104333981

版权

笔记同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

前端开发

27 篇文章 1 订阅

订阅专栏

columns数组中的title对应列名称, data对应记录集

data.json如下:

{
	"columns": [{
		"field": "field0",
		"title": "Cell0",
		"sortable": true
	}, {
		"field": "field1",
		"title": "Cell1",
		"sortable": true
	}, {
		"field": "field2",
		"title": "Cell2",
		"sortable": true
	}, {
		"field": "field3",
		"title": "Cell3",
		"sortable": true
	}, {
		"field": "field4",
		"title": "Cell4",
		"sortable": true
	}],

	"data": [{
		"field0": "Rows-0-0",
		"field1": "Rows-0-1",
		"field2": "Rows-0-2",
		"field3": "Rows-0-3",
		"field4": "Rows-0-4"
	}, {
		"field0": "Rows-1-0",
		"field1": "Rows-1-1",
		"field2": "Rows-1-2",
		"field3": "Rows-1-3",
		"field4": "Rows-1-4"
	}]
}

demo

<!DOCTYPE html>
<html>
<head>
    <title>Fixed Columns</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <link rel="stylesheet" href="css/bootstrap-table-fixed-columns.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/bootstrap-table-fixed-columns.js"></script>
</head>
<body>
    <div class="container">
        <h1>Fixed Columns</h1>
        <div class="toolbar form-inline">
            <span>Fixed Number: </span>
            <input class="form-control" id="fixedNumber" type="number" value="1" min="1" max="5">
        </div>
        <table id="table" data-height="400" data-show-columns="true"></table>
    </div>
<script>
    var $table = $('#table');

    $(function () {
        buildTable($table, 20, 20);

        $('#fixedNumber').change(function () {
            buildTable($table, 20, 20);
        });
    });

    function buildTable($el, cells, rows) {
        var i, j, row,
                columns = [],
                data = [];

        $.ajax({
           type: "get",
           async: false,
           url: "data.json",
           dataType: "json",
           success: function(json){
                columns = json.columns;
                data = json.data;
           }
        })

        // console.dir(columns);
        // console.dir(data);

        $el.bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: data,
            search: true,
            toolbar: '.toolbar',
            fixedColumns: true,
            fixedNumber: +$('#fixedNumber').val()
        });
    }
</script>
</body>
</html>

Nobita Chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table_Ajax加载数据到表格(1)

columns数组中的title对应列名称, data对应记录集data.json如下:{ "columns": [{ "field": "field0", "title": "Cell0", "sortable": true }, { "field": "field1", "title": "Cell1", "sortable": true }, { "...
复制链接

扫一扫