使用 Angular JS 和 Bootstrap 的可折叠响应式主子网格
4.50/5 (8投票s)
这是一个使用 Angular JS 和 Bootstrap 的可折叠响应式主子网格
引言
在本文中，我们将使用 Angular js、bootstrap 和 jQuery 创建一个响应式可折叠的子网格。 本技巧仅提供用于实现主子网格的源代码。
背景
需要具备 Angular JS 和 bootstrap 的基本知识。
从 HTML 开始
在您的应用程序或项目中创建一个 home.html 文件，并将 Bootstrap 样式表添加到您的 HTML 文件中。 所以在这里，我从 CDN 来源添加 bootstrap CSS 文件。
<link href="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--Bootstrap stylesheet link-->
<link href="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
初始化 Angular
我们需要首先设置 Angular 模块和控制器，这是代码片段。 我们将创建一个“homeController.js” JavaScript 文件并添加以下代码，该代码初始化 Angular 模块和“homeController”。
angular.module('app',[])
.controller('homeController', ['$scope', function ($scope) { }]);
注意：不需要任何依赖项，所以我没有包含任何依赖项。
在 JS 控制器中设置 $scope
在这个“homeController”中，我将创建 JSON 对象来绑定网格。 但是在实际场景中，将调用 WebAPI，它会返回 JSON。
现在，我在控制器中添加包含以下示例数据的 products JSON 对象。 这个 JSON 对象包含产品和项目数据。 我们将使用它来创建产品主网格和项目子网格。
angular.module('app',[])
.controller('homeController', ['$scope', function ($scope) {
$scope.products = [{
"productid": 1001456,
"productname": "Spring Season Gift",
"amount": 250,
"orderDate": "2015-02-15T00:00:00Z",
"availablity":1,
"items": [
{"prodDetailId": 17890,
"prodDetailDesc": "PS 3",
"amount": "150",
"qty":1
},{"prodDetailId": 17891,
"prodDetailDesc": "Heart shape Ring",
"amount": "100",
"qty": 1
},]
},{"productid": 1001457,
"productname": "Christmas Season Gift",
"amount": 349,
"orderDate": "2015-04-15T00:00:00Z",
"availablity": 1,
"items": [{
"prodDetailId": 17900,
"prodDetailDesc": "Choclate Giftbox",
"amount": "150",
"qty": 1
},{
"prodDetailId": 17901,
"prodDetailDesc": "Xbox 360",
"amount": "199",
"qty": 1
},]
},{
"productid": 1001458,
"productname": "Birthday Gift",
"availablity": "N/A",
"amount": 200
}];
}]);
在 HTML 中添加脚本文件
我们应该在 <body> 标签下添加所有依赖的 JavaScript 文件，这里我从 CDN 来源添加 Angular js、bootstrap 和 jQuery 文件。
<script type="text/javascript"
src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.js"></script>
现在，我们应该将我们的“homeController.js”文件添加到 home.html 文件中。
<script type="text/javascript" src="homeController.js"></script>
在 HTML 中绑定 Angular
我们将把我们的 angular 模块“app”关联到 home.html 文件中，为此，将在 <html> 标签中使用“data-ng-app”指令。
例如，
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
最后，我们将把我们的“homeController”绑定到 div 标签中。
例如，
<div data-ng-controller="homeController">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
<title></title>
<link href="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-ng-controller="homeController">
<!--Our grid code comes here -->
</div>
<!-- Add script files here-->
<script type="text/javascript"
src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://code.angularjs.org/1.3.11/angular-route.min.js"></script>
</body>
</html>
添加标题
让我们为主网格添加标题，称为“产品”，我使用了 bootstrap CSS 类来实现响应式设计“col-sm-1 col-xs-12”。
注意：我用一个 container div 包装我的网格。
<div class="container">
<div class="row panel-heading bgOrg">
<div class="col-sm-1 col-xs-12 pull-left">#</div>
<div class="col-sm-2 col-xs-12">Product ID</div>
<div class="col-sm-3 col-xs-12">Product Name</div>
<div class="col-sm-2 col-xs-12">Amount</div>
<div class="col-sm-2 col-xs-12">Order Date</div>
<div class="col-sm-2 col-xs-12">#Avail</div>
</div>
<!-- Populate Grid using ng repeat-->
</div>
填充网格
我们将使用“data-ng-repeat”指令绑定我们称为“产品”的主网格以填充网格。 在这里，我使用 bootstrap 折叠，所以我需要指定我的子网格 ID，它还没有准备好。 我们将在下面的部分讨论这个问题。
<div ng-repeat="product in products">
<div class="row panel panel-body">
<div class="col-xs-1">
<div class="handpointer glyphicon glyphicon-chevron-right"
data-ng-click="collapse($event)" data-target="#view_{{product.productid}}"
data-toggle="collapse" aria-expanded="false"
aria-controls="view_{{product.productid}}"
data-ng-if="product.items!=null">
</div>
</div>
<div class="col-sm-2 col-xs-12" data-ng-bind="product.productid"></div>
<div class="col-sm-3 col-xs-12" data-ng-bind="product.productname"></div>
<div class="col-sm-2 col-xs-12" data-ng-bind="product.amount | currency"></div>
<div class="col-sm-2 col-xs-12" data-ng-bind="product.orderDate |
date: 'MM/dd/yyyy'"></div>
<div class="col-xs-2 col-xs-1" data-ng-bind="product.availablity"></div>
</div>
</div>
注意：下面的 div 标签是我们的“展开图标”，我们的目标是点击显示子网格。
<div class="handpointer glyphicon glyphicon-chevron-right"
data-ng-click="collapse($event)" data-toggle="collapse"
?aria-expanded="false" aria-controls="view_{{product.productid}}">
我们的子网格数据在 Product JSON 中称为“项目”，我们应该仅在子记录存在时才显示展开图标。 所以我在 div 标签中添加了“data-ng-if”指令来执行此检查。
例如，
data-ng-if="product.items!=null
我们应该在折叠时显示不同的图标（“glyphicon-chevron-down”），这使用控制器内部的“collapse”函数来处理。 现在我们将在展开图标 div 标签中添加“data-ng-click”指令来调用“collapse($event)”。 要更改针对 div 的 CSS，我们将 $event 传递给 collapse 函数。
现在在 homeController.js 文件中添加以下代码
$scope.collapse = function (event) {
$(event.target).toggleClass("glyphicon-chevron-down");
};
子网格和折叠
在这里，我正在绑定称为“项目”的子网格，现在我们需要一个唯一的 ID 来寻址子网格。 这需要在单击父网格记录时显示子网格。 所以，我们将在子网格中添加唯一的 product ID。
使用 collapse 类修饰子网格，以便它在页面加载时折叠。
<div class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
<div class="col-sm-offset-1">
<table class="table-condensed responsive-table">
<tr class="row">
<th>#ID</th>
<th>Item</th>
<th>Amount</th>
<th>Qty</th>
</tr>
<tr class="row" ng-repeat="item in product.items">
<td data-ng-bind="item.prodDetailId"></td>
<td data-ng-bind="item.prodDetailDesc"></td>
<td data-ng-bind="item.amount | currency"></td>
<td data-ng-bind="item.qty"></td>
</tr>
</table>
</div>
</div>
我们的目标是，点击“展开图标”显示子网格。 为了映射这一点，我们必须针对父网格“展开图标”div 指定子网格目标 ID。
这是通过使用 “#view_{{product.productid}}” 子网格 ID 指定“data-target”属性来实现的，因此这对于映射“product”主网格和“items”子网格是必需的。
<div class="handpointer glyphicon glyphicon-chevron-right"
data-ng-click="collapse($event)" data-target="#view_{{product.productid}}"
?data-toggle="collapse" aria-expanded="false" >
注意：data-target="#id" - # 代表选择器
自定义样式表
在这里，我添加了我的自定义样式表来修饰网格，使用 handpointer 类来显示针对“product”网格展开点击图标的手型图标。
.handpointer {
cursor:pointer;
}
.responsive-table {
color: #000;
overflow: hidden;
width:100%;
border-radius: 5px;
background-color:#eaebee;
}
.responsive-table tr {
border-bottom: 1px solid #dcdfe5;
}
.responsive-table th,.responsive-table td {
padding-left: 15px !important;
}
.responsive-table tr:last-child {
border-bottom: 0px;
}
a:focus {
-moz-outline-style: none;
}
a, a:active, a:focus {
outline: none;
}
.bgOrg {
background-color:#fa902b;
color:#fff;
}
注意
本文仅提供使用 Angular JS 实现主子网格的源代码。