詳解angularjs popup-table 彈出框表格指令
更新時(shí)間：2017年09月20日 11:57:49 作者：流蘇1990
本篇文章主要介紹了angularjs popup-table 彈出框表格指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文主要介紹了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();
//監(jiān)視url變化。從而重新讀取數(shù)據(jù)
$scope.$watch('url', function (newVal, oldVal) {
if (oldVal != newVal) {
//設(shè)定全選為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);
});
}
}
//選擇改變時(shí)事件
$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);
}
}
//通過(guò)data數(shù)據(jù)在數(shù)組中查詢(xún),并返回所在的索引，沒(méi)有找到則返回-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、讀取網(wǎng)絡(luò)數(shù)據(jù)，分頁(yè)，搜索
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 });
//刷新或者查詢(xún)的時(shí)候需要清空已選擇項(xiàng)
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 變化導(dǎo)致執(zhí)行=>處理已勾選項(xiàng)=>賦值勾選項(xiàng)。
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 + "條數(shù)據(jù)");
$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("無(wú)數(shù)據(jù)");
}
$scope.setData();
$(".pages").text("當(dāng)前第" + $scope.selPage + "頁(yè)" + "/" + "共" + $scope.sumPage + "頁(yè)");
} else {
$(".no-data-div").show();
$(".no-data-span").val(data.message);
}
}, function (data) {
$scope.loading = false;
$(".no-data-div").show();
$(".no-data-span").val("訪問(wèn)錯(cuò)誤");
});
}
//設(shè)置表格數(shù)據(jù)源(分頁(yè))
$scope.setData = function () {
//通過(guò)當(dāng)前頁(yè)數(shù)篩選出表格當(dāng)前顯示數(shù)據(jù)
$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);
}
}
//打印當(dāng)前選中頁(yè)索引
$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("當(dāng)前第" + page + "頁(yè)" + "/" + "共" + $scope.sumPage + "頁(yè)");
};
//跳轉(zhuǎn)
$scope.jump = function () {
var page = parseInt($(".jump-bar").val());
if ($(".jump-bar").val() == 0) {
swal("請(qǐng)輸入跳轉(zhuǎn)頁(yè)數(shù)", "", "error");
return;
}
//不能小于1大于最大
if (page < 1 || page > $scope.pages) return;
//最多顯示分頁(yè)數(shù)5
if (page > 2) {
//因?yàn)橹伙@示5個(gè)頁(yè)數(shù)，大于2頁(yè)開(kāi)始分頁(yè)轉(zhuǎn)換
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("當(dāng)前第" + page + "頁(yè)" + "/" + "共" + $scope.sumPage + "頁(yè)");
};
//設(shè)置當(dāng)前選中頁(yè)樣式
$scope.isActivePage = function (page) {
return $scope.selPage == page;
};
//上一頁(yè)
$scope.Previous = function () {
$scope.selectPage($scope.selPage - 1);
}
//下一頁(yè)
$scope.Next = function () {
$scope.selectPage($scope.selPage + 1);
};
//關(guān)閉彈出框
function closewindow() {
$(".pop-up").stop(true, false).fadeOut();
}
//取消彈出框
$scope.PopupCancel = function () {
closewindow();
}
//確定
$scope.PopupOK = function () {
if (primaryKeyFieldName == "" || codeFieldName == "") {
swal("當(dāng)前未配置返回信息", "", "error");
return;
}
//獲取選中的數(shù)據(jù),并關(guān)閉彈出，然后返回填值
if (angular.isUndefined(checkList) || checkList.length <= 0) {
swal("請(qǐng)勾選要操作的數(shù)據(jù)", "", "error");
return;
}
var allowMulti = false;
if (angular.isDefined($scope.mulitselect)) {
allowMulti = $scope.mulitselect;
}
var primaryKey = "";
var codeKey = "";
//只存在1個(gè)的情況
if (checkList.length == 1) {
primaryKey = checkList[0][primaryKeyFieldName];
codeKey = checkList[0][codeFieldName];
} else {
//存在多個(gè)
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 頁(yè)面
<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="請(qǐng)輸入查詢(xún)條件">
<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="查詢(xún)" class="cBlue" style="padding: 5px 10px !important">
<span>查詢(xún)</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">序號(hào)</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">無(wú)數(shù)據(jù)</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條數(shù)據(jù)</span>
<span class="pages">當(dāng)前第1頁(yè)/共1頁(yè)</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>
調(diào)用：
//打開(kāi)彈出框
$scope.openpop = function (type) {
$(".pop-up").stop(true, false).fadeIn();
//根據(jù)綁定值進(jìn)行讀取操作
if (type == "SearchHistory") {
//請(qǐng)求數(shù)據(jù)即可.讀取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) {
//根據(jù)url存儲(chǔ)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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- angularjs表格ng-table使用備忘錄
- AngularJS ng-table插件設(shè)置排序
- Angularjs+bootstrap+table多選（全選）支持單擊行選中實(shí)現(xiàn)編輯、刪除功能
- angularJs中datatable實(shí)現(xiàn)代碼
- AngularJS中table表格基本操作示例
- angularjs實(shí)現(xiàn)table增加tr的方法
- 對(duì)比分析Django的Q查詢(xún)及AngularJS的Datatables分頁(yè)插件
- angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
相關(guān)文章
AngularJS入門(mén)（用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出
這篇文章主要介紹了AngularJS入門(mén)（用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出,需要的朋友可以參考下2016-05-05
使用ngView配合AngularJS應(yīng)用實(shí)現(xiàn)動(dòng)畫(huà)效果的方法
這篇文章主要介紹了使用ngView配合AngularJS應(yīng)用實(shí)現(xiàn)動(dòng)畫(huà)效果的方法,AngularJS是十分熱門(mén)的JavaScript庫(kù),需要的朋友可以參考下2015-06-06
本篇文章主要介紹了如何在Angular2中使用jQuery及其插件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Angular.JS中的指令引用template與指令當(dāng)做屬性詳解
這篇文章主要介紹了Angular.JS中的指令引用template與指令當(dāng)做屬性的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
體驗(yàn)jQuery和AngularJS的不同點(diǎn)及AngularJS的迷人之處
AngualrJS是一個(gè)很貼心的web應(yīng)用框架，本篇通過(guò)jQuery和Angular兩種方式來(lái)實(shí)現(xiàn)同一個(gè)實(shí)例，從而體驗(yàn)兩者的不同點(diǎn)以及AngularJS的迷人之處2016-02-02
本文通過(guò)對(duì)比幾種Angular組件間的通信方式,給大家介紹了一種新的Angular組件間通信的解決方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
實(shí)例詳解angularjs和ajax的結(jié)合使用
本篇文章給大家介紹angularjs和ajax的結(jié)合使用，本文介紹的非常詳細(xì)，對(duì)angularjs和ajax感興趣的朋友一起參考下吧2015-10-10
這篇文章主要介紹了 AngularJS 所有版本下載地址的相關(guān)資料,需要的朋友可以參考下2016-09-09
AngularJS實(shí)現(xiàn)DOM元素的顯示與隱藏功能
這篇文章主要介紹了AngularJS實(shí)現(xiàn)DOM元素的顯示與隱藏功能,涉及AngularJS中ng-hide與ng-show兩個(gè)屬性的使用,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了angular表單驗(yàn)證的相關(guān)知識(shí),angular來(lái)驗(yàn)證可以定義樣式的，下文通過(guò)代碼給大家實(shí)例介紹下，需要的朋友可以參考下2016-10-10