详解angularjs popup-table 弹出框表格指令

本文主要介绍了angularjs popup-table 弹出框表格指令,分享给大家,具体如下:

//表格处理

app.directive('popupTable', ['$http', '$rootScope', '$cookies', '$location', function ($http, $rootScope, $cookies, $location) {

return {

restrict: 'E',

templateUrl: 'popuptable_templete.html',

scope: {

url: '=',

routepath: '=?',

routetype: '=?',

onCallback: '&',

mulitselect: '=',

selectnode: '=?'

},

link: function ($scope, element, attrs) {

$scope.myValue = false;

$scope.checkallvalue = false;

var primaryKeyFieldName = "";

var codeFieldName = "";

$scope.showAddButton = true;

$scope.showRefreshButton = true;

var checkList = new Array();

//监视url变化。从而重新读取数据

$scope.$watch('url', function (newVal, oldVal) {

if (oldVal != newVal) {

//设定全选为false

$scope.checkallvalue = false;

querySearch(0, "");

}

});

//选择所有

$scope.checkall = function () {

if (angular.isDefined($scope.popupdata) && $scope.popupdata.length > 0) {

angular.forEach($scope.popupdata, function (item, index) {

$scope.changeChoose($scope.checkallvalue, item);

});

}

}

//选择改变时事件

$scope.changeChoose = function (check, data) {

var index = findSelected(data);

if (check) {

if (index <= -1)

checkList.push(data);

} else {

if (index > -1)

checkList.splice(index, 1);

}

}

//通过data数据在数组中查询,并返回所在的索引,没有找到则返回-1

function findSelected(data) {

var indexvalue = -1;

if (angular.isUndefined(checkList) || checkList.length <= 0 || primaryKeyFieldName == "")

return indexvalue;

angular.forEach(checkList, function (item, index) {

if (indexvalue == -1) {

if (item[primaryKeyFieldName] == data[primaryKeyFieldName]) {

indexvalue = index;

}

}

});

return indexvalue;

}

//判断是否选中

$scope.isChecked = function (rowdata) {

return findSelected(rowdata) > -1;

}

//1、读取网络数据,分页,搜索

function querySearch(index, searchText) {

if ($scope.popupdata != null && $scope.popupdata.length > 0)

$scope.popupdata = null;

//初始化

var params = { "SearchKey": searchText, "UserId": $rootScope.loginUserId };

params = angular.extend(params, { "IsGetColumns": index > 0 ? false : true });

//刷新或者查询的时候需要清空已选择项

if (index > 0)

checkList.splice(0, checkList.length);

$scope.loading = true;

$(".no-data-div").hide();

serverRequestwithformdata($http, $rootScope.SystemUrl + $scope.url + "/PopupList", $.param(params), function (data) {

console.info(data);

$scope.loading = false;

if (data.status == "ok") {

if (index <= 0) {

$scope.title = data.windowTitle;

$scope.columnlist = data.colums;

$scope.showAddButton = data.ShowAdd;

$scope.showRefreshButton = data.ShowRefresh;

primaryKeyFieldName = data.primayKey;

codeFieldName = data.codeField;

//url 变化导致执行=>处理已勾选项=>赋值勾选项。

if (checkList.length > 0)

checkList.splice(0, checkList.length);

if (angular.isDefined($scope.selectnode) && $scope.selectnode != null && $scope.selectnode.length > 0)

checkList = $scope.selectnode;

}

$scope.data = data.records;

var sum = data.records.length;

$(".sum").text("共" + sum + "条数据");

$scope.pages = Math.ceil(sum / $rootScope.PageSize);

$scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;

$scope.pageList = [];

$scope.selPage = 1;

$scope.sumPage = Math.ceil($scope.data.length / $rootScope.PageSize);

for (var i = 0; i < $scope.newPages; i++) {

$scope.pageList.push(i + 1);

}

if (sum == 0) {

$(".no-data-div").show();

$(".no-data-span").val("无数据");

}

$scope.setData();

$(".pages").text("当前第" + $scope.selPage + "页" + "/" + "共" + $scope.sumPage + "页");

} else {

$(".no-data-div").show();

$(".no-data-span").val(data.message);

}

}, function (data) {

$scope.loading = false;

$(".no-data-div").show();

$(".no-data-span").val("访问错误");

});

}

//设置表格数据源(分页)

$scope.setData = function () {

//通过当前页数筛选出表格当前显示数据

$scope.popupdata = $scope.data.slice(($rootScope.PageSize * ($scope.selPage - 1)), ($scope.selPage * $rootScope.PageSize));

if (angular.isDefined($scope.popupdata) && $scope.popupdata.length > 0) {

var indexvalue = 0;

angular.forEach($scope.popupdata, function (item, index) {

if (findSelected(item) > -1)

indexvalue++;

});

$scope.checkallvalue = (indexvalue == $scope.popupdata.length);

}

}

//打印当前选中页索引

$scope.selectPage = function (page) {

if (page < 1 || page > $scope.pages)

return;

if (page > 2) {

var newpageList = [];

for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) {

newpageList.push(i + 1);

}

$scope.pageList = newpageList;

}

$scope.selPage = page;

$scope.setData();

$scope.isActivePage(page);

$(".pages").text("当前第" + page + "页" + "/" + "共" + $scope.sumPage + "页");

};

//跳转

$scope.jump = function () {

var page = parseInt($(".jump-bar").val());

if ($(".jump-bar").val() == 0) {

swal("请输入跳转页数", "", "error");

return;

}

//不能小于1大于最大

if (page < 1 || page > $scope.pages) return;

//最多显示分页数5

if (page > 2) {

//因为只显示5个页数,大于2页开始分页转换

var newpageList = [];

for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) {

newpageList.push(i + 1);

}

$scope.pageList = newpageList;

}

$scope.selPage = page;

$scope.setData();

$scope.isActivePage(page);

$(".pages").text("当前第" + page + "页" + "/" + "共" + $scope.sumPage + "页");

};

//设置当前选中页样式

$scope.isActivePage = function (page) {

return $scope.selPage == page;

};

//上一页

$scope.Previous = function () {

$scope.selectPage($scope.selPage - 1);

}

//下一页

$scope.Next = function () {

$scope.selectPage($scope.selPage + 1);

};

//关闭弹出框

function closewindow() {

$(".pop-up").stop(true, false).fadeOut();

}

//取消弹出框

$scope.PopupCancel = function () {

closewindow();

}

//确定

$scope.PopupOK = function () {

if (primaryKeyFieldName == "" || codeFieldName == "") {

swal("当前未配置返回信息", "", "error");

return;

}

//获取选中的数据,并关闭弹出,然后返回填值

if (angular.isUndefined(checkList) || checkList.length <= 0) {

swal("请勾选要操作的数据", "", "error");

return;

}

var allowMulti = false;

if (angular.isDefined($scope.mulitselect)) {

allowMulti = $scope.mulitselect;

}

var primaryKey = "";

var codeKey = "";

//只存在1个的情况

if (checkList.length == 1) {

primaryKey = checkList[0][primaryKeyFieldName];

codeKey = checkList[0][codeFieldName];

} else {

//存在多个

if (allowMulti == false) {

primaryKey = checkList[0][primaryKeyFieldName];

codeKey = checkList[0][codeFieldName];

} else {

angular.forEach(checkList, function (item, index) {

primaryKey += item[primaryKeyFieldName] + ",";

codeKey += item[codeFieldName] + ",";

});

}

}

if (primaryKey.endsWith(","))

primaryKey = primaryKey.substring(0, primaryKey.length - 1);

if (codeKey.endsWith(","))

codeKey = codeKey.substring(0, codeKey.length - 1);

closewindow();

if ($scope.onCallback) {

$scope.onCallback({ data: checkList, primaryKey: primaryKey, codeKey: codeKey, url: $scope.url });

}

}

//刷新

$scope.PopupRefresh = function () {

$("#searchText").val("");

querySearch(1, "");

}

//新增

$scope.PopupAdd = function () {

$location.path('/' + $scope.routepath).search({ id: '-1', type: $scope.routetype });

}

//搜索

$scope.PopupSearch = function () {

querySearch(1, $("#searchText").val());

}

}

};

}]);

模板的url 页面

<script type="text/javascript">

$(function () {

//全选

$(".Pagingjump-check").click(function () {

if (this.checked) {

$(this).parents().parents().parents(".tDefault").find(".table-checked").each(function () {

this.checked = true;

})

}

if (!this.checked) {

$(this).parents().parents().parents(".tDefault").find(".table-checked").each(function () {

this.checked = false;

})

}

});

})

</script>

<div class="pop-up-content">

<div class="pop-up-table-title">{{title}}</div>

<div class="pop-up-table-search">

<input id="searchText" type="text" class="input-search" size="30" placeholder="请输入查询条件">

<ul class="middleFree block-button-panel-ul pop-up-table-search-btn">

<li ng-click="PopupSearch()">

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="查询" class="cBlue" style="padding: 5px 10px !important">

<span>查询</span>

</a>

</li>

</ul>

</div>

<div>

<div class="pop-up-table-panel" style="border-top: 1px solid #DFDFDF">

<table class="tDefault pop-up-table search-block-process-table">

<tr nf-if="columnlist.length>0" style="border-top:0px">

<td style="width:30px !important">

<input id="titleCheck-all" class="Pagingjump-check" name="checkRow" type="checkbox" ng-model="checkallvalue" ng-change="checkall()" >

</td>

