Coder Social home page Coder Social logo

pinghuazhuang / checked-tree-model Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 121 KB

🌲 一个树形结构数据的 `checked` 状态变化的管理. 返回一个 `Diff` 状态变化对象.

Home Page: https://PinghuaZhuang.github.io/@zstark/permission-table

Shell 0.35% JavaScript 52.31% TypeScript 47.34%
model typescript library

checked-tree-model's Introduction

CheckedTreeModel

publish test license Commit Verison

一个树形结构数据的 checked 状态变化的数据模型. 返回一个 Diff 状态变化集合. 参考 antdTree 组件.

Example

Live Demo

🚀 Quick Start

import CheckedTreeModel from '@zstark/checked-tree-model';

const mock = {
  id: 0,
  name: 'title1',
  childList: [
    { id: 1, name: 'title2' },
    { id: 2, name: 'title3' },
  ],
};

const data = new CheckedTreeModel(mock);

data.setCheckedByIdReturnDiff(1);
// => { 0: { indeterminate: true }, 1: { checked: true } }
data.setCheckedByIdReturnDiff(2);
// => { 0: { checked: true, indeterminate: false }, 2: { checked: true } }

constructor

(options: Data, parent?: CheckedTreeModel) => void
export interface Data {
  id: string | number;
  pId: string | number;
  name: string;
  childList: Data[];
  className?: string;
  level: number;
  expand?: boolean;
}

export type Diff = {
  [P: string]: {
    indeterminate?: boolean;
    checked?: boolean;
  };
};

type EachCallback = (
  data: CheckedTreeModel,
  parent: CheckedTreeModel,
  index: number,
) => void;

type Undown = boolean; // 初始化的时候, 是否强关联(向下遍历).

Methods

  • isRoot: () => boolean. 是否是根元素
  • diff: () => { indeterminate?: boolean; checked?: boolean;} | undefined. 当前数据变化状态
  • setChecked: () => CheckedTreeModel. 选中当前数据.
  • setIndeterminate: () => CheckedTreeModel. 半选.
  • setCheckedByIdReturnDiff: (id?: Data['id'], value?: boolean, undown?: boolean) => {}
  • selectKeys: (keys: Ids, undown?: boolean) => Diff. 根据 ID 数组设置选中
  • getSelectKeys: () => Ids. 获取当前树所有选中的 ID.
  • clean: () => Diff. 清空当前树所有状态.
  • each: (fn: EachCallback) => void. 遍历子元素.
  • eachDeep: (fn: EachCallback) => void. 递归遍历子元素. 回调在递归前.
  • eachDeepAfter: (fn: EachCallback) => void. 递归遍历子元素. 回调在递归后.

checked-tree-model's People

Contributors

pinghuazhuang avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.