首先要有一个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);
// });
拖拽效果差不多就这样