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 jQueryScript.net (http://www.jqueryscript.net/layout/Mac-Like-Hierarchical-Data-Displaying-Plugin-For-jQuery-hColumns.html)
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 <[email protected]>
   
   $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