angularJS生成table表格点击表头排序,并使用jquery easy ui分页

简单的效果:http://xuxweb.com/example/4.html

后台是JAVA,所以只贴前端部分代码,记录下,说不定以后会用到

表格:

<div ng-app="myApp" id="ngSection" ng-controller="customersCtrl" ng-init="falg['companyId']=1;falg['officeId']=1;falg['no']=1;falg['name']=1;falg['email']=1;falg['phone']=1;falg['mobile']=1;falg['userType']=1;">
 <span>用户搜索:</span>
 <input type="text" id="userName" />
 <input type="button" value="搜索" onclick="pageJump()" />
 
  <#list authority_ as author><#if author=="tjyh">
 <input id="addyonghu" style="margin-left:320px;" type="button"
  value="添加用户" /> </#if> </#list> 
 <table   style="padding: 0px;margin: 0px;">
  <thead>
   <tr>
       <td>序号</td>
    <td ng-click="test = 'companyId';falg['companyId']=!falg['companyId']">归属公司</td>
    <td ng-click="test = 'officeId';falg['officeId']=!falg['officeId']">归属部门</td>
    <td ng-click="test = 'no';falg['no']=!falg['no']">工号</td>
    <td ng-click="test = 'name';falg['name']=!falg['name']">姓名</td>
    <td ng-click="test = 'email';falg['email']=!falg['email']">邮箱</td>
    <td ng-click="test = 'phone';falg['phone']=!falg['phone']">电话</td>
    <td ng-click="test = 'mobile';falg['mobile']=!falg['mobile']">手机</td>
    <td ng-click="test = 'userType';falg['userType']=!falg['userType']">用户类型</td>
    <td>操作</td>
   </tr>
  </thead>
  <tbody id="userTable">
   <tr ng-repeat="x in names | orderBy:test:falg[test]">
       <td>{{ $index + 1 }}</td>
    <td>{{ x.companyId}}</td>
    <td>{{ x.officeId }}</td>
    <td>{{ x.no }}</td>
    <td>{{ x.name }}</td>
    <td>{{ x.email}}</td>
    <td>{{ x.phone }}</td>
    <td>{{ x.mobile }}</td>
    <td>{{ x.userType }}</td>
    <td>
    <span href="${base}/user_transmitUser?userModel.id={{x.id}}&userModel.companyId={{ x.companyId}}&userModel.officeId ={{ x.officeId }}&userModel.loginName ={{ x.loginName}}&userModel.password={{ x.password}}&userModel.name={{ x.name}}&userModel.email={{ x.email}}&userModel.phone={{ x.phone}}&userModel.mobile={{ x.mobile}}&userModel.userType={{ x.userType}}">修改</span>
    <span href="${base}/userRole_tainUserRole?userModel.id={{x.id}}&userModel.name={{x.name}}">添加角色</span>
    <a lang='{{x.id}}'>删除</a>
    </td>
   </tr>
  </tbody>
 </table>
 </div>

分页

   <div id="bigPagingDiv" align="center">
    <div style="margin:10px 0;"></div>
   <div id="pagingDiv" style="width: 45%;" class="easyui-pagination" data-options="showPageList:true,pageSize:15,total:0,pageList:[5,10,15],buttons:[{iconCls:'icon-redo',handler:function(){pageJump()}}]" ></div>
     </div>

分页跳转

    function pageJump(){
    //获取当前文件文件名
     var strUrl=window.location.href;
   var arrUrl=strUrl.split("/");
   var strPage=arrUrl[arrUrl.length-1];
   var arrFileName = strPage.split(".");
   var fileName = arrFileName[0];
   var pageNumber = $(".pagination-num").val();
    //得到一个分页属性对象
   var page =  $('#pagingDiv').pagination('options');
     if(fileName=="tree_classify"){
      ys.pagingTree(pageNumber,page.pageSize);
     }else if(fileName == "role_fwRole"){
      pagingRole(pageNumber,page.pageSize);
     }else if(fileName == "user_trainUser"){
      pagingUser(pageNumber,page.pageSize);
     }
    }

初始化表格

var username = $("#userName").val();
var app = angular.module('myApp', [], function($httpProvider) {//MyModule是你自己的app名称
  // Use x-www-form-urlencoded Content-Type
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
  $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
 
  
  var param = function(obj) {
    var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
     
    for(name in obj) {
      value = obj[name];
       
      if(value instanceof Array) {
         for(i=0; i<value.length; ++i) {
 
          subValue = value[i];
          fullSubName = name + '[' + i + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value instanceof Object) {
        for(subName in value) {
          subValue = value[subName];
          fullSubName = name + '[' + subName + ']';
          innerObj = {};
          innerObj[fullSubName] = subValue;
          query += param(innerObj) + '&';
        }
      }
      else if(value !== undefined && value !== null)
        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
    }
     
    return query.length ? query.substr(0, query.length - 1) : query;
  };
 
  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
  }];
});

app.controller('customersCtrl', function($scope,$http) {
    $http.post("user_findAllUse",{
      "userModel.name" : username,
      "pageUtil.pageSize" : 15,
      "pageUtil.currentPage" : 1}).success(
     function(data) {
     $scope.names = data.rows;
     $scope.pageJump = function() {
     var pageNumber = $(".pagination-num").val();
     var page =  $('#pagingDiv').pagination('options');
     $http.post("user_findAllUse",{
      "userModel.name" : username,
      "pageUtil.pageSize" : page.pageSize,
      "pageUtil.currentPage" : pageNumber}).success(
     function(data2) {
     $scope.names = data2.rows;});
    };
     });
});

更新表格

function pagingUser(pageNumber, pageSize) {
 var username = $("#userName").val();
 $.post(
     "user_findAllUse",
     {
      "userModel.name" : username,
      "pageUtil.pageSize" : pageSize,
      "pageUtil.currentPage" : pageNumber
     },
     function(data) {
      
      if (data.rows != null) {      
       var scope = angular.element(ngSection).scope();
       scope.$apply(function(){
       scope.names = data.rows;
       });     
      } else {
       $("#userTable").empty();
       $("#userTable")
         .append(
           "<tr><td><span style='color:red;font-size: 15;'>暂无数据</span></tr></td>");
      }
      $('#pagingDiv').pagination({
       total : data.total,
       pageNumber : data.currentPage
      });
      $("#loadingPic").hide();
      
     });
}

虚像:

评论 阅读