Angular 4 多级表格，层级表格树（angular 列表）

25-02-16 15

本文将为您提供关于Angular4多级表格，层级表格树的详细介绍，我们还将为您解释angular列表的相关知识，同时，我们还将为您提供关于Angular1.x表格组件GridManage-Angula

本文将为您提供关于Angular 4 多级表格，层级表格树的详细介绍，我们还将为您解释angular 列表的相关知识，同时，我们还将为您提供关于Angular 1.x表格组件 GridManage-Angular 1.x、Angular 2 RC2新表格、angular v1.5.8 表格增删改查、angular(angular6/angular7/angular8) delete请求body的问题的实用信息。

本文目录一览：

Angular 4 多级表格，层级表格树（angular 列表）
Angular 1.x表格组件 GridManage-Angular 1.x
Angular 2 RC2新表格
angular v1.5.8 表格增删改查
angular(angular6/angular7/angular8) delete请求body的问题

Angular 4 多级表格，层级表格树（angular 列表）

Angular 4 多级表格，层级表格树

< table class= "table " >

< tbody rtSelectionArea [ multiple]= "multiple" style= "position: relative; " >

< ng-template ngFor let-hu [ ngForOf]= "list.items" >

< tr >

< td ( click)= "expandOrder(hu)" >

< i [ ngClass]= "{'fa': true,'fa-caret-right': !hu.expanded,'fa-caret-down': hu.expanded,'fa-lg': false}" # orderID></ i>

</ td >

< td >

< input type= "checkBox" [ rtSelectionCheckBoxFor]= "hu" [( selected)]= "hu.selected" ( click)= "setRtList(list);chbCheckkAll.nativeElement.checked = '';"

< td >{{hu.handlingUnitID}} </ td >

< td >{{hu.uom}} </ td >

</ tr >

< tr [ hidden]= '!hu.expanded' >

< td colspan= "7" >

< table >

< thead >

< th >

</ th >

< th >Delivery </ th >

< th >Customer </ th >

< th >ShipTo </ th >

< th >SO Number </ th >

< th >Type </ th >

< th >requested Date </ th >

</ thead >

< tbody >

< ng-template ngFor let-item [ ngForOf]= "hu.deliveryOrder" let-i= "index" >

< td ( click)= "expandMaterial(item,hu.palletId)" >

< td >{{item.saP_DeliveryOrderID}} </ td >

< td >{{item.customer}} </ td >

< td >{{item.shipTo}} </ td >

< td >{{item.soNumber}} </ td >

< td >{{item.type}} </ td >

< td >{{item.requestedDelivery}} </ td >

< tr [ hidden]= '!item.childexpanded' >

< th style= "width:100px;"></ th>

< th >Line </ th >

< th >Material </ th >

< th >Description </ th >

< th >Qty </ th >

< th >UoM </ th >

< th></ th>

< ng-template ngFor let-child [ ngForOf]= "item.pickDetails" let-i= "index" >

< td></ td>

< td >{{(i+1)*10}} </ td >

< td >{{child.saP_Material_ID}} </ td >

< td >{{child.saP_Description}} </ td >

< td >{{child.pickedQty}} </ td >

< td >{{child.saP_UOM}} </ td >

</ ng-template >

</ tbody >

</ table >

< tr * ngIf= "progressCode == 'UNASSIGNED'" >

< th style= "position: relative; width:10px" [ style. top]= "columnTop" ( click)= "expandAll(list)" >

< i class= "fa fa-caret-right fa-lg"></ i>

< th style= "position: relative; " [ style. top]= "columnTop" >

< input type= "checkBox" ( click)= "setRtList(list); selectAll($event);" # chbCheckkAll>

< span rtSort= "saP_ProductionorderID" >Handling Unit ID </ span >

< th style= "position: relative;" [ style. top]= "columnTop" >

< span rtSort= "saP_ExpectedDate" >UoM </ span >

< tr * ngIf= "progressCode == 'WAITING'" >

< input type= "checkBox" ( click)= "setRtList(list);selectAll($event);" # chbCheckkAll>

< span >Handling Unit ID </ span >

