首页 > 代码库 > UEGrids.js
UEGrids.js
最近项目需要，接触了一下angularjs, 感觉双向绑定非常的强大，于是花几个小时的时间，把项目里要实现的一个类似表格数据交换的功能写了一下，angular支持module封装，上手后使用感觉思维也很清晰。于是贴一下主要代码：
首先是页面
<uegrids grids="gridsLeft" selected="selected" width="200"></uegrids>
这个是自定义的uegrids指令，在controller里面我定议了一个数组对象$scope.gridsLeft, 一个变量$scope.selected，和一个元素属性 width = 200;
$scope.gridsLeft = [ { id: "10010", with: "red", value: 0.2000 }, { id: "10010", with: "red", value: 0.2010 }, { id: "10010", with: "red", value: 0.2013 }, { id: "10010", with: "red", value: 0.2014 }, { id: "10010", with: "red", value: 0.2002 }, { id: "10010", with: "red", value: 0.2012 }, { id: "10010", with: "red", value: 0.2020 }, { id: "10010", with: "red", value: 0.2030 }, { id: "10010", with: "red", value: 0.2003 }, { id: "10010", with: "red", value: 0.2013 }, { id: "10010", with: "red", value: 0.2025 }, { id: "10010", with: "red", value: 0.2034 }, { id: "10010", with: "red", value: 0.2005 }, { id: "10010", with: "red", value: 0.2015 }, { id: "10010", with: "red", value: 0.2026 }, { id: "10010", with: "red", value: 0.2038 } ];
$scope.selected = false;
$scope.$watch("selected", function(bool) {
console.log(bool);
});
我使用的是编辑器webstrom 8,代码自动提示完成包含了requirejs、angularjs，真的很方便
然后看下指令部分：
angular.module(‘directives‘, []). factory("setPos", function() { return function(width, rows) { console.time("setPos"); var posArr = [], liW = width/ 4, liH = 25, row = 0, col = 1; for (var row = 0; row < rows; row++) { for (var col = 1; col <= 4; col++) { posArr.push({left:col*liW, top:row*liH}); } } console.timeEnd("setPos"); return posArr; } }). directive(‘uegrids‘, function() { return { restrict: "E", scope: { grids: "=", selected: "=" }, templateUrl: "template/uegrids.html", controller: function($scope, $element, setPos) { // console.info($scope.grids, $element); // this.grids = $scope.grids; var width = $element.attr("width") || 200, rows = $scope.grids.length/ 4, selectedId = null; $scope.setGrid = function(grid) { return grid.with ? grid.with : "gray"; }; $scope.selectGrid = function(event) { if (event.toElement.tagName.toUpperCase() == "LI") { $(event.toElement).parent().find("li").removeClass("active"); $(event.toElement).addClass("active"); var curId = Number(event.toElement.dataset.id), temp; if (curId != selectedId && selectedId !== null) { $scope.selected = true; // 交换数据 temp = $scope.grids[selectedId]; $scope.grids[selectedId] = $scope.grids[curId]; $scope.grids[curId] = temp; console.log("交互后，索引是", selectedId); $(event.toElement).removeClass("active"); selectedId = null; } else { // $scope.selected = false; selectedId = curId; } } event.preventDefault(); return false; }; var gridPos = setPos(width, rows); $scope.setPosition = function(index) { var pos = gridPos[index]; return "left: "+pos.left+"px; top: "+pos.top+"px"; }; }, link: function(scope, element, attribute, ctrl) { /*console.log(scope.grids, element, attribute);*/ var lis = element.find("li"); }, replace: true } })
这里代码有点罗嗦，反正也是第一次写指令，将就一下。然后就是我在requirejs引用了jquery, angualrjs自身有个qlite的dom操作模块，如果检测到引入了jquery,就会优先使用了jquery,我在指令里使用了dom操作。可能这不太符合angualrjs的提倡，但这里只是一个主要思路，并不是一个完整的项目，所以就不按use strict方式来了。
另外发现，在angularjs指令里做循环或计算操作，会使性能下降很快，比如：
<div class="uegrids" ng-click="selectGrid($event)"> <ul> <li ng-class="setGrid(grid)" style="{{setPosition($index)}}" data-id="{{$index}}" ng-repeat="grid in grids">{{grid.value}}</li> </ul></div>
假如我在li里加一个ng-style="setPosition($index, grid)", 然后我在setPosition里面去获取$index, grid，然后一堆的计算位置，不好意思，在directive的controller或link里，可能会抛异常。比较好的做法是在controller里预先计算好位置，存到一个变量里面，这里setPosition($index), 只返回变量的引用值即可，效率很高。
数据的交互同于angular的双向绑定，让开发者减少了很多dom的操作，只需要通过简单的ng-click, ng-bind就可以在controller改变数据的同时，迅速地反映在页面上, 而且更妙的是使用scope: {a: "="},使得指令里的a和业务层controller里的a关联了起来，同时发生改变。
然后我在业务层提交的数据，也是指令层交换后的数据，一点也不需要额外做数据修改的处理。
UEGrids.js