最近面试了一个西安电子科技大学刚毕业的，不是计算机系毕业，却喜欢编程。除了书本上的知识以外，其他一窍不通，笔试题答得不错。经验欠佳，编程也只懂书本上的一些例子。本来不打算录用，但是后来聊到高等数学和物理是她学的最好的两门，那必须收下。人家都说了能考上西电，就能证明她的学习能力，我和项目经理也就相信人家了。毕竟当年面试的时候我面试的是南京擎天科技，有个西电的面试的是南京联创，人家和我聊了两句，得知我是二本院校的，人家说了句他同学面试的都是腾讯，阿里，百度，新浪，说完直接放弃面试，我去南京擎天还害怕人家不要呢。后来在工作的时候一个西电的小伙研究生毕业，专业是密码破译，在我们公司写js，后来去阿里做web前端工程师了，现在年薪三十多万。不说了，我还是草根一个，因为一个四级英语证，我工资没办法翻一翻。但是努力还是要继续，机会还是留给有准备的人的。

今天我们来看一下头条网后台管理的用户管理查询部分。先上一张图，调一下胃口。

看到了吧，就是这个界面，本节本来是要讲主界面的，但是由于angularJS只支持单页应用，所以我需要对页面导航做一下修改。OK，我们看一下用户管理界面的代码。

@{
    Layout = null;
}
<div id="div_userManage" class="panel panel-primary" ng-app="userManageModule" ng-controller="userManageController">
    <div class="panel-heading">
        <h3 class="panel-title">
            <img class="img-panel-title" src="~/Images/Base/userlogin.png" />
            <b>用户管理</b>
        </h3>
    </div>
    <div class="div-panel-content" style="padding:5px">
        <div class="form-inline panel panel-primary" style="padding:5px">
            <div class="form-group">
                <label for="userid">用户名:</label>
                <input type="text" list="userid_list" class="form-control" ng-model="UserID">
                <datalist id="userid_list">
                    <option ng-repeat="user in userList" label="`user`.`UserName`" value="`user`.`UserID`" />
                </datalist>
            </div>
            <div class="form-group" style="margin-left:10px;margin-right:10px">
                <label for="username">姓名:</label>
                <input type="text" list="username_list" class="form-control" ng-model="UserName">
                <datalist id="username_list">
                    <option ng-repeat="user in userList" label="`user`.`UserID`" value="`user`.`UserName`" />
                </datalist>
            </div>
            <div class="form-group">
                <label for="usersex">性别:</label>
                <select ng-model="UserSex" class="form-control">
                    <option value="">---请选择---</option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
            <div class="form-group" style="margin-top:0px">
                <label for="startdate">出生日期:</label>
                <input type="date" class="form-control" ng-model="StartDate" />
                <label for="enddate">-</label>
                <input type="date" class="form-control" ng-model="EndDate" />
            </div>
            <input type="image" class="btn-search" ng-click="getDatabyPageSize()" src="~/Images/Base/search.png" />
        </div>
        <div class="pre-scroll">
            <table class="table table-bordered table-striped table-hover" ng-init="load()">
                <tr style="background-color: #428bca; color: white">
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>出生日期</th>
                    <th>电话号码</th>
                    <th>Email</th>
                </tr>
                <tr ng-repeat="userEntity in userEntityList">
                    <td>`userEntity`.`UserID`</td>
                    <td>`userEntity`.`UserName`</td>
                    <td>`userEntity`.`UserSex`</td>
                    <td>{{userEntity.UserBirthDay.slice(6,-2)|date:'yyyy-MM-dd HH:mm:ss'}}</td>
                    <td>`userEntity`.`UserPhone`</td>
                    <td>`userEntity`.`UserEmail`</td>
                </tr>
            </table>
        </div>
        <div class="row" style="margin-top: 5px;">
            <div class="col-md-2">
                <select class="form-control pagesize-select" ng-model="PageSize"
                        ng-options="ps for ps in pageSizeList" ng-change="getDatabyPageSize(1)"></select>
            </div>
            <div class="col-md-4">
                <div style="height:35px;line-height:35px;">
                    <label>当前共</label><label style="color:red" ng:bind="TotalCount"></label><label>条记录</label>
                    <label>当前是第</label><label style="color:red" ng:bind="PageIndex"></label><label>页</label>
                </div>
            </div>
            <div class="col-md-6">
                <ul id="ul_pager" class="pagination" style="float:right;margin-top:0px">
                    <li id="linkPre"><a href="#" ng-click="getPrePageIndexes()">&laquo;</a></li>
                    <li ng-repeat="pageIndex in pageIndexList" id="page_`pageIndex`">
                        <a href="#" ng-click="getDatabyPageIndex(pageIndex)">`pageIndex`</a>
                    </li>
                    <li id="linkNext"><a href="#" ng-click="getNextPageIndexes()">&raquo;</a></li>
                </ul>
            </div>
        </div>
    </div>