< span >Requested Delivery </ span >

< tfoot >

< td colspan= "10" >

< rt-status-progress >

< progress-bar></ progress-bar>

</ rt-status-progress >

< rt-status-no-data class= "text-center" >

0 records found

</ rt-status-no-data >

< div >

< rt-status-done >

< rt-buffered-pager [ defaultRowCount]= "20" # rtPager>

< span >{{rtPager.pager.loadedCount}} record{{rtPager.pager.loadedCount > 1 ? 's' : ''}} found </ span >

< a * ngIf= "rtPager.canLoadMore" tabindex= "0" ( click)= "rtPager.loadMore()" rtPreventDefaults= "click" [ class. hidden]= "!rtPager.canLoadMore"

[ rtInfinite]= "window" href= "#" >Show more </ a >

</ rt-buffered-pager >

</ rt-status-done >

</ div >

</ tfoot >

======================展开所有，展开订单，展开材料的方法：

getHUs = (request : HandlingUnitsRequest) : Observable< any> => {

if ( this. chbCheckkAll) {

this. chbCheckkAll. nativeElement.checked = '';

}

const response = this. service. handlingUnits( request);

response. subscribe((data : any[]) => {

this. onDataLoaded. emit( data.length !== 0);

console. log( data);

},(err => {

console. log( err);

}),() => {

console. log( 'SUccessssss');

});

return response;

};

