kamil-lip / Bootstrap Vue Treeview
Licence: mit
A treeview component for Bootstrap and Vue.js 2.0+
Stars: ✭ 34
Projects that are alternatives of or similar to Bootstrap Vue Treeview
Fuse
A simple file sharing web service in Vue.js and Flask
Stars: ✭ 7 (-79.41%)
Mutual labels: bootstrap, vue2
Vue Cli Multipage Bootstrap
vue-cli-multipage-bootstrap demo with vue2+vue-router+vuex+bootstrap+markdown for learning vue2.0
Stars: ✭ 105 (+208.82%)
Mutual labels: bootstrap, vue2
Vue2 Admin Lte
📊 adminLTE to vuejs v2.x converting project
Stars: ✭ 1,023 (+2908.82%)
Mutual labels: bootstrap, vue2
Coreui Free Vue Admin Template
Open source admin template based on Bootstrap 5 and Vue 3
Stars: ✭ 2,951 (+8579.41%)
Mutual labels: bootstrap, vue2
Bstreeview
Bootstrap Treeview, A very simple plugin to build a basic and elegant Treeview with bootstrap 4. See the demo:
Stars: ✭ 308 (+805.88%)
Mutual labels: treeview, bootstrap
Bootstraptable Treeview
bootstrapTable extension of treeView
Stars: ✭ 57 (+67.65%)
Mutual labels: treeview, bootstrap
Istock
👉一个基于spring boot 实现的java股票爬虫(仅支持A股)，如果你❤️请⭐️ . V2升级版正在开发中！
Stars: ✭ 622 (+1729.41%)
Mutual labels: bootstrap, vue2
Uiv
Bootstrap 3 components implemented by Vue 2.
Stars: ✭ 882 (+2494.12%)
Mutual labels: bootstrap, vue2
Note App Django Vue Javascript
An example of a note application using django and vue.js
Stars: ✭ 31 (-8.82%)
Mutual labels: bootstrap
Ph2date
💕 Powerful & lightweight PHP Dating Script built with CodeIgniter 2.X and Bootstrap + jQuery 💖
Stars: ✭ 20 (-41.18%)
Mutual labels: bootstrap
Go Bootstrap
Easy way to bootstrap a web server in Go (Routing|Middleware|Https)
Stars: ✭ 27 (-20.59%)
Mutual labels: bootstrap
Ruoyi
(RuoYi)官方仓库 基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用
Stars: ✭ 905 (+2561.76%)
Mutual labels: bootstrap
Notifo
Multi channel notification service for collaboration tools, e-commerce, news service and more.
Stars: ✭ 32 (-5.88%)
Mutual labels: bootstrap
E Commerce 2 django
Guest register, user register, user login, user logout, account home page, product view history, change password, reset password, change name, send activation email when register, resend activation email, add shipping address, add billing address, add nickname to the addresses, edit shipping address, edit billing address, view list of your addresses, reuse shipping addresses when order products, reuse billing addresses when ordeer products, show sales analytics if staff or admin only using -chart.js-, get analytics data with Ajax, receive marketing email, change if user will receive marketing email or not by admin, send contact message with Ajax, products list, product detail, download product detail as a PDF file, download digital product files -if the user purchased that digital product only-, orders list, list of digital products files, order detail, download order detail as a PDF file, verify order ownership with Ajax -to secure order detail page-, show cart products, add or remove product from cart, checkout page, thanks page when order placed successfully, add or reuse payment method, add or reuse payment method with Ajax, search products by title, search products by description, search products by price, search products by tag title, write tags for products -by admin only-, auto fill contact email, full name if user logged in.
Stars: ✭ 20 (-41.18%)
Mutual labels: bootstrap
Price Tracker
Live and historical prices for fiat currencies, crypto currencies and gold/silver over REST and WebSocket APIs, using Redis as storage. Node.js, jQuery, Bootstrap
Stars: ✭ 32 (-5.88%)
Mutual labels: bootstrap
A treeview component for Bootstrap and Vue.js 2.0+
Online demo
https://bootstrap-vue-treeview.appdiamond.pl
Features
- Drag & drop nodes
- Context menu
Installation
npm install --save bootstrap-vue-treeview
Getting started
Webpack
If you use Webpack bundler (recommended) you can import component and register it locally:
import { bTreeView } from 'bootstrap-vue-treeview'
[...]
components: {
bTreeView
},
or globally using plugin:
import BootstrapVueTreeview from 'bootstrap-vue-treeview'
Vue.use(BootstrapVueTreeview)
Now you can you the treeview component in your code:
<b-tree-view :data="treeData"></b-tree-view>
export default {
data() {
return {
treeData: [{"id": 2, "name": "Venus" , "children": [{"id": 3, "name": "Neptune"}, {"id": 4, "name": "Stratus"} ] } ]
}
}
}
API
TreeView
1. Vue props
| Prop | Type | Description | Default value | Required |
|---|---|---|---|---|
| data | Array | Tree data | - | Yes |
| nodeKeyProp | String | Name of the property containing unique node key | "id" | No |
| nodeChildrenProp | String | Where to look for node children | "children" | No |
| nodeLabelProp | String | Name of the property containing node label | "name" | No |
| showIcons | Boolean | Show/hide icons | false | No |
| iconClassProp | String | Name of the property containing icon class | "icon" | No |
| defaultIconClass | String | Icon class to apply if node has no icon class property | null | No |
| prependIconClass | String | Class to apply to every icon (common to all icons) | null | No |
| nodesDraggable | Boolean | Enable/disable drag & drop feature | false | No |
| contextMenu | Boolean | Enable/disable context menu | true | No |
| renameNodeOnDblClick | Boolean | Enable/disable double click to rename feature | true | No |
| contextMenuItems | Array of menu items | Context menu items | [ { code: 'DELETE_NODE', label: 'Delete node' }, { code: 'RENAME_NODE', label: 'Rename node' } ] | No |
2. Events
| Event name | Description | Parameters |
|---|---|---|
| nodeSelect | Triggered every time a node is selected/deselected. Check second parameter to verify if the node was selected or deselected | TreeNode object, isSelected |
| contextMenuItemSelect | Triggered every time a context menu item was clicked. | Context menu item object (see below), TreeNode object |
TreeNode
Props and events of the tree node component are not intended to be used directly.
1. Methods
| Method name | Description | Parameters |
|---|---|---|
| select | Select node | - |
| deselect | Deselect node | - |
| expand | Expand node (show children) | - |
| collapse | Collapse node (hide children) | - |
| toggle | Expand/collapse | - |
Menu item
1. Properties
| Property | Description |
|---|---|
| code | Code of the menu item. Check this code to know which menu item was clicked. |
| label | Label being displayed for the user |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].