当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

ngx-treeview

An Angular treeview component with checkbox

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者长孙鸿

操作系统跨平台

开源组织无

适用人群未知

软件概览

ngx-treeview

An Angular treeview component with checkbox

Dependencies

This component is currently supporting Bootstrap 4. If you are using Bootstrap 4 alpha 6, please downgrade to the older version 1.0.10.

You can customize CSS yourself to break down dependencies to Bootstrap.

Features

Unlimited tree level
State: disabled / collapse, expand
Filtering
Internationalization (i18n) support
Template
Checkbox with tri-state

Demo

https://leovo2708.github.io/ngx-treeview/

Installation

After install the above dependencies, install ngx-treeview via:

npm install ngx-treeview --save

Once installed you need to import our main module in your application module:

import { TreeviewModule } from 'ngx-treeview';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [TreeviewModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage

Treeview:

<ngx-treeview
  [config]="config"
  [items]="items"
  (selectedChange)="onSelectedChange($event)"
  (filterChange)="onFilterChange($event)"
>
</ngx-treeview>

Treeview with dropdown:

<ngx-dropdown-treeview
  [buttonClass]="buttonClass"
  [config]="config"
  [items]="items"
  (selectedChange)="onSelectedChange($event)"
  (filterChange)="onFilterChange($event)"
>
</ngx-dropdown-treeview>

config is optional. This is the default configuration:

{
   hasAllCheckBox: true,
   hasFilter: false,
   hasCollapseExpand: false,
   decoupleChildFromParent: false,
   maxHeight: 500
}

You can change default configuration easily because TreeviewConfig is injectable.

Pipe `ngxTreeview`:

To map your JSON objects to TreeItem objects.

<ngx-dropdown-treeview
  [config]="config"
  [items]="items | ngxTreeview:'textField'"
  (selectedChange)="onSelectedChange($event)"
>
</ngx-dropdown-treeview>

Create a TreeviewItem:

const itCategory = new TreeviewItem({
  text: "IT",
  value: 9,
  children: [
    {
      text: "Programming",
      value: 91,
      children: [
        {
          text: "Frontend",
          value: 911,
          children: [
            { text: "Angular 1", value: 9111 },
            { text: "Angular 2", value: 9112 },
            { text: "ReactJS", value: 9113 },
          ],
        },
        {
          text: "Backend",
          value: 912,
          children: [
            { text: "C#", value: 9121 },
            { text: "Java", value: 9122 },
            { text: "Python", value: 9123, checked: false },
          ],
        },
      ],
    },
    {
      text: "Networking",
      value: 92,
      children: [
        { text: "Internet", value: 921 },
        { text: "Security", value: 922 },
      ],
    },
  ],
});

You can pass the second paramater 'autoCorrectChecked' with value=true (default is false) in constructor of TreeviewItem to correct checked value of it and all of its descendants. In some cases, you need to push or pop children flexibly, checked of parent may be not correct. Then you need to call function correctChecked() to help to correct from root to its descendants.

const vegetableCategory = new TreeviewItem({
  text: "Vegetable",
  value: 2,
  children: [
    { text: "Salad", value: 21 },
    { text: "Potato", value: 22 },
  ],
});
vegetableCategory.children.push(
  new TreeviewItem({ text: "Mushroom", value: 23, checked: false })
);
vegetableCategory.correctChecked(); // need this to make 'Vegetable' node to change checked value from true to false

TreeviewEventParser:

Extract data from list of checked TreeviewItem and send it in parameter of event selectedChange. Some built-in TreeviewEventParser:

DefaultTreeviewEventParser: return values of checked items.
DownlineTreeviewEventParser: return list of checked items in orginal order with their ancestors.
OrderDownlineTreeviewEventParser: return list of checked items in checked order with their ancestors. Note that: value of a leaf must be different from value of other leaves.

Templating:

See example 4 & 5.

Contributing

I am very appreciate for your ideas, proposals and found bugs which you can leave in github issues. Thanks in advance!

使用案例

ngx_lua模块

ngx_lua模块 ngx_lua模块的原理： 1、每个worker（工作进程）创建一个Lua VM，worker内所有协程共享VM； 2、将Nginx I/O原语封装后注入 Lua VM，允许Lua代码直接访问； 3、每个外部请求都由一个Lua协程处理，协程之间数据隔离； 4、Lua代码调用I/O操作等异步接口时，会挂起当前协程（并保护上下文数据），而不阻塞worker； 5、I/O等异步操作完
nginx之ngx_rbtree

nginx实现了一个红黑树的容器提供使用，定义在ngx_rbtree里面，这个容器相对简单，提供了插入，删除，初始化等方法。 ngx_rbtree.h: //ngx_rbtree_key为unsigned int或者int类型 typedef ngx_uint_t ngx_rbtree_key_t; typedef ngx_int_t ngx_rbtree_key_int_t; type
nginx数据结构之ngx_int_t和ngx_uint_t

位置：nginx/src/core/nginx_config.h typedef intptr_t ngx_int_t; typedef uintptr_t ngx_uint_t; intptr_t和uintptr_t在linux平台的/usr/include/stdint.h头文件中可以找到 /* Types for `void *' pointers. */ #if
Nginx，LuaJIT，ngx_devel_kit，ngx_lua，cjson安装

LuaJIT 安装下载：http://luajit.org/download/LuaJIT-2.0.4.tar.gz tar -zxvf LuaJIT-2.0.4.tar.gz cd LuaJIT-2.0.4 make make install ngx_devel_kit安装下载：https://github.com/simpl/ngx_devel_kit/archive/v0.3.0rc1.
nginx源码初读（11）--让烦恼从数据结构开始(ngx_command/ngx_module/ngx_conf)

第一点：ngx_command_t ngx_core_commands是nginx中的核心模块指令，它的类型就是ngx_command_t。在每一个module的结构体中，也都有一个ngx_command_t。 typedef struct ngx_command_s ngx_command_t; struct ngx_command_s { ngx_str_t
treeview 配置

由于系统准备用frame框架结构，我今天的主要的任务锁搭建调试在frame结构下用treeview进行画面之间的选择跳转。先是在网上找了个javascript的脚本实现的，后来又发现在vs环境下，有插件就可以直接实现的，这样可就可以省去不少写代码的时间了。两者不同之处是一个是在主机实现，一个是在客户端实现的，用javascript写免去了回传的过程，缺点是代码完全暴露于用户眼前了，整个架构也就显而
ngx_string.c

/* * Copyright (C) Igor Sysoev */ #include <ngx_config.h> #include <ngx_core.h> static u_char *ngx_sprintf_num(u_char *buf, u_char *last, uint64_t ui64, u_char zero, ngx_uint_t hexadecimal,

ngx-treeview

ngx-treeview

Dependencies

Features

Demo

Installation

Usage

Treeview:

Treeview with dropdown:

Pipe `ngxTreeview`:

Create a TreeviewItem:

TreeviewEventParser:

Templating:

Contributing

同类工具

相关阅读

相关文章

相关问答

相关文档

ngx-treeview

ngx-treeview

Dependencies

Features

Demo

Installation

Usage

Treeview:

Treeview with dropdown:

Pipe ngxTreeview:

Create a TreeviewItem:

TreeviewEventParser:

Templating:

Contributing

同类工具

相关阅读

相关文章

相关问答

相关文档

Pipe `ngxTreeview`: