Angularjs Table

/**
* @author Warren Lee
* @Dec Angularjs 表格组件
* @Date 2018-05-25
* **/
(function () {
'use strict';
/**
* 定义模块名
*/
var ngTableWL = angular.module('ngTableWL', ['ui.bootstrap', 'ngSanitize']);

/**
*定义HTML模板
*/
ngTableWL.run(["$templateCache", function ($templateCache) {
$templateCache.put('tableWL.html',
"<div class="table-responsive" ng-style="tablestyle">" +
"<table class="table table-bordered table-hover table-condensed information">" +
"<div class="from_top_style"></div>" +
"<thead>" +
"<tr class="table_header">" +
"<th style='text-align: center;'>" +
"<label>" +
"<input class="check_radio" ng-click='checkedAll($event)' type="checkbox" >" +
"<span class="check_checkbox check_radioInput"></span>" +
"</label>" +
"</th>" +
"<th ng-repeat='th in columns track by $index' style='text-align: center;'>{{th.text}}</th>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"<tr ng-repeat='row in QueryData track by $index' ng-click='onRowClick($event,row,$index)' ng-dblclick='onRowDbClick($event,row,$index)'>" +
"<td style='text-align: center;'>" +
"<label>" +
"<input ng-click='checkedRow(row)' class="check_radio" ng-checked='isChecked(row)' type="checkbox" >" +
"<span class="check_checkbox check_radioInput"></span>" +
"</label>" +
"</td>" +
"<td ng-repeat='td in columns track by $index' ng-click='onCellClick($event,row[td.key],row,td)' td-render ng-bind-html='template(row,td)' style='text-align: center;'></td>" +
"</tr>" +
"</tbody>" +
"</table>" +
"</div>" +
"<div ng-if='showPaging'>" +
"<nav>" +
"<pagination total-items="paging.totalItems" ng-model="paging.pageNum" items-per-page="{{paging.items}}" ng-change="onPageChange()" num-pages="paging.totalPage" max-size="paging.maxSize" rotate="true" force-ellipses="true" first-text="首页" previous-text="<" next-text=">" last-text="尾页" boundary-links="true" boundary-link-numbers="true"></pagination>" +
"<input class="skip_import" />" +
"<a href="" class="skip">跳转</a>" +
"<span class="sum_to">共<i>{{paging.totalItems}}</i>条数据</span>" +
"</nav>" +
"</div>"
);
}]);
/**
*控制器
*/
ngTableWL.controller('ngTableController', ['$scope', 'tableFactory', 'tableService', '$sce', function ($scope, fac, service, $sce) {

$scope.tableId = $scope;
/** 定义初始化属性 Start **/
$scope.url = $scope.option.ajax_url || null;

$scope.tablestyle = $scope.option.style || null;

// 查询结果
$scope.QueryData = [];
// 查询条件
$scope.params = {
pSize: 20,
cPage: 1
};
// 当前选中数据
$scope.selectedArray = [];
// 是否单选 默认不单选
$scope.singerSelect = $scope.option.singerSelect === true ? true : false;
// 是否显示复选框 默认显示
$scope.showCheckBox = $scope.option.showCheckBox === false ? false : true;
// 是否显示分页栏 默认显示
$scope.showPaging = $scope.option.showPaging === false ? false : true;
// 分页对象
$scope.paging = {
// 当前页数
pageNum: 1,
// 总数
totalItems: 0,
//总页数
totalPage: 0,
// 每页显示数量
items: 20,
// 最大显示页数
maxSize: $scope.option.maxPageSize || 10
};
// 列定义
$scope.columns = $scope.option.columnData;

/** 定义初始化属性 End **/

if (angular.isObject($scope.option.params)) {
angular.extend($scope.params, $scope.option.params);
}

/** 数据查询 **/
$scope.query = function (params) {
angular.extend($scope.params, { cPage: 1, pSize: 20 }, params);
fac.query($scope.url, $scope.params, function (response) {
$scope.QueryData = [];
$scope.paging.totalItems = response.TotalCount;
$scope.QueryData = response.Data;
//查询清空已选
$scope.selectedArray = [];
//$scope.paging.totalItems = response.totals;
//$scope.QueryData = response.data;
})
};

/** 数据刷新 **/
$scope.refresh = function () {
fac.query($scope.url, $scope.params, function (response) {
$scope.paging.totalItems = response.TotalCount;
$scope.QueryData = response.Data;
//查询清空已选
$scope.selectedArray = [];
})
};

/** 页数变化事件 **/
$scope.onPageChange = function () {
$scope.query({
pSize: 20,
cPage: $scope.paging.pageNum
});
};
/** 行点击事件 **/
$scope.onRowClick = function ($event, row, index) {
$scope.rowClick({ rowData: row, index: index });
};
/** 行双击事件 **/
$scope.onRowDbClick = function ($event, row, index) {
$scope.rowDbClick({ rowData: row, index: index });
};
/** 单元格点击 **/
$scope.onCellClick = function ($event, cell, row, col) {
$scope.cellClick({ cellData: cell, rowData: row, col: col });
};
/** 全选与反选 **/
$scope.checkedAll = function ($event) {
if ($($event.target).is(':checked')) {
angular.copy($scope.QueryData, $scope.selectedArray);
} else {
$scope.selectedArray = [];
}
};
/** 复选框点击事件 **/
$scope.checkedRow = function (row) {
var rowCopy = {};
angular.copy(row, rowCopy);
var arrayStr = JSON.stringify($scope.selectedArray), objectStr = JSON.stringify(rowCopy);
var bol = arrayStr.indexOf(objectStr) >= 0
if (arrayStr.indexOf(objectStr + ",") >= 0) {
objectStr = objectStr + ",";
} else if ($scope.selectedArray.length > 1 && arrayStr.indexOf(objectStr + "]") >= 0) {
objectStr = "," + objectStr;
}
if (bol) {
var newArray = arrayStr.split(objectStr).join("");
$scope.selectedArray = JSON.parse(newArray);
} else {
$scope.selectedArray.push(rowCopy);
}
};

$scope.isChecked = function (row) {
var arrayStr = JSON.stringify($scope.selectedArray), objectStr = JSON.stringify(row);
return arrayStr.indexOf(objectStr) >= 0
};
/** 单元格渲染 **/
$scope.template = function (row, col) {
if (col.template) {
try {
var result = col.template(row[col.key], row);
return $sce.trustAsHtml(result);
} catch (e) { return ""; }
} else {
return row[col.key];
}
};

/** 获得选中行 **/
$scope.getSlected = function () {
return $scope.selectedArray;
};
/** 设置行选中 **/
$scope.setSlected = function (key, dataList) {
var opera = angular.isArray(dataList);
if (opera) {
angular.forEach(dataList, function (data, index, array) {
for (var i = 0; i < $scope.QueryData.length; i++) {
var row = $scope.QueryData[i];
if (row[key] == data) {
var arrayStr = JSON.stringify($scope.selectedArray), objectStr = JSON.stringify(row);
if (arrayStr.indexOf(objectStr) === -1) {
var rowObj = {};
angular.copy(row, rowObj);
$scope.selectedArray.push(rowObj);
}
}
}
})
}
}

/** 默认执行查询 **/
$scope.query();
}]);
/**
*Factory
*/
ngTableWL.factory('tableFactory', ['$http', function ($http) {
return {
query: function (url, params, callback) {
$http.post(url, params).success(function (data) {
callback(data);
});
}
}
}]);
/**
*Service
*/
ngTableWL.service('tableService', [function () {
this.test = function () { };
}]);
/**
* 指令
* **/
ngTableWL.directive('ngTableWL', function () {
return {
restrict: 'EA',
templateUrl: 'tableWL.html',
controller: 'ngTableController',
scope: {
option: '=',
tableId: '=',
rowClick: '&',
rowDbClick: '&',
cellClick: '&'
},
link: function ($scope, element, attr) {
}
}
});

/**
* TD
* **/
ngTableWL.directive('tdRender', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.on('mouseenter', function () {
var self = $(element[0].children).scope();
if (self != scope.$parent.$parent.$parent) {
$compile(element[0].children)(scope.$parent.$parent.$parent);
}
});
}
}
});

})();