<td class="table-width1" style="width:50px !important">序号</td>

<td ng-repeat="column in columnlist |orderBy:column.PopupColumnOrder" width="{{column.PopupDefaultWidth}}" ng-click="col='{{column.ColumnName}}';" ng-show="{{column.IsPopoupColumn}}">{{column.DisplayColumnName}}</td>

</tr>

<tr ng-repeat="data in popupdata">

<!--ng-checked-->

<td><input class="table-checked" name="checkRow" type="checkbox" ng-model="data.selected" ng-change="changeChoose(data.selected,data)" ng-checked="isChecked(data)"></td>

<td>{{ $index + 1 }}</td>

<td class="table-textalign-left" ng-repeat="column in columnlist|orderBy:column.PopupColumnOrder" ng-show="{{column.IsPopoupColumn}}" datacolumn="{{column.ColumnName}}">{{data[column.ColumnName]}}</td>

</tr>

</table>

<div class="no-data-div">

<span class="no-data-span">无数据</span>

</div>

<div class="loading-page" style="height:300px !important;" ng-if="loading">

<div class='uil-default-css' style='transform: scale(0.2); width: 100% !important; height: 300px !important;'>

<div class="loadingpoint" style=' -webkit-transform:rotate(0deg) translate(0,-60px) ; transform:rotate(0deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(30deg) translate(0,-60px); transform: rotate(30deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(60deg) translate(0,-60px); transform: rotate(60deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(90deg) translate(0,-60px); transform: rotate(90deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(120deg) translate(0,-60px); transform: rotate(120deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(150deg) translate(0,-60px); transform: rotate(150deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(180deg) translate(0,-60px); transform: rotate(180deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(210deg) translate(0,-60px); transform: rotate(210deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(240deg) translate(0,-60px); transform: rotate(240deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(270deg) translate(0,-60px); transform: rotate(270deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(300deg) translate(0,-60px); transform: rotate(300deg) translate(0,-60px);'></div>

<div class="loadingpoint" style=' -webkit-transform: rotate(330deg) translate(0,-60px); transform: rotate(330deg) translate(0,-60px);'></div>

