angular+bootstrap实现增删改查自适应表格代码-html代码-BFW代码库

代码语言：html

所属分类：表格

代码描述：angular+bootstrap实现增删改查自适应表格代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
* {
	margin:0;
	padding:0;
	list-style:none;
	text-decoration:none;
	font-family:monospace,serif,sans-serif,"微軟正黑體";
	color:#555
}
body {
	background-image:linear-gradient(120deg,rgba(168,242,255,.6) 0,rgba(86,89,202,.8) 100%)
}
table,th {
	text-align:center
}
.box {
	margin-top:80px;
	margin-bottom:80px;
	padding:25px;
	background-color:#fff;
	border-radius:10px;
	position:relative
}
.form-control-feedback {
	margin-top:8px;
	height:23px;
	color:#bbb;
	line-height:24px;
	font-size:15px
}
.form-control.has-feedback-left {
	padding-top:10px;
	padding-left:45px
}
.form-control-feedback.left {
	border-right:1px solid #ccc;
	left:18px
}
.panel .form-control-feedback.left {
	border-right:1px solid #ccc;
	left:2px
}
.btn span {
	color:#FFF
}
table span.fa {
	text-align:center;
	font-size:20px
}
table span.fa small {
	font-size:10px
}
table span {
	cursor:pointer
}
.listInfo {
	position:absolute;
	top:100px
}
.listInfo .panel {
	box-shadow:1px 1px 5px #aaa
}
.inputSpan {
	padding:3px 0;
	border:1px solid #ccc;
	border-radius:4px
}
.inputSpan span {
	padding:6px 9px;
	color:#bbb;
	border-right:1px solid #ccc
}
.spanID {
	color:#999;
	position:absolute;
	left:35px;
	bottom:35px
}
.clearSearch {
	right:18px;
	color:#C73E3A;
	font-size:16px;
	cursor:pointer;
	position:absolute;
	right:28px;
	bottom:8px
}

</style>
</head>

<body>
    <div class="container" ng-app="winnieApp" ng-controller="winnieCtrl">
        <div class="box">
            <div class="col-md-12">
                <div class="col-md-3 pull-right form-group has-feedback"><input type="text" class="form-control has-feedback-left" placeholder="搜尋" ng-model="search"><span class="fa fa-search form-control-feedback left" aria-hidden="true"></span><span class="fa fa-times-circle-o clearSearch" aria-hidden="true"
                        ng-show="search" ng-click="search=''"></span></div>
                <div class="pull-right"><button type="button" class="btn btn-info" ng-click="undoInfo()"><span class="fa fa-undo" aria-hidden="true"></span>Undo</button><button type="button" class="btn btn-info" ng-click="redoInfo()"><span class="fa fa-repeat" aria-hidden="true"></span>Redo</button>
                    <button
                        type="button" class="btn btn-info" ng-click="addInfo()"><span class="fa fa-plus" aria-hidden="true"></span>ADD</button><button type="button" class="btn btn-info" ng-click="deleteSelInfo()"><span class="fa fa-trash-o" aria-hidden="true"></span>Delete</button></div>
            </div>
            <table class="table table-striped">
                <thead>
                    <th><input type="checkbox" ng-model="checkAll"></th>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Birthday</th>
                    <th>Phone</th>
                    <th>Created Time</th>
                    <th></th>
                    <th></th>
                </thead>
                <tbody>
                    <tr ng-repeat="data in information | filter:search">
                        <td><input type="checkbox" ng-model="data.check" ng-checked="checkAll"></td>
                        <td>{{data.id}}</td>
                        <td>{{data.name}}</td>
                        <td>{{data.gender}}</td>
                        <td>{{data.birthday}}</td>
                        <td>{{data.phone}}</td>
                        <td>{{data.createdtime}}</td>
                        <td><span class="fa fa-edit" aria-hidden="true" ng-click="editInfo(data)"><br><small>Edit</small></span></td>
                        <td><span class="fa fa-trash" aria-hidden="true" ng-click="deleteInfo(data)"><br><small>Delete</small></span></td>
                    </tr>
                </tbody>
            </table>
            <div class="col-md-4 col-md-offset-4 listInfo" ng-show="listInfo">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title text-center">{{info.panelTitle||"Edit"}}</h3>
                    </div>
                    <div class="panel-body">
                        <form name="signForm" class="form-body" ng-submit="summitInfo()">
                            <div class="form-group has-feedback"><input type="text" class="form-control has-feedback-left" placeholder="Name" required ng-model="info.name"><span class="fa fa-user form-control-feedback left" aria-hidden="true"></span></div>
                            <div class="form-group inputSpan"><span class="fa fa-venus.........完整代码请登录后点击上方下载按钮下载查看