还是bootStrap布局及样式。在这里布局使用了BootStrap的panel以及样式。在查询条件中，有用户名，姓名，性别等查询条件。我们首先看一下这个用户名

<input type="text" list="userid_list" class="form-control" ng-model="UserID">
<datalist id="userid_list">
     <option ng-repeat="user in userList" label="`user`.`UserName`" value="`user`.`UserID`" />
</datalist>

在这里我们使用了Html5的datalist，具体怎么用，看上面的代码就明白了。我们绑定其model为UserID，然后循环$scope中的userList，构建datalist的option选项。我们设置其label为UserName，value为UserID。这个标签其实有点像Silverlight中的AutoComplete控件。说了这么多，我们看一下。

当你双击的时候，会自动下拉加载的数据。当你输入的时候，他会自动匹配输入的字符串。需要注意的是他的匹配方式只是左匹配，而且不支持全匹配。ok，上面我们提到label和value，在这里lileiXXX这个是value值，而李磊123XXXXX这个是label。这个元素其实用的场合只限于数据量比较小的场合，如果数据量大，可能根本无法使用。这里我们是为了方便用户在查询UserID的时候，通过label可以方便的知道用户的姓名。

OK，姓名查询条件其实是和用户名查询条件差不多的，性别查询条件是写死的，出生日期使用的是html5的标签。所有查询条件都绑定了一个$scope中的变量。OK，接下来我们看看展示数据的table。其实就是绑定了一个数据源userEntityList，然后循环创建tr。在table上有个ng-init标签，它指向的function是load。这个load方法，我把页面对应的js代码贴出来好了。

