前端之家收集整理的这篇文章主要介绍了
smarttable的使用(基于angularjs)，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
js的引用
| smarttable:"smarttable/Smart-Table.debug", |
| 'smarttable' : {deps : ['angular']}, |
|
1、html界面书写
<!--表格-->
<div class="container">
<table st-table="displayed" class="table table-striped">
<thead>
<tr>
<th st-ratio="10" st-sort="id">序号</th>
<th st-ratio="10" st-sort="name">名称</th>
<th st-sort="sexId" style="display:none">性别编码</th>
<th st-ratio="10" st-sort="sexName">性别</th>
<th st-ratio="20" st-sort="idCardNo">身份证号</th>
<th st-ratio="30" st-sort="des">描述</th>
<th st-ratio="30" st-sort="email">邮箱</th>
<th st-ratio="20" st-sort="mobile">手机号码</th>
<th st-ratio="10" st-sort="tel">固定电话</th>
<th st-ratio="10" st-sort="birthday">出生日期</th>
<th st-sort="nationId" style="display:none">民族编码</th>
<th st-ratio="30" st-sort="nationName">民族</th>
<th st-ratio="20" st-sort="operation">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in attributes">
<td st-ratio="10">{{row.id}}</td>
<td st-ratio="10" title="{{row.name}}">{{row.name}}</td>
<td style="display:none">{{row.sexId}}</td>
<td st-ratio="10">{{row.sexId}}</td>
<td st-ratio="20">{{row.idCardNo}}</td>
<td st-ratio="30" title="{{row.des}}">{{row.des}}</td>
<td st-ratio="30">{{row.email}}</td>
<td st-ratio="20">{{row.mobile}}</td>
<td st-ratio="10">{{row.tel}}</td>
<td st-ratio="30">{{row.birthday}}</td>
<td title="{{row.nationId}}" style="display:none">{{row.nationId}}</td>
<td st-ratio="20" title="{{row.nationId}}">{{row.nationId}}</td>
<td st-ratio="20" class="action-column">
<button type="button" class="btn-info btn-sm" data-toggle="modal" data-target="#edit_customer" ng-click="setValue1(row)">编辑</button>
<button type="button" class="btn-info btn-sm" data-toggle="modal" data-target="#delete" ng-click="setValue2(row)">删除</button>
</td>
</tr>
</tbody>
<tfoot ng-hide="numberOfPages==1">
<tr>
<td colspan="11">
<pagination-smart-table num-pages="numberOfPages" current-page="currentPage" max-size="maxSize"></pagination-smart-table>
</td>
</tr>
</tfoot>
</table>
</div> |
2、js书写crud操作调用服务
1)统一配置
// 分页配置
$scope.itemsByPage = 10; // 每页条数
$scope.maxSize = 8; // 显示的页数
$scope.currentPage = 1; // 当前页
$scope.datanumber = 1; // 数据总条数
$scope.numberOfPages = Math.ceil($scope.datanumber/$scope.itemsByPage); // 总页数
// 监听是否翻页
$scope.$watch('currentPage + itemsByPage',function (){
$scope.searchcustomerinfo();
});
2)新增模态框
界面
| <button class="btn save" type="button" data-toggle="modal" data-target="#add_customer" value="新增">新增</button>
<div class="modal fade" id="add_customer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-header wrap">
<h5 class="modal-title" id="myModalLabel">新增</h5>
</div>
<div class="modal-content wrap">
<form id="addCustomer" class="form-horizontal">
<input type="hidden" ng-model="addForm.id" id="alter_id" >
<table id="addCustomerTable">
<tr>
<td>
<label class="control-label"><b style="color: red;">*</b>名称</label>
</td>
<td>
<input id="alter_name" type="text" ng-model="addForm.name" placeholder="请输入中文名称" class="input-medium">
</td>
<td>
<label class="control-label"><b style="color: red;">*</b>性别编码</label>
</td>
<td>
<input type="text" ng-model="addForm.sexId" placeholder="请输入性别编码" class="input-medium">
</td>
</tr>
<tr>
<td>
<label class="control-label">身份证号</label>
</td>
<td>
<input type="text" ng-model="addForm.idCardNo" placeholder="请输入身份证号" class="input-medium">
</td>
<td>
<label class="control-label"><b style="color: red;">*</b>邮箱</label>
</td>
<td>
<input type="text" ng-model="addForm.email" placeholder="" class="input-medium">
</td>
</tr>
<tr>
<td>
<label class="control-label"><b style="color: red;">*</b>手机号码</label>
</td>
<td>
<input type="text" ng-model="addForm.mobile" placeholder="" class="input-medium">
</td>
<td>
<label class="control-label"><b style="color: red;">*</b>固定电话</label>
</td>
<td>
<input type="text" ng-model="addForm.tel" placeholder="" class="input-medium">
</td>
</tr>
<tr>
<td>
<label class="control-label"><b style="color: red;">*</b>出生日期</label>
</td>
<td>
<input type="date" ng-model="addForm.birthday" placeholder="" class="input-medium" value="2016-08-31"/>
</td>
<td>
<label class="control-label"><b style="color: red;">*</b>民族</label>
</td>
<td>
<input type="text" ng-model="addForm.nationId" placeholder="" class="input-medium">
</td>
</tr>
<tr>
<td>
<label class="control-label">描述</label>
</td>
<td>
<textarea ng-model="addForm.des" class="input-medium" style="height:47px;"></textarea>
</td>
<!-- <td>
<label class="control-label" >传染病标志</label>
</td>
<td style="padding-top: 15px;">
<select ng-model="alterForm.infectIoUsFlag" class="selectif" >
<option value="" >未知</option>
<option value="true" >是</option>
<option value="false" >否</option>
</select>
</td> -->
</tr>
</table> </form>
</div> <!-- /.modal-content -->
<div class="modal-footer wrap" style="padding: 10px;">
<button type="button" class="btn btn-primary" ng-click="addCustomer()">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div> 后端js服务
///新增方法开始*************
$scope.addForm = {};
$scope.addCustomer=function(){
console.log($scope.addForm);
$http({
contentType:'application/text;charset=UTF-8',
data:JSON.stringify($scope.addForm),
method:'post',
url:interfaces.customers
})
.success(function(data){
json=JSON.parse(data.data);
console.log(json);
if(json.result){
showTip("success","新增成功");
$('#add_customer').modal('hide');
//新增成功后查询
$scope.searchcustomer();
//将表单数据清空
$scope.addForm={};
}else{
showTip("warning","新增失败");
}
})
.error(function(){
showTip("danger","失败");
});
} |
3)编辑模态框 界面
| <div class="modal fade" id="edit_customer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-header wrap">
<h5 class="modal-title" id="myModalLabel">修改</h5>
</div>
<div class="modal-content wrap">
<form id="editCustomer" class="form-horizontal">
<input type="hidden" ng-model="alterForm.id" id="alter_id" >
<table id="editCustomerTable">
<tr>
<td>
<label class="control-label"><b style="color: red;">*</b>名称</label>
</td>
<td>
<input id="alter_name" type="text" ng-model="alterForm.name" placeholder="请输入中文名称" class="input-medium">
</td>
<td>
<label class="control-label"><b style="color: red;">*</b>性别编码</label>
</td>
<td>
<input type="text" ng-model="alterForm.sexId" placeholder="请输入性别编码" class="input-medium">
</td>
</tr>
<tr>
<td>
<label class="control-label">身份证号</label>
</td>
<td>
<input type="text" ng-model="alterForm.idCardNo" placeholder="请输入身份证号" class="input-medium">
</td>
<td>
<label class="control-label"><b style="color: red;">*</b>邮箱</label>
</td>
<td>
<input type="text" ng-model="alterForm.email" placeholder="" class="input-medium">
</td>
</tr>
<tr>
<td>
<label class="control-label"><b style="color: red;">*</b>手机号码</label>
</td>
<td>
<input type="text" ng-model="alterForm.mobile" placeholder="" class="input-medium">
</td>
<td>
<label class="control-label"><b style="color: red;">*</b>固定电话</label>
</td>
<td>
<input type="text" ng-model="alterForm.tel" placeholder="" class="input-medium">
</td>
</tr>
<tr>
<td>
<label class="control-label"><b style="color: red;">*</b>出生日期</label>
</td>
<td>
<input type="date" ng-model="alterForm.birthday" placeholder="" class="input-medium">
</td>
<td>
<label class="control-label"><b style="color: red;">*</b>民族</label>
</td>
<td>
<input type="text" ng-model="alterForm.nationId" placeholder="" class="input-medium">
</td>
</tr>
<tr>
<td>
<label class="control-label">描述</label>
</td>
<td>
<textarea ng-model="alterForm.des" class="input-medium" style="height:47px;"></textarea>
</td>
<!-- <td>
<label class="control-label" >传染病标志</label>
</td>
<td style="padding-top: 15px;">
<select ng-model="alterForm.infectIoUsFlag" class="selectif" >
<option value="" >未知</option>
<option value="true" >是</option>
<option value="false" >否</option>
</select>
</td> -->
</tr>
</table> </form>
</div>
<!-- /.modal-content -->
<div class="modal-footer wrap" style="padding: 10px;">
<button type="button" class="btn btn-primary" ng-click="Edit()">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
<!-- /.modal -->
</div> |
后端js服务
| //编辑开始
$scope.alterForm = {};
$scope.setValue1 = function(obj){ /* obj.birthday = new Date(obj.birthday); */
$scope.alterForm = angular.copy(obj);
$scope.alterForm.birthday=new Date($scope.alterForm.birthday);
console.log($scope.alterForm); }
$scope.Edit = function () {
console.log($scope.alterForm);
$http({
contentType:'application/text;charset=UTF-8',
data:JSON.stringify($scope.alterForm),
method:'PUT',
url:interfaces.customers+'/'+$scope.alterForm.id
})
.success(function(data){
json=JSON.parse(data.data);
if(json.result){
showTip("success","修改成功");
$('#edit_customer').modal('hide');
//修改成功后执行查询
/* $scope.searchForm.name = angular.copy($scope.searchForm.name);*/
$scope.searchcustomer();
}else{
showTip("warning","修改失败");
}
})
.error(function(){
showTip("danger","失败");
});
} 4)查询 界面
<form ng-submit="searchcustomer()" id="searchcustomer" class="searchcustomer">
<div class="con-nav">
<div class="name" style="float:left;margin-left:45px;">名称<input type="text" class="input-medium medium" ng-model="searchForm.name"/></div>
<div class="sexID" style="float:left;margin-left:100px;">性别<select ng-model="searchForm.sexId" class="selectsi medium" >
<option value="1" selected="selected" >未知性别</option>
<option value="4052" >男</option>
<option value="4053" >女</option>
</select>
</div>
<div class="idCardNo" style="float: left;margin-left:100px;">身份证号<input type="text" class="input-medium medium" ng-model="searchForm.idCardNo"/></div>
<button type="submit" class="button">查询</button>
<div style="clear: both;"></div>
</div>
</form> |
后端js服务
| //查询开始 $scope.searchForm = {};
//搜索按钮查询 从1页开始
$scope.searchcustomer = function(){
$scope.currentPage = 1;
$scope.searchcustomerinfo();
}
// 查询客户信息
$scope.searchcustomerinfo = function(){
$scope.searchForm.pageIndex = $scope.currentPage;
$scope.searchForm.pageSize = $scope.itemsByPage;
console.log($scope.searchForm);
$http({
method:'GET',
url:interfaces.customers,
params:$scope.searchForm
})
.success(function(data){
json=JSON.parse(data.data);
jsonrows = JSON.parse(json.rows);
console.log($scope.numberOfPages);
$scope.attributes=jsonrows;
$scope.datanumber = json.count;
console.log($scope.datanumber);
$scope.numberOfPages = Math.ceil($scope.datanumber/$scope.itemsByPage);
console.log($scope.numberOfPages);
})
.error(function(){
showTip("danger","查询失败");
});
} |
|
5)删除界面
<!--删除的弹出窗口-->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" style="margin: 0 auto;padding: 0px 19px 15px;">
<div class="modal-dialog">
<div class="modal-header" style="width:410px;">
<h5 class="modal-title" id="myModalLabel">删除</h5>
</div>
<div id="remove" class="form-horizontal">
<p style="text-align: center;margin: 94px;"><img src="../hapui/img/delete.jpg">确认删除所选内容？</p>
</div>
<div class="modal-footer" style="padding:10px;width:410px;margin-top:-44px;">
<button type="button" class="btn btn-primary" ng-click="Remove()">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div> |
删除js
| //删除方法开始 $scope.setValue2 = function(obj){ $scope.id = obj.id; } $scope.Remove = function () { console.log($scope.id); console.log($scope.searchForm.name); $http({ contentType:'application/text;charset=UTF-8',method:'DELETE',url:interfaces.customers+'/'+$scope.id }) .success(function(data){ console.log(data); if(data.data=="1"){ showTip("success","删除成功"); $('#delete').modal('hide'); $scope.searchcustomer(); }else{ showTip("warning","删除失败"); } }) .error(function(){ showTip("danger","失败"); }); }; |
|
原文链接：https://www.f2er.com/angularjs/148901.html
