本文主要介绍了angularjs popup-table 弹出框表格指令，分享给大家，具体如下：
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($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.popupdata,function (item,index) {
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.changeChoose($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.checkallvalue,item);
});
}
}
//选择改变时事件
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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数据在数组中<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>,并返回所在的索引，没有找到则返回-1
function findSelected(data) {
var indexvalue = -1;
if (angular.isUndefined(checkList) || checkList.length <= 0 || primaryKeyFieldName == "")
return indexvalue;
angular.forEach(checkList,index) {
if (indexvalue == -1) {
if (item[primaryKeyFieldName] == data[primaryKeyFieldName]) {
indexvalue = index;
}
}
});
return indexvalue;
}
//判断是否选中
$scope.isChecked = function (rowdata) {
return findSelected(rowdata) > -1;
}
//1、读取网络数据，<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>，<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>
function querySearch(index,searchText) {
if ($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.popupdata != null && $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.popupdata.length > 0)
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.popupdata = null;
//初始化
var p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms = { "SearchKey": searchText,"UserId": $rootS<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.loginUserId };
p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms = angular.extend(p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms,{ "IsGetColumns": index > 0 ? false : true });
//刷新或者<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>的时候需要清空已选择项
if (index > 0)
checkList.splice(0,checkList.length);
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.loading = true;
$(".no-data-div").hide();
serverRequestwithformdata($http,$rootS<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>Url + $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.url + "/PopupList",$.p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m(p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms),function (data) {
console.info(data);
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selectnode) && $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selectnode != null && $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selectnode.length > 0)
checkList = $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selectnode;
}
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.data = data.records;
var sum = data.records.length;
$(".sum").text("共" + sum + "条数据");
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pages = Math.ceil(sum / $rootS<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.PageSize);
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.newPages = $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pages > 5 ? 5 : $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pages;
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a> = [];
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selPage = 1;
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.sumPage = Math.ceil($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.data.length / $rootS<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.popupdata,index) {
if (findSelected(item) > -1)
indexvalue++;
});
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.checkallvalue = (indexvalue == $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.popupdata.length);
}
}
//打印当前选中页索引
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selectPage = function (page) {
if (page < 1 || page > $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pages)
return;
if (page > 2) {
var new<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a> = [];
for (var i = (page - 3) ; i < ((page + 2) > $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pages ? $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pages : (page + 2)) ; i++) {
new<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a>.push(i + 1);
}
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a> = new<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a>;
}
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selPage = page;
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.setData();
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.isActivePage(page);
$(".pages").text("当前第" + page + "页" + "/" + "共" + $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.sumPage + "页");
};
//<a href="https://www.jb51.cc/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.jump = function () {
var page = parseInt($(".jump-bar").val());
if ($(".jump-bar").val() == 0) {
swal("请输入<a href="https://www.jb51.cc/tag/tiaozhuanye/" target="_blank" class="keywords">跳转页</a>数","","error");
return;
}
//不能小于1大于最大
if (page < 1 || page > $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pages) return;
//最多<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>数5
if (page > 2) {
//因为只<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>5个页数，大于2页开始<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>转换
var new<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a> = [];
for (var i = (page - 3) ; i < ((page + 2) > $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pages ? $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.pages : (page + 2)) ; i++) {
new<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a>.push(i + 1);
}
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a> = new<a href="https://www.jb51.cc/tag/Pagelist/" target="_blank" class="keywords">Pagelist</a>;
}
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selPage = page;
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.setData();
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.isActivePage(page);
$(".pages").text("当前第" + page + "页" + "/" + "共" + $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.sumPage + "页");
};
//设置当前选中页样式
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.isActivePage = function (page) {
return $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selPage == page;
};
//<a href="https://www.jb51.cc/tag/shangyiye/" target="_blank" class="keywords">上一页</a>
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.Prev<a href="https://www.jb51.cc/tag/IoU/" target="_blank" class="keywords">IoU</a>s = function () {
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selectPage($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selPage - 1);
}
//<a href="https://www.jb51.cc/tag/xiayiye/" target="_blank" class="keywords">下一页</a>
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.Next = function () {
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selectPage($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.selPage + 1);
};
//<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>弹出框
function closewindow() {
$(".pop-up").stop(true,false).fadeOut();
}
//取消弹出框
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.PopupCancel = function () {
closewindow();
}
//确定
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.PopupOK = function () {
if (primaryKeyFieldName == "" || codeFieldName == "") {
swal("当前未配置返回信息","error");
return;
}
//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>选中的数据,并<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>弹出，然后返回填值
if (angular.isUndefined(checkList) || checkList.length <= 0) {
swal("请勾选要操作的数据","error");
return;
}
var allowMulti = false;
if (angular.isDefined($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.mulitselect)) {
allowMulti = $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.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,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 ($s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.onCallback) {
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.onCallback({ data: checkList,primaryKey: primaryKey,codeKey: codeKey,url: $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.url });
}
}
//刷新
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.PopupRefresh = function () {
$("#searchText").val("");
querySearch(1,"");
}
//新增
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.PopupAdd = function () {
$location.path('/' + $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.routepath).search({ id: '-1',type: $s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.routetype });
}
//<a href="https://www.jb51.cc/tag/sousuo/" target="_blank" class="keywords">搜索</a>
$s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.PopupSearch = function () {
querySearch(1,$("#searchText").val());
}
}
};
}]);
模板的url 页面
rush:js;">
原文地址：https://www.jb51.cc/js/36234.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