<script type="text/javascript">
        var appModule = angular.module('userManageModule', []);
        appModule.controller("userManageController", function ($scope, $http) {
            $scope.usersexvalue = "";
            $scope.PageIndex = 1;
            $scope.PageSize = 10;
            $scope.pageSizeList = [10, 20, 30, 50];
            $scope.pageIndexList = [];
            $scope.userList = [];
            $scope.userEntityList = [];
            $scope.TotalCount = 0;
            $scope.pageShow = 5;
            $scope.TotalPage = 0;
 
            $scope.load = function () {
                this.getDatabyPageSize();
            };
 
            //when pageSize changed,this method will be called
            $scope.getDatabyPageSize = function () {
                $scope.PageIndex = 1;
                $scope.pageIndexList = [];
                var jsonData = JSON.stringify({
                    PageIndex: 1,
                    PageSize: $scope.PageSize,
                    UserID: $.trim($scope.UserID),
                    UserName: $.trim($scope.UserName),
                    UserSex: $scope.UserSex,
                    StartDate: $scope.StartDate,
                    EndDate: $scope.EndDate
                });
 
                //$.post("/UserManage/GetUserList", { requestJson: jsonData },
                //   function (data, textStatus) {
                //       $scope.userEntityList = data.UserInfoEntityList;
                //       alert(data.UserInfoEntityList[0].UserName);
                //   });
 
                $http.post("/UserManage/GetUserList", { requestJson: jsonData }).success(function (data) {
                    $scope.TotalCount = data.TotalCount;
                    $scope.TotalPage = $scope.TotalCount % $scope.PageSize == 0 ? $scope.TotalCount / $scope.PageSize : $scope.TotalCount / $scope.PageSize + 1;
                    var tempArray = [];
 
                    if ($scope.TotalPage <= $scope.pageShow) {
                        for (var i = 1; i <= $scope.TotalPage; i++) {
                            tempArray.push(i);
                        }
 
                        $scope.pageIndexList = tempArray;
                        $("#linkPre,#linkNext").addClass("disabled");
                    }
                    else if ($scope.pageShow < $scope.TotalPage) {
                        $("#linkPre").addClass("disabled");
 
                        if ($("#linkNext").hasClass("disabled")) {
                            $("#linkNext").removeClass("disabled");
                        }
 
                        for (var i = 1; i <= $scope.pageShow; i++) {
                            tempArray.push(i);
                        }
 
                        $scope.pageIndexList = tempArray;
                    }
 
                    $scope.userEntityList = data.UserInfoEntityList;
                    angular.copy($scope.userEntityList, $scope.userList);
                });
            };
        });
 
        angular.bootstrap(angular.element('#div_userManage'), ['userManageModule']);
    </script>

在load方法中我们先构造了json请求字符串，然后调用getDatabyPageSize方法。在getDatabyPageSize中，我们根据绑定的变量拿到所有查询条件以及pageSize，PageIndex。然后通过angular内部对象$http请求/UserManage/GetUserList这个action，并将json请求数据post到这个action。成功以后，得到总条数和总页数，再根据pageShow(显示的页码数)算出显示的页码以及前一批页和后一批页链接的可用性，再得到要显示的页码，这里算法很简单，就不多说了。完了之后，将数据源赋给$scope.userEntityList。并且将该页的数据源拷贝到$scope.userList用于用户名和姓名的datalist绑定。

angular.bootstrap(angular.element('#div_userManage'), ['userManageModule']);这句是为了注册一个初始化启动的module。因为我们的主界面有一个注册的module，如果我们在这里不注册，就意味着我们的这个页面无法应用angular。我也尝试了，当我们切换到别的界面，在通过ajax请求将该页面加载到主页面，angular会失效。这就是angular在遇到ajax的异步刷新时候的尴尬，我尝试如果是整页刷新，则没有问题，因为每次都会将入口全部重新注册。好了，这个问题我下节会在讲主页导航的时候解决。看完了table，我们最后看一下分页。

其实我们的查询界面正体面貌就是这样，只是新增和删除按钮还没做。在底部，有个pageSize的选项。

<select class="form-control pagesize-select" ng-model="PageSize"
                        ng-options="ps for ps in pageSizeList" ng-change="getDatabyPageSize(1)"></select>

我们给它绑定了PageSize，默认是$scope.pageSizeList = [10, 20, 30, 50];当它change的时候，会调用getDatabyPageSize(1)方法。getDatabyPageSize这个方法在上面已经提到了，在这里就不赘述了。在这里ng-options又是一种新的写法，其实这里也可以用ng-repeat加到option上。

接下来其实就是"当前共100条记录 当前是第1页"，这里的100和1都是绑定的值。MVVM嘛，页面的值可以反映到变量，变量改变也会反映到页面，类似于Silverlight MVVM的IPropertyChanged接口，是一种通知机制。

<div style="height:35px;line-height:35px;">
       <label>当前共</label><label style="color:red" ng:bind="TotalCount"></label><label>条记录</label>
       <label>当前是第</label><label style="color:red" ng:bind="PageIndex"></label><label>页</label>
</div>