expandAll(list : any) {

for ( let i = 0; i < list. items.length; i ++) {

list. items[ i]. expanded = true;

console. log( list. items);

this. service. handingUnitDelivery( list. items[ i]. palletId). subscribe(result => {

for ( let j = 0; j < result.length; j ++) {

result[ j]. expandoder = false;

}

list. items[ i]. deliveryOrder = result;

});

}

expandOrder(hu : any) {

hu. expanded = ! hu. expanded;

this. service. handingUnitDelivery( hu. palletId). subscribe(result => {

for ( let i = 0; i < result.length; i ++) {

result[ i]. expandoder = false;

}

hu. deliveryOrder = result;

});

}

expandMaterial(deliveryOrder : any,palletId : number) {

this. service. handingUnitDeliveryDetail( palletId,deliveryOrder. delOrderId). subscribe(result => {

deliveryOrder. pickDetails = result;

});

deliveryOrder. childexpanded = ! deliveryOrder. childexpanded;

}

捣鼓了一周啊，当然还有一些过滤的操作啥的。这里源码主要是 table树的。有时间详细卸载自己的博客上

Angular 1.x表格组件 GridManage-Angular 1.x

GridManager Angular 1.x

基于 Angular 1.x 的 GridManager 封装, 用于便捷的在 Angular 中使用GridManager.

列表项目

实现功能

宽度调整: 表格的列宽度可进行拖拽式调整
位置更换: 表格的列位置进行拖拽式调整
配置列: 可通过配置对列进行显示隐藏转换
表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部
排序: 表格单项排序或组合排序
分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号: 自动生成序号列
全选: 自动生成全选列
导出: 当前页数据下载,和仅针对已选中的表格下载
右键菜单: 常用功能在菜单中可进行快捷操作
过滤: 通过对列进行过滤达到快速搜索效果

API

该文档为原生GridManager的文档，angular-1.x版本除了在columnData.text columnData.template topFullColumn.template中可以使用angular模版外，其它使用方式相同。

Demo

该示例为原生GridManager的示例，angular-1.x版本除了在columnData.text columnData.template topFullColumn.template中可以使用angular模版外，其它使用方式相同。

简单的示例
复杂的示例

Core code

GridManager
jTool

ENV

ES2015 + webpack + angular 1.x + GridManager

安装

npm install gridmanager-angular.1.x --save

项目中引用

es2015引入方式

import gridManager from ''gridmanager-angular-1.x'';

通过script标签引入

<link rel="stylesheet" href="../node_modules/gridmanager-angular-1.x/css/gm-angular.css">
<script src="../node_modules/gridmanager-angular-1.x/js/gm-angular.js"></script>

示例

<html>
    <head>
      <link rel="stylesheet" href="https://unpkg.com/gridmanager-angular-1.x/css/gm-angular.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
      <script src="https://unpkg.com/gridmanager-angular-1.x/js/gm-angular.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="AppController as vm">
      <grid-manager option="option" callback="callback(query)"></grid-manager>
    </body>
</html>

function AppController($window, $rootScope, $scope, $element, $gridManager){
    $scope.testClick = (row) => {
        console.log(''click'', row);
    };

    // 常量: 搜索条件
    $scope.TYPE_MAP = {
        ''1'': ''HTML/CSS'',
        ''2'': ''nodeJS'',
        ''3'': ''javaScript'',
        ''4'': ''前端鸡汤'',
        ''5'': ''PM Coffee'',
        ''6'': ''前端框架'',
        ''7'': ''前端相关''
    };

    $scope.searchForm = {
        title: '''',
        info: ''''
    };

    /**
     * 搜索事件
     */
    $scope.onSearch = () => {
        console.log(''onSearch'');
        $gridManager.setQuery(''testAngular'', $scope.searchForm);
    };

    $scope.onReset = () => {
        $scope.searchForm = {
            title: '''',
            info: ''''
        };
    };

    // 表格渲染回调函数
    // query为gmOptions中配置的query
    $scope.callback = function(query) {
        console.log(''callback => '', query);
    };

    $scope.option = {
        gridManagerName: ''testAngular'',
        width: ''100%'',
        height: ''100%'',
        supportAjaxPage:true,
        isCombSorting: true,
        disableCache: false,
        ajax_data: function () {
            return ''https://www.lovejavascript.com/blogManager/getBlogList'';
        },
        ajax_type: ''POST'',

        columnData: [
            {
                key: ''pic'',
                remind: ''the pic'',
                width: ''110px'',
                align: ''center'',
                text: ''缩略图'',
                // ng template
                template: `<a target="_blank"ng-href="https://www.lovejavascript.com/#!zone/blog/content.html?id={{row.id}}" title="点击阅读[{{row.title}}]">
                                <imgng-src="https://www.lovejavascript.com/{{row.pic}}" alt="{{row.title}}">
                            </a>`
            },{
                key: ''title'',
                remind: ''the title'',
                align: ''left'',
                text: ''标题'',
                sorting: '''',
                // 使用函数返回 ng template
                template: function() {
                    return ''<atarget="_blank" ng-href="https://www.lovejavascript.com/#!zone/blog/content.html?id={{row.id}}" title="点击阅读[{{row.title}}]">{{row.title}}</a>'';
                }
            },{
                key: ''type'',
                remind: ''the type'',
                text: ''博文分类'',
                align: ''center'',
                width: ''150px'',
                sorting: '''',
                // 表头筛选条件, 该值由用户操作后会将选中的值以{key: value}的形式覆盖至query参数内。非必设项
                filter: {
                    // 筛选条件列表, 数组对象。格式: [{value: ''1'', text: ''HTML/CSS''}],在使用filter时该参数为必设项。
                    option: [
                        {value: ''1'', text: ''HTML/CSS''},
                        {value: ''2'', text: ''nodeJS''},
                        {value: ''3'', text: ''javaScript''},
                        {value: ''4'', text: ''前端鸡汤''},
                        {value: ''5'', text: ''PM Coffee''},
                        {value: ''6'', text: ''前端框架''},
                        {value: ''7'', text: ''前端相关''}
                    ],
                    // 筛选选中项，字符串, 默认为''''。 非必设项，选中的过滤条件将会覆盖query
                    selected: ''3'',
                    // 否为多选, 布尔值, 默认为false。非必设项
                    isMultiple: true
                },
                // isShow: false,
                template: `<button type="button" ng-click="testClick(row)" ng-bind="TYPE_MAP[row.type]"></button>`
            },{
                key: ''info'',
                remind: ''the info'',
                width: ''300px'',
                text: ''简介''
            },{
                key: ''username'',
                remind: ''the username'',
                align: ''center'',
                width: ''100px'',
                text: ''作者'',
                // 使用函数返回 dom string
                template: `<ahref="https://github.com/baukh789" target="_blank" title="去看看{{row.username}}的github">{{row.username}}</a>`
            },{
                key: ''createDate'',
                width: ''130px'',
                text: ''创建时间'',
                sorting: ''DESC'',
                // 使用函数返回 htmlString
                template: function(createDate, rowObject){
                    return new Date(createDate).toLocaleDateString();
                }
            },{
                key: ''lastDate'',
                width: ''130px'',
                text: ''最后修改时间'',
                sorting: '''',
                // 使用函数返回 htmlString
                template: function(lastDate, rowObject){
                    return new Date(lastDate).toLocaleDateString();
                }
            },{
                key: ''action'',
                remind: ''the action'',
                width: ''100px'',
                align: ''center'',
                text: ''<span>操作</span>'',
                // 直接返回 htmlString
                template: ''<spanng-click="delectRowData(row, index)">删除</span>''
            }
        ]
    };

    /**
     * 模拟删除
     * @param row
     * @param index
     */
    $scope.delectRowData = function(row, index) {
        if(window.confirm(`确认要删除当前页第[${index}]条的[''${row.title}]?`)){
            console.log(''----删除操作开始----'');
            $gridManager.refreshGrid(''testAngular'');
            // $element[0].querySelector(''table[grid-manager="testAngular"]'').GM(''refreshGrid'');
            console.log(''数据没变是正常的, 因为这只是个示例,并不会真实删除数据.'');
            console.log(''----删除操作完成----'');
        }
    };
}
AppController.inject = [''$window'', ''$rootScope'', ''$scope'', ''$element'', ''$gridManager''];

angular
    .module(''myApp'', [''gridManager''])
    .controller(''AppController'', AppController);

调用公开方法

以下方法需要在已经存在gridManager实例的Angular环境下使用。

// 刷新
$gridManager.refreshGrid(''testAngular'');

// 更新查询条件
$gridManager.setQuery(''testAngular'', {name: ''baukh''});

// ...其它更多请直接访问[API](http://gridmanager.lovejavascript.com/api/index.html)

查看当前版本

import gridManager from ''gridmanager-angular-1.x'';
console.log(''GridManager'', angular.module(''gridManager'').version);

Angular 2 RC2新表格

正如文章中所建议的：

https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

为了在RC2中使用新表单,我们需要使用以下代码禁用已弃用的表单：

import {disableDeprecatedForms,provideForms} from '@angular/forms';
bootstrap(AppComponent,[
   disableDeprecatedForms(),provideForms()
])

这显然意味着我们现在还需要在package.json中包含以下内容：

"@angular/forms": "2.0.0-rc.2",

但是当我将“@ angular / forms”：“2.0.0-rc.2”添加到我的package.json并尝试恢复包时,它会给出以下错误：

npm ERR! node v6.2.1
npm ERR! npm  v3.9.3
npm ERR! No compatible version found: @angular/forms@2.0.0-rc.2
npm ERR! Valid install targets:
npm ERR! 0.1.0

有人可以指导吗？

刚刚发现为了使用Angular 2 RC2中引入的新表单,我们需要将以下包添加到packages.json文件中：

"@angular/forms": "0.1.0"

您可能还会发现以下答案有用：

How to migrate Angular 2 RC 1 (or earlier) Forms to Angular 2 RC 2 / RC 4 New Forms

angular v1.5.8 表格增删改查

1

<!DOCTYPE html>
<html>
<Meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

名:  <input type="text" ng-model="firstName"><br>
    <hr>
    <table>
      <tr>
        <th>name</th>
        <th>phone</th>
        <th></th>
      </tr>
      <tr ng-repeat="employee in employees">
     <td>
          <input type="text" id='txt_name_{{employee.id}}'
         ng-model="employee.name"readonly />
        </td>
        <td> 
      <input type="text" ng-model="employee.phone"readonly /></td>
    <td>
      <edit ng-Model="employee" ng-show="showEdit">
        <a>Edit</a>
      </edit>
|<update ng-Model="employee" ng-show="!showEdit"><a>Update</a></update> 
                 | <cancel ng-Model="employee" ng-show="!showEdit"><a>Cencel</a></cancel>
          | <delete ng-Model="employee"><a>Delete</a></delete>
      </td>
    </tr>
</div>

<script>
var app = angular.module('myApp',[]);
app.directive("edit",function(){
  return{
    restrict: "E",link: function(scope,element,attrs,ngModel){
      element.bind("click",function(e){
        scope.$apply(function(){
           angular.copy(scope.master,ngModel.$modelValue);
           
         })
      });
    }
  }
});
app.controller('myCtrl',function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
  
  $scope.name = 'World';
  $scope.employees =[{id:101,name:'John',phone:'555-1276'},{id:102,name:'Mary',phone:'800-1233'},{id:103,name:'Mike',phone:'555-4321'},{id:104,name:'Adam',phone:'555-5678'},{id:105,name:'Julie',phone:'555-8765'},{id:106,name:'Juliette',phone:'555-5678'}];
$scope.showEdit = true;
   $scope.master = {};
});
  

app.directive("update",function($document){
  return{
    restrict: 'AE',require: 'ngModel',function(){
         alert(ngModel.$modelValue + " is updated,Update your value here.");
         var id = "txt_name_" +ngModel.$modelValue.id;
         var obj = $("#"+id);
         obj.removeClass("active");
         obj.addClass("inactive");
         obj.attr("readOnly",true);
          scope.$apply(function(){
           scope.showEdit = true;
         })
      })
    }
  }
});
app.directive("cancel",function(){
         scope.$apply(function(){
           angular.copy(scope.master,ngModel.$modelValue);
           //console.log(ngModel.$modelValue);
         })
          
         var id = "txt_name_" +ngModel.$modelValue.id;
         var obj = $("#"+id);
         obj.removeClass("active");
         obj.addClass("inactive");
         obj.prop("readOnly",true);
          scope.$apply(function(){
           scope.showEdit = true;
         })
      })
    }
  }
});
app.directive("delete",function($document){
  return{
    restrict:'AE',link:function(scope,function(){
        var id = ngModel.$modelValue.id;
        alert("delete item where employee id:=" + id);
        scope.$apply(function(){
          for(var i=0; i<scope.employees.length; i++){
            if(scope.employees[i].id==id){
               console.log(scope.employees[i])
               scope.employees.splice(i,1);
            }
          }
          console.log(scope.employees);
        })
      })
    }
  }
});
</script>

</body>
</html>

2 列表双向绑定

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="add()">增加一个</button>
<div ng-repeat="person in list">
  <input type="text" ng-model="person.name" /> <input type="input" ng-model="person.age" value="{{person.age}}" />
    <a ng-show="$index!=0"ng-click="del($index)">移除</a>
</div>
        
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
    $scope.count = 0;
  $scope.list=[{id:1,age:30,name:"李四"},{id:2,name:"李四"}];
  
  $scope.add=function(){
//    var obj={id:101,name:"李四"};
    var obj={};
    $scope.list.push(obj);
}

$scope.del=function(idx){
    $scope.list.splice(idx,1);
}
});
</script>

</body>
</html>

angular(angular6/angular7/angular8) delete请求body的问题

angular中httpclient delete请求，不接受body，只需将其放在options对象中即可

在 angular6.x ，angular7.x， angular8.x及以上版本中修改如下:

const options = {
  headers: new HttpHeaders({
    ''Content-Type'': ''application/json'',
  }),
  body:anyObject
};

this.httpClient
  .delete(''http://localhost:8080/something'', options)
  .subscribe((s) => {
    console.log(s);
  });

在Angular 2.x, 4.x and 5.x中,修改如下：

http.delete(''/api/something'', new RequestOptions({
   headers: headers,
   body: anyObject
}))

这样delete请求就可以携带body

今天关于Angular 4 多级表格，层级表格树和angular 列表的讲解已经结束，谢谢您的阅读，如果想了解更多关于Angular 1.x表格组件 GridManage-Angular 1.x、Angular 2 RC2新表格、angular v1.5.8 表格增删改查、angular(angular6/angular7/angular8) delete请求body的问题的相关知识，请在本站搜索。

本文标签：