angularjs 封装的表格组件

已于 2022-02-12 11:08:41 修改
阅读量857 收藏 2
点赞数 1
文章标签： angular.js css html
于 2022-02-11 14:06:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25919495/article/details/122879381
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>an-table</title>
  <script src="./angular.js"></script>
  <link href="./css/font-awesome.css" rel="stylesheet">
</head>

<style>
  * {
    padding: 0;
    margin: 0;
    font-size: 14px;
  }

  .main {
    width: 80%;
    margin: 50px auto;
  }


  .agTables {
    overflow: auto;
    position: relative;
  }

  .agTables table {
    border-collapse: collapse;
    width: 100%;
  }

  .agTables .line {
    display: none;
    width: 1px;
    height: 100%;
    background: #dedede;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }

  .agTables table td,
  .agTables table th {
    border-collapse: collapse;
    border: 1px solid #dadee5;
    box-sizing: border-box;
  }

  .agTables table .cell {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 6px;
    box-sizing: border-box;
  }

  .agTables .t-header table {
    width: auto;
  }

  .agTables .t-header table th {
    background-color: #f5f7fa;
    position: relative;
  }

  .agTables .t-header table .sort {
    position: absolute;
    right: 10px;
    top: 10%;
    width: 18px;
    height: 80%;
    display: block;
    color: #bbb;
  }

  .agTables .t-header table .sort i {
    display: block;
    cursor: pointer;
    line-height: 12px;
  }

  .agTables .t-header table .sort i:hover {
    color: #666;
  }

  .agTables .t-header input[type=checkbox] {
    float: left;
  }

  .agTables .t-body {
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
    margin-top: -1px;
    border-bottom: 1px solid #dadee5;
  }

  .agTables .hide {
    display: none;
  }
</style>

<body>


  <!-- angularjs -->
  <div ng-app="app" ng-controller="appCtrl" class="main">

    <ag-tables data="tableData" height='250' row-click="click_Fn(row)" row-dblclick="dbClick_Fn(row)"
      selection-change="checkFn(data)">

      <ag-tables-column width="30" type="selection"></ag-tables-column>

      <ag-tables-column prop="name" label="名字" width="180" sortable>
        <b ng-click="testFn(row)">名字_槽 : {{row.name}}</b>
      </ag-tables-column>

      <ag-tables-column prop="date" label="日期" sortable width="120"></ag-tables-column>

      <ag-tables-column prop="val" label="选值">
        <select ng-change="change(row,event)" ng-model="row.val">
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </ag-tables-column>

      <ag-tables-column prop="address" label="地址" sortable></ag-tables-column>

      <ag-tables-column prop="address" label="地址" width="100">
        <button ng-click="del(row)">删除</button>
      </ag-tables-column>

    </ag-tables>

  </div>

  <script>
    /*
      需求: 
      01: 基本数据传递, 指令间数据嵌套
      02: 自定义指令内嵌入模板
      03: 自定义指令内,如何获取当前渲染的数据
      04: 全选select
      06: 表格单击+双击
    */
    const app = angular.module('app', []);
    app.controller('appCtrl', function ($scope, $element) {

      $scope.tableData = [{
        date: '2016-05-02',
        name: '1王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        val: '1'
      },
      {
        date: '2016-05-04',
        name: '3李连杰',
        address: '新加坡普陀区金沙江路 1517 弄',
        val: '1'
      }, {
        date: '2016-05-03',
        name: '2李连杰',
        address: '新加坡普陀区金沙江路 1517 弄',
        val: '2'
      }, {
        date: '2016-05-02',
        name: '1王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        val: '1'
      },
      {
        date: '2016-05-04',
        name: '3李连杰',
        address: '新加坡普陀区金沙江路 1517 弄',
        val: '1'
      }, {
        date: '2016-05-03',
        name: '2李连杰',
        address: '新加坡普陀区金沙江路 1517 弄',
        val: '2'
      }];

      $scope.del = function (row) {
        $scope.tableData = $scope.tableData.filter(val => val.name != row.name);
      };

      // 插槽: 绑定事件
      $scope.change = function (row) {
        console.log(row, 'change');
      };

      $scope.testFn = function (row) {
        console.log(row, 'testFn');
      };

      // 表格: 点击 + 双击
      $scope.click_Fn = function (row) {
        console.log('___click_Fn_');
      };

      $scope.dbClick_Fn = function (row) {
        console.log('__dbClick_Fn');
      };


      // 表格: 选中
      $scope.checkFn = function (data) {
        console.log(data, 'checkFn');
      };

    });


    // 和控制器,数据共享
    // agTables
    app.directive('agTables', function () {
      return {
        scope: {
          data: '=?',
          height: '=?',
          rowClick: '&',
          rowDblclick: '&',
          selectionChange: '&'
        },
        restrict: 'AE',
        replace: true,
        transclude: true,
        template: `
        <div class='agTables'>
          <div class="line"></div>
          <ag-tables-head></ag-tables-head>
          <ag-tables-body height="{{height}}" >
            <div ng-transclude></div>
          </ag-tables-body>
        </div>
        `,
        controller: function ($scope) {

          /***************************************
            筛选出事件($scope.$parent)
            传递anTableCell绑定私有自身
          *****************************************/
          $scope._$eventList = {};
          for (let [key, val] of Object.entries($scope.$parent)) {
            if (!key.includes('$') && typeof val == "function") {
              $scope._$eventList[key] = val;
            }
          };


          /***************************************
             全选(因Thead中repeat, 故采用对象方式)
          *****************************************/
          $scope.checkAll = {
            state: false
          };
          $scope.$watch('checkAll.state', (n, o) => {
            $scope.data = $scope.data.map(item => {
              item.check = n;
              return item;
            });
          });


          /***************************************
          检测数据变化,设置选中状态(全选|半选|取消)
          只检测数组中，每一项check的变换
          selectionChange事件返回值代理
          *****************************************/
          $scope.$watch(function ($scope) {
            return $scope.data.map(item => item.check);
          }, function (newVal) {

            const checkData = $scope.data.filter(val => val.check);
            $scope.selectionChange({ data: checkData });

            if ($scope._$inputAll) {
              $scope._$inputAll[0].indeterminate = false;
            }

            // 全选状态
            if (!newVal.includes(false)) {
              $scope.checkAll.state = true;
            };

            // 全不选状态
            if (!newVal.includes(true)) {
              $scope.checkAll.state = false;
            };

            // 半选状态
            if (newVal.includes(true) && newVal.includes(false)) {
              $scope._$inputAll && ($scope._$inputAll[0].indeterminate = true);
            }
          }, true);

        },

        link: function (scope, elem, attrs, ctrl) {

          /***************************************
             提示线,位置
          *****************************************/
          const line = elem[0].querySelector('.line');
          elem[0].onmousemove = function (event) {
            const pageX = event.x;
            const ofsetX = this.offsetLeft;
            line.style.left = (pageX - ofsetX) + 'px';
          };
        }
      };
    });

    // anTableHead
    app.directive('agTablesHead', function ($timeout) {
      return {
        restrict: 'AEC',
        replace: true,
        transclude: true,
        template: `
        <div class='t-header'>
          <table>
              <thead>
                <tr>
                  <th ng-repeat="val in _$headColumnArr">
                    <span class='sort' ng-if="val.sortable">
                      <i class="fa fa-caret-up" ng-click="_$sort({'type':'up',code:val.prop})"></i>
                      <i class="fa fa-caret-down" ng-click="_$sort({'type':'down',code:val.prop})"></i>
                    </span>
                    <div class='cell'>
                      <span ng-if="val.type!=='selection'">{{val.label}}</span>
                      <input ng-if="val.type==='selection'" type="checkBox" ng-model="checkAll.state">
                    </div>
                  </th>
                </tr>
              </thead>
          </table>
        </div>`,
        controller: function ($scope) {

          /*********************************************
          排序
          ***********************************************/
          $scope._$sort = function ({ type, code }) {
            type === 'up' ? sortUp(code) : sortDown(code)
          };

          function sortUp(code) {
            $scope.data.sort(function (a, b) {
              return a[code].localeCompare(b[code], 'zh')
            })
          };

          function sortDown(code) {
            $scope.data.sort(function (a, b) {
              return b[code].localeCompare(a[code], 'zh')
            })
          };

        },

        link: function link(scope, elem, attrs, ctrl) {
          const tHeader = elem.find('table');
          let bodyTdsData = null;
          let tbodyDom = null;

          $timeout(() => {
            scope._$inputAll = elem.find('input');
          });

          /*********************************************
          收集Tbody第一行td数据
          ***********************************************/
          scope.$on('tbodyDomEmit', function (event, dom) {
            tbodyDom = dom;
            setThead(moveTheadFn);
          });

          /*********************************************
          收集head信息
          ***********************************************/
          scope._$headColumnArr = [];
          scope.$on('collectHeadData', function (event, arg) {
            scope._$headColumnArr.push(arg);
          });

          /*********************************************
          设置Thead的宽度
          ***********************************************/
          function setThead(fn) {
            $timeout(() => {
              tHeader[0].style.width = 'auto';
              if (!tbodyDom[0].rows[0]) { // 数据被删除完了
                tHeader[0].style.width = '100%';
                return
              };
              const ths = Array.from(tHeader[0].rows[0].cells);
              bodyTdsData = Array.from(tbodyDom[0].rows[0].cells);
              bodyTdsData.forEach((cellDOM, index) => {
                var _w = cellDOM.offsetWidth - 1; // 边框1像素
                ths[index].querySelector('.cell').style.width = _w + 'px'
              });
              fn && fn(ths);
            });
          };


          window.onresize = function () {
            setThead();
          };

          // 元素被删除，重新绘制表格宽度
          scope.$watchCollection('data', function (n, o) {
            if (n.length !== o.length) {
              setThead();
            };
          });

          /*********************************************
          鼠标拖动
          ***********************************************/
          function moveTheadFn(theadThs) {
            // 被拖动th
            let crruentTD;
            let crruentTDindex = 0;
            let moveDistance = 0;
            const line = elem[0].previousElementSibling;
            const tableContainerMarginLeft = elem.parent().offsetLeft;


            theadThs.forEach((cellDOM, index) => {

              cellDOM.onmousedown = function (event) {
                //记录单元格(选中最右边5像素内触发)
                // 1: 记录按下时的宽度
                // 2: 记录按下时的坐标(相对页面)
                // 3: line显示,设置位置
                var crruentTDWidth = this.offsetWidth;
                var offsetX = event.offsetX;

                if (crruentTDWidth - offsetX < 8) {

                  crruentTD = this;
                  crruentTDindex = index;

                  crruentTD.mouseDown = true;
                  crruentTD.oldX = event.x;
                  crruentTD.oldWidth = crruentTDWidth;

                  line.style.display = "block";
                  line.style.left = event.x - tableContainerMarginLeft + 1 + 'px';
                }
              };

              //移动
              cellDOM.onmousemove = function (event) {

                //更改鼠标样式
                if (event.offsetX > this.offsetWidth - 5) {
                  this.style.cursor = 'col-resize';
                  this.style.userSelect = "none"  // 禁止选取
                } else {
                  this.style.cursor = 'default';
                };

                if (!crruentTD || !crruentTD.mouseDown) {
                  return;
                };

                //调整宽度
                // 01: 移动的距离
                var moveX = event.x - crruentTD.oldX;
                crruentTD.style.cursor = 'col-resize';

                // 02:移动后的宽度
                moveDistance = crruentTD.oldWidth + moveX;
              };

            });

            // 抬起
            document.onmouseup = function () {

              line.style.display = "none";

              if (!crruentTD || !crruentTD.mouseDown) {
                return;
              };
              crruentTD.mouseDown = false;
              crruentTD.style.cursor = 'default';
              crruentTD.style.userSelect = "auto";

              // 01: 赋值宽度
              bodyTdsData[crruentTDindex].width = moveDistance;
              setThead();
            };

          }
        }

      };
    })


    // anTableBody
    app.directive('agTablesBody', function ($timeout) {
      return {
        restrict: 'AE',
        replace: true,
        transclude: true,
        template: `  
        <div class='t-body'>
          <div class="hide" ng-transclude></div>
          <table>
            <tbody>
              <tr ng-repeat="(index,row) in data" ng-click="_$proxyRowClick(row)" ng-dblclick="rowDblclick({row})">
                <td ng-repeat="code in _$headColumnArr" width="{{ index === 0 ? code.width: null}}">
                  <ag-tables-cell row="row" code="code" event-list="_$eventList">
                    {{ code.template ? null : row[code.prop] }}
                    <input ng-if="code.type==='selection'" type="checkBox" ng-model="row.check">
                  </ag-tables-cell>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        `,
        controller: function ($scope) { },
        link: function (scope, elem, attrs, ctrl) {

          $timeout(function () {

            // 过滤 :点击表单元素触发事件,过滤点击的元素(绑定事件的)
            scope._$proxyRowClick = function (row) {
              const attributes = Array.from(event.target.attributes).map(e => e.name);
              const flag = attributes.includes('ng-change') || attributes.includes('ng-click') || attributes.includes('ng-dblclick') || attributes.includes('ng-model');
              !flag && scope.rowClick({ row });
            };


            /*********************************************
            删除 .hide
            ***********************************************/
            let hideDOM = elem.find('div')[0];
            hideDOM.remove();

            /*********************************************
            设置高度
            ***********************************************/
            elem[0].style.maxHeight = attrs.height + 'px';

            /*********************************************
            收集 : Tbody中第一行中tr的td宽为基准,赋值给Thead中th 
            ***********************************************/
            const tBody = elem.find('table');
            // const tds = Array.from(tBody[0].rows[0].cells);
            scope.$emit('tbodyDomEmit', tBody);

          }, 100);

        }
      };
    });


    // an-table-columns 继承控制器数据
    app.directive('agTablesColumn', function () {
      return {
        restrict: 'AE',
        replace: true,
        transclude: true,
        template: `<div class='cell' ng-transclude></div>`,
        controller: function ($scope) { },
        link: function (scope, elem, attrs, ctrl) {

          /*********************************************
          收集表头信息
          ***********************************************/
          scope.$emit('collectHeadData', {
            label: attrs.label,
            prop: attrs.prop,
            type: attrs.type,
            width: attrs.width,
            sortable: attrs.sortable !== undefined,
            template: elem.html().trim()
          });
        }
      };
    });

    // an-table-cell
    app.directive('agTablesCell', function ($compile) {
      return {
        scope: {
          row: '=?',
          code: '=?',
          width: "=?",
          eventList: '=?'
        },
        restrict: 'AE',
        replace: true,
        transclude: true,
        template: `<div class='cell' ng-transclude></div>`,
        controller: function ($scope) {

          // 事件: eventList代理到自身
          for (let [key, val] of Object.entries($scope.eventList)) {
            $scope[key] = function () {
              val($scope.row)
            };
          };

        },
        link: function (scope, elem, attrs, ctrl) {

          /*********************************************
          插槽编译
          ***********************************************/
          if (scope.code.template) {
            let dom = $compile(scope.code.template)(scope);
            elem.empty().append(dom);
          };
        }
      };
    });


  </script>
</body>

</html>

前端菜菜
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular表格组件 GridManager-Angular-1.x
永恒的避风港
03-25 712
GridManager Angular 1.x 基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager. 实现功能 功能 描述 宽度调整 表格的列宽度可进行拖拽式调整 位置更换 表格的列位置进行拖拽式调整 配置列 可通过配置对列进行显示隐藏转换 表头吸顶 在表存在可视区域的情况下,表头将一直存在...
AngularJs框架入门详解
JYplute的博客
06-28 782
EverydayOneCat Cello 一、AngularJS入门 1.AngularJS简介 AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。 2.AngularJS四大特征 2.1MVC 模式 Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（
AngularJS 封装和共享代码逻辑的重要机制：服务
网络技术联盟站
07-16 103
在 AngularJS 中，服务是一种可注入的对象，用于封装和共享代码逻辑。服务可以在不同的组件（如控制器、指令和过滤器）之间共享数据和功能，并提供了一种模块化和可复用的方式来组织代码。使用服务的主要优势是提高代码的可维护性和可测试性。通过将逻辑代码封装在服务中，我们可以将业务逻辑与视图分离，从而更好地组织和管理代码。此外，由于服务是可注入的，我们可以轻松地在不同的组件中重用相同的逻辑，避免了代码重复和冗余。除了内置服务，我们还可以自定义服务来满足特定的需求。自定义服务可以通过或方法来创建。
推荐开源项目：ngDialog - 强大的AngularJS对话框组件
gitblog_00043的博客
05-10 354
推荐开源项目：ngDialog - 强大的AngularJS对话框组件 项目地址:https://gitcode.com/likeastore/ngDialog 在开发网页应用时，我们经常会遇到需要弹窗或对话框的场景，例如显示警告信息、收集用户输入等。这时，一个强大且易用的对话框库就显得尤为重要。今天，我想要向大家推荐的是一个专为AngularJS设计的优秀对话框组件——ngDialog。 1. ...
AngularJs分页+Mybatis分页组件
keyuzhang的博客
03-30 243
1.引入文件（注意angular.js位置应该在最上方） 2.HTML中添加分页标签 <!-- 要分页的表格 --> <table> </table> <!-- 分页组件 --> <tm-pagination conf="paginationConf"></tm-pagination> 3.js控制器 ...
angularJS详解
u011927449的博客
11-07 968
这篇文章转载 kooky798 的博客，http://blog.csdn.net/yy374864125/article/details/41349417, 写到这么详细也是没谁了，必须粉一个 ...
AngularJs前端基础个人学习总结
ptGrapes的博客
06-04 284
AngularJs1.数据绑定2.指令3.作用域Scope4.根作用域rootScope5.模块module6.控制器controller7.过滤器 |8.自定义过滤器9.服务service10.select选择框11.表格12.表单13.angularJs依赖注入 1.数据绑定 <!-- ng-app属性声明所有被其包含的内容都属于这个AngularJS应用 只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响 --> <html ng-app> <
超级全面的angularJs
WEIwei1996_06的博客
10-05 278
1 前言 前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。 首先我自己也是一名学习者，会...
基于 AngularJS 的个推前端云组件探秘
历史上的今天
10-24 312
本文为个推投稿，根据个推 Web 前端首席架构师姜季廷在 Meetup 野狗技术沙龙第三期的技术分享整理而成。他从 Angular 的特性、组件化之路以及个推云组件最佳实践和经验分享等维度为大家解读了基于 AngularJS 的个推前端云组件。 欢迎技术投稿、约稿、给文章纠错，请发送邮件至 mobile@csdn.net。 AngularJS 是 Google 设计和开发的一...
angularjs引入echarts包_AngularJS整合Echarts做饼图
weixin_39777543的博客
12-19 329
还记Angularjs指令怎样传递函数参数吗？我们将表格封装成了一个指令。如果不封装就没有传递函数参数的问题了吗？我们要重申的是，封装是必要的，封装可以复用代码。试想，如果在再加入一个图表，要求也可以按时间段下钻。如果不封装的话，下钻这块实现要写两次。而且真实场景多数是表格图表都会的。所以说还是封装成组件好。看一下最终效果：https://codepen.io/riafan/pen/VXvdjZ。...
angularComponents:angularjs 组件
07-02
"angularComponents"项目显然是一个专注于实现AngularJS组件的集合，这些组件可能包含了诸如下拉菜单、按钮、表格、轮播图等常见UI元素，旨在帮助开发者快速搭建应用的界面。AngularJS组件的创建基于Directives的...
AngularJS优雅的自定义指令
10-22
开发过程中，可能会遇到需要定制特定行为或组件的情况，例如，创建一个复杂的表格组件、动画效果或者自定义表单控件。此时，自定义指令就显得尤为重要，它能够帮助我们将业务逻辑封装起来，提高代码的复用性和可维护...
angularjs+boorstrap视频教程
03-08
- **服务**：AngularJS中的服务用于封装特定功能，比如HTTP请求处理、事件广播等。 - **过滤器**：过滤器用于格式化数据显示，如日期格式化等。 - **路由**：AngularJS支持单页应用的路由管理，可以实现在不刷新...
angularjs管理系统框架
08-09
1. **数据表格**：自定义的数据展示组件，可能包含排序、过滤、分页等功能。 2. **表单验证**：根据业务规则定制的表单验证逻辑，提高用户体验。 3. **图表**：可能使用 D3.js 或其他库创建的可视化图表，用于数据...
Jspdf-with-Angularjs
05-02
将`Jspdf`引入Angularjs项目，我们通常需要创建一个服务来封装`Jspdf`的API，然后在控制器或指令中调用这个服务。以下是一个简单的示例： ```javascript // 创建一个名为pdfService的服务 angular.module('myApp')....
AngularJS 事件
wjs2024的博客
07-22 389
在 AngularJS 中，事件是视图（HTML）与控制器（JavaScript）之间通信的桥梁。通过事件，用户与页面的交互可以被控制器捕获并相应地处理。AngularJS 使用自定义的 HTML 属性来绑定事件，这些属性以ng-开头，例如ng-clickng-change等。除了内置的事件，AngularJS 还允许开发者自定义事件。这可以通过使用$scope对象的$emit$broadcast和$on方法来实现。
CSS实现图片边框酷炫效果
最新发布
流绪@微梦
07-26 1387
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
element 表格组件封装
07-28
对于 Element UI 表格组件的封装，你可以按照以下步骤进行操作： 1. 创建一个自定义的表格组件。 - 在你的项目中，创建一个新的 Vue 组件文件，命名为`CustomTable.vue`。 - 在该文件中，引入 Element UI 的表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值