js的引用html
| smarttable:"smarttable/Smart-Table.debug", |
| 'smarttable' : {deps : ['angular']}, |
| |
一、html界面書寫json
<!--表格-->
<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> |
二、js書寫crud操做調用服務後端
1)統一配置app
// 分頁配置
$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();
});ide
2)新增模態框post
界面ui
| <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>url <!-- /.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>spa 後端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","失敗"); }); }; |
|