当前位置：文江博客话题详情

Bootstrap bootstrap-table

bootstrap支不支持动态列？

发布于 2022-09-04 01:06:41 字数 52 浏览 10 评论 0

显示表格的列数希望能够根据传入的数据的不同而不同。
bootstrap支持动态列吗？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

无人问我粥可暖 2022-09-11 01:06:41

可以。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="demo" ng-controller="demo">

<div class="container">
  <div class="row">
    <div ng-class="colNum(row.width)" ng-repeat="row in list">
      <div class="panel panel-default">
        <div class="panel-heading">{{ row.title }}</div>
        <div class="panel-body">{{ someText }}</div>
      </div>
    </div>
  </div>
</div>

    
<script>
var app = angular.module('demo', []);
app.controller('demo', function($scope) {
    $scope.list = [
        {
            width : 3,
            title : "HAHA"
        },
        {
            title : "AAAA"
        },
        {
            title : "BBB"
        },
        {
            width : 1,
            title : "CCC"
        },
        {
            width : 4,
            title : "DDD"
        },
        {
            title : "AAAA"
        },
        {
            title : "BBB"
        },
        {
            width : 1,
            title : "CCC"
        },
        {
            width : 3,
            title : "DDD"
        },
        {
            width : 1,
            title : "CCC"
        },
        {
            width : 4,
            title : "DDD"
        },
        {
            title : "AAAA"
        },
        {
            title : "BBB"
        }
    ];
    $scope.someText = "aaaaaaa aaaaaaaa aaaaaaaa aaaaaaa aaa aaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaa aaaaaa aaaaaaaaaa aaaaaaa aaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaa aaaaa aaaaaaa aaa ";
    $scope.colNum = function(width){
        width = width || 2;
        return "col-xs-" + width;
    }
});
</script>

</body>
</html>

~没有更多了~

关于作者

暂无简介

文章

评论

26 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

╰ゝ天使的微笑

文章 0 评论 0

少女净妖师

文章 0 评论 0

朱洁

文章 0 评论 0

觉浅

文章 0 评论 0

滥情空心

文章 0 评论 0

hl1314520

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文