hColumns version 0.1.2

Introduction

hColumns is a jQuery plugin that looks like Mac OS X Finder's column view for the hierarchical data.

Example

Instructions

  1. Get the latest version of this plugin from Github (https://github.com/bu/hColumns/archive/master.zip)
  2. Add required CSS and Javascript tag
    Insert before </head>
    <!-- Change this if you have another CSS Rest framework installed (e.g. Bootstrap) -->
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    
    <!-- Feel free to modify this for colors or width to match your need -->
    <link rel="stylesheet" href="css/hcolumns.css" type="text/css">
    Put anywhere you like
    <div id="columns"></div>
    Insert before </body>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.hcolumns.min.js"></script>
    
    <script>
    $(document).ready(function() {
        $("#columns").hColumns({
            nodeSource: function(node_id, callback) {
            }
        });                                                                                                                                                                  });
    });                                                                                                                                                                  });
    </script>
  3. Create your own node source
    What is Node Source?

    Node source is a Javascript function that provide hColumns children nodes. To write one is simple and quick.

    How to write a Node Source

    Node Source is a function that receive two parameters: node_id, callback

    And return an array contains nodes, each node is a object *at least* contains: id, label, type


    A simple one might be:

    function(node_id, callback) {
        // callback is a function that receive two parameter
        // callback(error, array of nodes);
    
        // if inital load
        if(node_id === null) {
            return callback(null, [
                { id: 1, label: "folder", type: "folder" },
                { id: 2, label: "empty", type: "folder" },
                { id: 3, label: "Google", type: "link", url: "http://www.google.com" }
            ]);
        } 
    
        if(node_id === 1) {
            return callback(null, [
                { id: 11, label: "Google in a folder", type: "link", url: "http://www.google.com" }
            ]);
        }
    
        // even empty nodes, you need to return empty array []
        if(node_id === 2) {
            return callback(null, []);
        }
    }
    

    Or it can use backend resource, like PHP

    Node Source
    function(node_id, callback) {
        $.ajax("resource.php", { node_id: node_id }).done(function(data) {
            return callback(null, data);
        }).fail(function() {
            return callback("AJAX error");
        });
    }
    resource.php
    <?php
    // example for hColumns
    // by bu <bu@hax4.in>
    
    $node_id = filter_input(INPUT_GET, "node_id", FILTER_SANITIZE_NUMBER_INT);
    
    if( $node_id == NULL ) {
        echo json_encode(array(
            0 => array( "id" => 1, "label" => "from PHP", "type" => "folder")
        ));
    }
    
    if( $node_id == 1 ) {
        echo json_encode(array());
    }
    
    Why it is not design default?

    Well, this plugin was not shipped a default data source, for two reasons:

    1. Common usage of this plugin might be your current treeview or any other kind of data source, and that might have differ format or datatypes. So, let users write one was the best solution for keeping simple and univeral.
    2. The Author was designed this for his own use, so he didn't think of that. (Laugh)
  4. DONE! You should see something like Example.

Customization Attributes

var defaultConfig = {
    // source for node retrieve
    nodeSource: function() {
        return window.alert("dummy source, you need to create a node source");
    },

    // short message for empty node 
    noContentString: "There is no node here",

    // the max length of the label in the list
    labelText_maxLength: 15,

    // custom type for the list
    customNodeTypeIndicator: {},
    customNodeTypeHandler: {}
};
label text string, no node string, custom type

TODO

Description for customNodeType

Bugs or Any questions

Please visit Github issue, and feel free to create an issue for your problems.

Authors

Buwei Chiu (a.k.a. bu) - Github

License under

BSD