</div>

</div>

</div>

<div class="block-button-panel2">

<div class="table-pagingjump-div" style="bottom: 0px;width: 100%;height: 35px;padding: 4px;">

<div class="Pagingjump-function-panel" style="float:right;width:auto">

<nav>

<ul class="pagination Pagingjump-function-ul Pagingjump-table-ul">

<li>

<input type="text" style="padding: 2px 2px 3px 2px!important;width:40px" class="jump-bar" size="5" value="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />

</li>

<li>

<a ng-click="jump()" class="table-pagination-a">

<div class="fs1 iconb" data-icon=""></div>

</a>

</li>

</ul>

</nav>

</div>

<div class="Pagingjump-check-panel-table" style="float:right">

<span class="sum">共0条数据</span>

<span class="pages">当前第1页/共1页</span>

</div>

<div class="Pagingjump-function-panel" style="float:left">

<nav>

<ul class="pagination Pagingjump-function-ul Pagingjump-table-ul">

<li>

<a ng-click="Previous()" class="table-pagination-a">

<div class="fs1 iconb" data-icon=""></div>

</a>

</li>

<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" class="table-pagination-a">

<a ng-click="selectPage(page)">{{ page }}</a>

</li>

<li>

<a ng-click="Next()" class="Pagingjump-function-nextpage table-pagination-a">

<div class="fs1 iconb" data-icon=""></div>

</a>

</li>

</ul>

</nav>

</div>

</div>

</div>

<div class="pop-up-button-panel">

<div class="block-button-panel-left">

<ul class="middleFree block-button-panel-ul">

<li ng-click="PopupAdd()" ng-if="showAddButton">

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="新增" class="cBlue" style="padding: 5px 10px !important">

<span>新增</span>

</a>

</li>

</ul>

</div>

<div class="block-button-panel-right">

<ul class="middleFree block-button-panel-ul">

<li ng-click="PopupRefresh()" ng-if="showRefreshButton">

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="刷新" class="cBlue">

<span>刷新</span>

</a>

</li>

<li ng-click="PopupOK()">

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="确定" class="cBlue">

<span>确定</span>

</a>

</li>

<li ng-click="PopupCancel()">

<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="取消" class="cRed">

<span>取消</span>

</a>

</li>

</ul>

</div>

</div>

</div>

</div>

调用:

//打开弹出框

$scope.openpop = function (type) {

$(".pop-up").stop(true, false).fadeIn();

//根据绑定值进行读取操作

if (type == "SearchHistory") {

//请求数据即可.读取List接口

} else {

//读取PopupList接口

$scope.routetype = "ReturnPopup";

if (type == "process")

$scope.routepath = "ProcessDetail";

else if (type == "productmodel")

$scope.routepath = "ProductModelDetail";

var temp = $cookies.get(type + "checkcache");

if (angular.isDefined(temp) && temp != null)

$scope.selectnode = jQuery.parseJSON(temp);

$scope.urlpart = type;

}

}

$scope.popupcallback = function (data, primaryKey, codeKey, url) {

//根据url存储data

if (data != null & data.length > 0)

$cookies.put(url + "checkcache", JSON.stringify(data));

if (url == "process") {

$scope.selectprocessNametip = codeKey;

$scope.selectprocessIdtip = primaryKey;

}

else if (url == "productmodel") {

$scope.selectproductNametip = codeKey;

$scope.selectproductIdtip = primaryKey;

}

}

<!--表格弹框-->

<div class="pop-up">

<popup-table url="urlpart" routepath="routepath" routetype="routetype" on-callback="popupcallback(data,primaryKey, codeKey,url)" mulitselect="true" selectnode="selectnode"></popup-table>

</div>

以上是 详解angularjs popup-table 弹出框表格指令 的全部内容, 来源链接: utcz.com/z/339964.html

回到顶部