在这里需要注意的是在label，span，div等元素上的绑定，要使用ng-bind或者ng:bind,ng_bind等一些写法，这些写法都是可以被angularJS识别的。

最后我们看一下这个分页，看一下代码

<ul id="ul_pager" class="pagination" style="float:right;margin-top:0px">
    <li id="linkPre"><a href="#" ng-click="getPrePageIndexes()">&laquo;</a></li>
    <li ng-repeat="pageIndex in pageIndexList" id="page_{{pageIndex}}">
        <a href="#" ng-click="getDatabyPageIndex(pageIndex)">{{pageIndex}}</a>
    </li>
    <li id="linkNext"><a href="#" ng-click="getNextPageIndexes()">&raquo;</a></li>
</ul>

大家注意到这个pageIndex的绑定，在VS中，它的颜色变成了紫色。在这里强调一点，ng-repeat在那个元素上，就是那个元素循环创建。所以这里除了开头<<和结尾>>，其他的具体页码都是根据数据量动态产生的。由于上面已经得到了pageIndexList，所以页码自然就出来了。最后我们再看看《和》以及点击页码的逻辑。先看页码吧，我们看到，点击的时候调用getDatabyPageIndex(pageIndex)方法。

$scope.getDatabyPageIndex = function (pageIndex) {
    var jsonData = JSON.stringify({
        PageIndex: pageIndex,
        PageSize: $scope.PageSize,
        UserID: $.trim($scope.UserID),
        UserName: $.trim($scope.UserName),
        UserSex: $scope.UserSex,
        StartDate: $scope.StartDate,
        EndDate: $scope.EndDate
    });

    $scope.PageIndex = pageIndex;

    this.clearPaginationClass();
    angular.element('#page_' + pageIndex).addClass('active');
    $http.post("/UserManage/GetUserList?parm=" + new Date().toTimeString(), { requestJson: jsonData }).success(function (data) {
        $scope.userEntityList = data.UserInfoEntityList;
    });
}

$scope.clearPaginationClass = function () {
        angular.element('#ul_pager li').each(function () {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
            }
        });
}

传入当前页，再联合查询条件进行查询。在这里我想说的是，在查询的时候如果使用jquery的ajax请求$.post方法，即使查询出来数据也不能展示到页面，

$.post("/UserManage/GetUserList", { requestJson: jsonData },
       function (data, textStatus) {
             $scope.userEntityList = data.UserInfoEntityList;
             alert(data.UserInfoEntityList[0].UserName);
});

原因是序列化方式和angularJs不一样。如果使用angularJS提供的post方法，post的数据action也接不到，原因是angularJS的头文件和asp.net mvc解析的头文件的结构不一样。这样就要求我们在post的时候对数据进行转换，如下是转换方法，是一个老外写的。

