首先要有一个table的html列表 我就不上了，因为加载有异步的问题，所以我把js代码放到一个封装函数里面，表格加载出来之后调用函数，这个表格的dom就能找到了。下面是封装的js代码
//拖拽调整列宽
$rootScope.searchTable= function(){
var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
var table = document.getElementsByClassName(‘table‘);
console.log(table);
for (j = 0; j < table[0].rows[0].cells.length; j++) {
table[0].rows[0].cells[j].onmousedown = function () {
//记录单元格
tTD = this;
if (event.offsetX > tTD.offsetWidth - 10) {
tTD.mouseDown = true;
tTD.oldX = event.x;
tTD.oldWidth = tTD.offsetWidth;
}
//记录Table宽度
//table = tTD; while (table.tagName != ‘TABLE‘) table = table.parentElement;
//tTD.tableWidth = table.offsetWidth;
};
table[0].rows[0].cells[j].onmouseup = function () {
//结束宽度调整
if (tTD == undefined) tTD = this;
tTD.mouseDown = false;
tTD.style.cursor = ‘default‘;
};
table[0].rows[0].cells[j].onmousemove = function () {
//更改鼠标样式
if (event.offsetX > this.offsetWidth - 10)
this.style.cursor = ‘col-resize‘;
else
this.style.cursor = ‘default‘;
//取出暂存的Table Cell
if (tTD == undefined) tTD = this;
//调整宽度
if (tTD.mouseDown != null && tTD.mouseDown == true) {
tTD.style.cursor = ‘default‘;
if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
//调整列宽
tTD.style.width = tTD.width;
tTD.style.cursor = ‘col-resize‘;
//调整该列中的每个Cell
table[0] = tTD;
while (table[0].tagName != ‘TABLE‘) table = table[0].parentElement;
for (j = 0; j < table[0].rows.length; j++) {
table[0].rows[j].cells[tTD.cellIndex].width = tTD.width;
}
//调整整个表
//table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
//table.style.width = table.width;
}
};
}
}
//下面是加载数据 调用函数的方法
//列表搜索控制
$rootScope.pagessizes = [10,20,50,100,500];
$rootScope.getApiListFn = function (clearPage) {
$rootScope.searchTable();
// console.log(clearPage);
$rootScope.allCheckState=false;
$rootScope.apiState.apiLoading = true;
// console.log($rootScope.posts);
var sendData = angular.copy($rootScope.posts);
sendData.pageNum = clearPage ? 1 : sendData.pageNum;
// if (clearPage==undefined) {
// sendData.pageNum=1;
// }
// if (sendData.starttime) {
// var starttime = $filter("date")(sendData.starttime, ‘yyyy-MM-dd‘) + " 00:00:00";
// sendData.starttime = new Date(starttime).getTime();
// }
// if (sendData.orderTime) {
// sendData.orderTime = new Date(sendData.orderTime).getTime();
// }
// if (sendData.endtime) {
// var endtime = $filter("date")(sendData.endtime, ‘yyyy-MM-dd‘) + " 23:59:59";
// sendData.endtime = new Date(endtime).getTime();
// }
// $rootScope.pages={};
// sendData.pageSize = 10; //每页多少个
$http.post($rootScope.searchApi,sendData,$rootScope.postCfg).success(function(data){
$rootScope.apiState.apiLoading = false;
$rootScope.apiResultList=data.model.list;
// $rootScope.posts = {};
// $rootScope.postss = data.model;
if (!data) {
data.model = {
list: [],
total: 0
};
}
$rootScope.pages = data.model;
// console.log(pages);
// $rootScope.pages = data.model.navigatepageNums;
$rootScope.pages.pageTotal =true;
$rootScope.dataTotal = data.model.total;
console.log($rootScope.pages);
});
// api($rootScope.searchApi, {
// data: sendData
// }).then(function (data) {
// $rootScope.apiState.apiLoading = false;
// if (!data) {
// data = {
// list: [],
// total: 0
// };
// }
// $rootScope.apiResultList = data.list || data.commodityList|| data || [];
// // console.log($rootScope.apiResultList)
// var pages = Paging(sendData, (data.total || data.countNumber));
// $rootScope.pages = pages.pages;
// $rootScope.pageTotal = pages.pageTotal;
// $rootScope.dataTotal = data.total;
// });
};
$rootScope.pageGo = function (index) {
$rootScope.posts.pageNum = index;
$rootScope.getApiListFn();
};
$rootScope.value="1";
$rootScope.resetPagesize=function(value){
// console.log(value);
if (value=="0") {
$rootScope.posts.pageSize=10;
}
if (value=="1") {
$rootScope.posts.pageSize=20;
}
if (value=="2") {
$rootScope.posts.pageSize=50;
}
if (value=="3") {
$rootScope.posts.pageSize=100;
}
if (value=="4") {
$rootScope.posts.pageSize=500;
}
console.log($rootScope.posts);
// console.log($event);
// console.log($parent.Carts.CartItemList[$index].Selected);
// $rootScope.posts.pageSize = $rootScope.posts.pageSize;
$rootScope.getApiListFn();
}
$rootScope.search = function () {
// console.log(value);
// console.log($rootScope.posts);
// console.log(data);
$rootScope.getApiListFn();
};
$rootScope.resetAll = function () {
$rootScope.posts = {};
$rootScope.posts.pageNum=1;
$rootScope.posts.pageSize=20;
$rootScope.getApiListFn();
// $state.reload();
};
// $scope.resetLis="全部";
// $(‘icon‘).on("click",function(){
// $(‘icon‘).toggleClass(‘icons‘)
// })
// $http.post("http://10.224.171.24:8089/cps-cas-web/helper/validateImg",{
// pageNum:1,
// pageSize:20
// },postCfg).success(function(data){
// $scope.imgass = data;
// console.log(data);
// });
拖拽效果差不多就这样
时间： 2024-08-07 00:18:47