smarttable的使用(基于angularjs)

2019独角兽企业重金招聘Python工程师标准>>>

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://my.oschina.net/Seaside20151225/blog/744016