$http.defaults.headers.post['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
            $http.defaults.transformRequest = [function (data) {
                return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
            }];

在这里我就不解释了，因为我不喜欢了解原理。OK，最后我们再看一下<< and >>的ng-click。

$scope.getPrePageIndexes = function () {
    if ($scope.pageIndexList.length > 0
        && $scope.pageIndexList[0] > $scope.pageShow) {

        var currentPageFirst = $scope.pageIndexList[0];
        $scope.pageIndexList = [];

        for (var i = 5; i >= 1; i--) {
            $scope.pageIndexList.push(currentPageFirst - i);
        }

        if ($("#linkNext").hasClass("disabled")) {
            $("#linkNext").removeClass("disabled");
        }

        if ($scope.pageIndexList[$scope.pageShow - 1] <= $scope.pageShow) {
            if (!$("#linkPre").hasClass("disabled")) {
                $("#linkPre").addClass("disabled");
            }
        }
    }
};
            
$scope.getNextPageIndexes = function () {
    if ($scope.pageIndexList.length > 0
       && $scope.pageIndexList[$scope.pageShow - 1] < $scope.TotalPage) {

        var currentPageLast = $scope.pageIndexList[$scope.pageShow - 1];
        $scope.pageIndexList = [];

        for (var i = 1; i <= 5; i++) {
            if (i + currentPageLast > $scope.TotalPage) break;
            $scope.pageIndexList.push(currentPageLast + i);
        }

        if ($("#linkPre").hasClass("disabled")) {
            $("#linkPre").removeClass("disabled");
        }

        if ($scope.pageIndexList[$scope.pageShow - 1] >= $scope.TotalPage) {
            if (!$("#linkNext").hasClass("disabled")) {
                $("#linkNext").addClass("disabled");
            }
        }
    }
};

还是那句话，算法很简单，自己一看就明白了。ok，我们看一下效果。这里的循环就是控制只显示5个页码，点击箭头可以看其他的页码。

看一下分页效果

当我们把每页条数设置为50以后，就只有两页，《 and 》都是disabled。

最后最后我再提一下，这个日期的问题

<td>{{userEntity.UserBirthDay.slice(6,-2)|date:'yyyy-MM-dd HH:mm:ss'}}</td>

如果是在后端直接return Json的话，如下

[HttpPost]
//[OutputCache(Duration = 60)]
public JsonResult GetUserList()
{
    string requestJson = Request["requestJson"];
    UserSearchRequest request = JsonBuilder.BuildUserSearchRequest(requestJson);
    UserSearchResponse response = UserInfoBiz.GetInstance().GetUserInfoEntityList(request);
    return Json(response, JsonRequestBehavior.AllowGet);
}

则出来的日期会是/Date(XXXXXXXXXXXXXX)/这种格式，所以需要我们加一个filter去转一下。

OK，在控制器构造好request

public static UserSearchRequest BuildUserSearchRequest(string requestJson)
{
    if (string.IsNullOrWhiteSpace(requestJson)) return new UserSearchRequest();

    return (UserSearchRequest)JsonConvert.DeserializeObject<UserSearchRequest>(requestJson);
}

最后调用DAL读取脚本文件中的脚本查询出数据

<Script Key="GetUserList">
    <![CDATA[
    DECLARE @UserTempTable TABLE
(  
    ID INT IDENTITY(1,1) NOT NULL,
    UserNo VARCHAR(15) NOT NULL
)
 
INSERT INTO @UserTempTable
(
    UserNo
)
SELECT
    UserID
FROM dbo.InformationUser WITH(NOLOCK)
WHERE (@UserID IS NULL OR @UserID = '' OR UserID LIKE '%' + @UserID + '%')
    AND (@UserSex IS NULL OR @UserSex = '' OR UserSex = @UserSex)
    AND (@UserName IS NULL OR @UserName = '' OR UserName = @UserName)
    AND (@BirthStartDate IS NULL OR UserBirthDay >= @BirthStartDate)
    AND (@BirthEndDate IS NULL OR UserBirthDay <= @BirthEndDate)
ORDER BY UserID ASC
     
SELECT @TotalCount = COUNT(1) FROM @UserTempTable
 
SELECT
    UserID,
    UserName,
    UserSex,
    UserBirthDay,
    UserEmail,
    UserPhone
FROM(
  SELECT
    ID = ROW_NUMBER() OVER(ORDER BY UserID ASC),
    A.UserID,
    A.UserName,
    UserSex = CASE WHEN UserSex = '1'
                      THEN '男'
                     ELSE
                      '女'
                END,
      A.UserBirthDay,
      A.UserEmail,
      A.UserPhone
  FROM dbo.InformationUser A WITH(NOLOCK)
  INNER JOIN @UserTempTable B
      ON A.UserID = B.UserNo
) N
WHERE ID BETWEEN (@PageIndex - 1)* @PageSize + 1 AND @PageIndex * @PageSize
    ]]>
  </Script>

好了，今天到此结束，更多精彩内容，请看下节。