angualr项目table拖拽列宽效果

Posted 2020-10-05 hero

首先要有一个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);
      	// });

　　拖拽效果差不多就这样