标签：angularjs html5 datalist angular $http.post angular json date
最近面试了一个西安电子科技大学刚毕业的，不是计算机系毕业，却喜欢编程。除了书本上的知识以外，其他一窍不通，笔试题答得不错。经验欠佳，编程也只懂书本上的一些例子。本来不打算录用，但是后来聊到高等数学和物理是她学的最好的两门，那必须收下。人家都说了能考上西电，就能证明她的学习能力，我和项目经理也就相信人家了。毕竟当年面试的时候我面试的是南京擎天科技，有个西电的面试的是南京联创，人家和我聊了两句，得知我是二本院校的，人家说了句他同学面试的都是腾讯，阿里，百度，新浪，说完直接放弃面试，我去南京擎天还害怕人家不要呢。后来在工作的时候一个西电的小伙研究生毕业，专业是密码破译，在我们公司写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()">«</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()">»</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识别的。
最后我们看一下这个分页，看一下代码，在这里我截个图好了，这样看着方便
大家注意到这个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;
$http.post("/UserManage/GetUserList", { requestJson: jsonData }).success(function (data) {
$scope.userEntityList = data.UserInfoEntityList;
});
}传入当前页，再联合查询条件进行查询。在这里我想说的是，在查询的时候如果使用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。
//when << clicked
$scope.getPrePageIndexes = function () {
if ($scope.pageIndexList.length > 0
&& $scope.pageIndexList[0] > $scope.pageShow) {
var currentPageFirst = $scope.pageIndexList[0];
$scope.pageIndexList = [];
for (var i = $scope.pageShow; 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");
}
}
}
};
//when >> clicked
$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 <= $scope.pageShow; i++) {
if (i > $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，我们看一下效果。
第五页数据，《是disabled状态。
当每页50条时，页码只有两页，《 and 》都是disabled。
当我选择每页10条，当点击》的时候，会出现6-10的页码，并且《为enabled，》为disabled。最后最后我再提一下，这个日期的问题
如果是在后端直接return Json的话，如下
[HttpPost]
[OutputCache(Duration = 60)]
public JsonResult GetUserList(FormCollection fc)
{
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>
好了，今天到此结束，更多精彩内容，请看下节。
本文出自 “技术创造价值” 博客，请务必保留此出处http://leelei.blog.51cto.com/856755/1602609
标签：angularjs html5 datalist angular $http.post angular json date
原文地址：http://leelei.blog.51cto.com/856755/1602609
