npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tree-checkbox-list

v1.4.4

Published

[ABANDONED] Modal dialog with checkbox tree list

Downloads

22

Readme

Tree checkbox list

Modal dialog with checkbox list in tree. Depends on jquery.

Abandoned

Unfortunately I don't have any more time to maintain this repository :-(

sad cat

Installation

$ npm install tree-checkbox-list

Usage

$(function() {

	var Tree = require('tree-checkbox-list');
	var tree = new Tree(window.jQuery);

	tree.data = {
		"first": {
			"title": "First item"
		},
		"second": {
			"title": "Second item",
			"items": {
				"second_first": {
					"title": "First item in second section"
				}
			}
		}
	}

	// ....

	var selected = tree.getSelection();

});

Method getSelection() returns items from data object which were selected.

If you need to get selected items with their full paths (like in your data variable), just call getSelection method with true argument

var selected = tree.getSelection(true);

Default values

tree.defaults = [
	'first', 'second_first'
];

Default values is just plain array with names of checked items.

Get array with names

If you want to send data via form, you can get just array with names.

var selected = tree.serialize();

// now you can pass this variable to JSON.stringify method and add it to input

Just like with getSection method, here you can also get fully expanded object (not array) of selected items and their parents.

var selected = tree.serialize(true);

You can automatize this by setting resultElement. It can be only text input and after every change, stringified array of names will be added into this input.

Also if you set this result element and it has got some value in it, tree-checkbox-list will parse it like JSON and pass it into the defaults value (see below).

tree.setResultElement($('#resultInput'));

When you need to automatically pass full results (with full paths) into result element, just call it with true as second argument.

tree.setResultElement($('#resultInput'), true);

Maximized results can be also set.

tree.setResultElement($('#resultInput'), false, false);

Change style

Look for options in modal-dialog package.

Render summary into text input

This package can write summary of selected items into text input (max 3 items).

tree.setSummaryElement($('#summaryInput'));

Advanced summary

Another option is set summary into div element. This will render ul list into it with list of selected items with Remove link.

Immediate rendering

Summary is rendered after tree-checkbox-list is open for the first time, but it will be probably better to render it immediately. Just call method prepare.

tree.prepare();

Example of modal dialog

dialog

Tests

$ npm test

Changelog

  • 1.4.3 - 1.4.4

    • Move under Carrooi organization
    • Abandon project
  • 1.4.2

    • Little optimization
    • Updated modules
  • 1.4.0 - 1.4.1

    • Added counter of selected items
    • Some refactoring
    • Added info with info about other selected items which are not visible (in searching)
  • 1.3.0

    • Added tests
    • Many optimizations
    • getSelection and serialize method can return items with full paths
    • Summary in div element is rendered with full paths
    • Max items in summary can be configured
    • Result element can contain full results
  • 1.2.0

    • Default value from result element
    • Removed dependency on some stupid opener
    • Outputs are rendered in prepare method
    • Removed loading data via http
  • 1.1.1

    • Head title wrapped into span
  • 1.1.0

    • Added resultElement options
  • 1.0.1

    • Typo in readme
  • 1.0.0

    • Initial version