string.format.js

Provide a simple string.format method

      "{0} is old, {1} is new, {0} long lives".format("ASP", "ASP.net")
      //console
      "ASP is old, ASP.net is new, ASP long lives"

jquery.dialog.js

jquery dialog plugin based on bootstrap css

DEMO: This is login form

      <div id="loginwrap">
      <form id="loginform" role="form">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="username" class="form-control"
           id="username">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control"
          id="password">
        </div>
      </form>
    </div>

create

Create a dialog Run 

      $("#loginwrap").dialog({title:"Login"});

create ( with backdrop or keyboard )

Create a dialog which doesn't close on click on the background. Run 

      $("#loginwrap2").dialog({title:"Login", backdrop: "static"});

create without auto open

Create a dialog with (autoOpen or show) Run 

      $("#loginwrap").dialog({title:"Login", autoOpen: false});

open

Open a dialog Run 

      $("#loginwrap").dialog("open");

destroy

Rut the element to the old place, remove the overlay from DOM. 

      $("#loginwrap").dialog("destroy");

onClose

Override onClose event

      $("#loginwrap").dialog({
          title:   "DEMO"
        , onClose: function() { 
            // your handler
            $(this).dialog("destroy");
        }
      });

option buttons

Redefine the buttons Run 

      $( "#loginwrap" ).dialog(
          "option"
        , "buttons"
        , [{ 
              text: "Ok"
            , click: function() {
                $( this ).dialog( "close" );
            }
        }]
      );

buttons: Array; class: Custom Class

Open dialog with buttons Run 

      $("#loginwrap").dialog({
          title:    "Login"
        , 'class':  "mydialog"  /*add custom class for this dialog*/
        , onClose: function() { $(this).dialog("close"); }
        , buttons: [
            {
                text: "Close"
              , 'class': "btn-primary"
              , click: function() {
                  $(this).dialog("close");
                }
            },
            {
                text: "Login"
              , 'class': "btn-success"
              , click: function() {
                  /*your login handler*/

                  $(this).dialog("close");
                }
            },
            {
                text: "Destroy"
              , classed: "btn-error"  /*classed equal to 'class'*/
              , click: function() {
                  /*your login handler*/

                  $(this).dialog("destroy");
                }
            }
          ]
      });

buttons: Object

Open dialog with buttons: Object Run 

      $("#loginwrap").dialog({
          title:    "Login"
        , 'class':  "mydialog"  /*add custom class for this dialog*/
        , onClose: function() { $(this).dialog("close"); }
        , buttons: {
              "Close": function() {
                  $(this).dialog("close");
              }
            , "Login": function() {
                  /*your login handler*/

                  $(this).dialog("close");
              }
          }
      });

dialogClass: Optional sizes

Smaller Run 

      $("#loginwrap").dialog({
          title       : "Login"
        , dialogClass : "modal-sm"
      });

Bigger Run 

      $("#loginwrap").dialog({
          title       : "Login"
        , dialogClass : "modal-lg"
      });

jquery.messager.js

jquery messager(message box) plugin based on bootstrap css

alert

popup alert message

simple message Run 

      $.messager.alert("This is message!");

message with title Run 

      $.messager.alert("Title", "This is message!");

confirm

confirm message

with callback Run 

      $.messager.confirm("title", "This is message!", function() { 
        alert("you closed it")
      });

localization, override message Run 

      $.messager.model = { 
        ok:{ text: "关闭", classed: 'btn-default' },
        cancel: { text: "取消", classed: 'btn-error' }
      };
      $.messager.confirm("title", "This is message!", function() { 
        alert("you closed it")
      });

popup

popup message

Run 

      $.messager.popup("This is message!");

custom css, apply and run again Apply 

      <style>
      .modal-open {
        overflow: auto;
        padding: 0 !important;
      }

      .modal.msg-popup {
        top: auto;
      }

      .modal.msg-popup .modal-dialog {
        width: 300px !important;
        margin: 30px auto 60px;
      }

      .modal.msg-popup .modal-body {
        background-color: #000;
        color: #fff;
      }

      .modal.msg-popup .modal-content {
        border: none;
      }
      </style>
      <script>
      $.messager.popup("Custom layout");
      </script>

jquery.datagrid.js

jquery datagrid plugin based on bootstrap css

load

load data from json object

html

        <table id="tablewrap1" class="table table-striped"></table>

codes

      var $table = $('#tablewrap1');

      var rows =[
        {"name":"item12","type":"Free","sum":143400},
        {"name":"item13","type":"Free","sum":3426919},
        {"name":"item14","type":"Free","sum":3343312},
        {"name":"item15","type":"Free","sum":120330},
        {"name":"item16","type":"Not Free","sum":319492},
        {"name":"item31","type":"Not Free","sum":321338},
        {"name":"item13","type":"Unknow","sum":342219},
        {"name":"item54","type":"Unknow","sum":231000},
        {"name":"item36","type":"Unknow","sum":259451},
        {"name":"item34","type":"Unknow","sum":449563}
      ];

      $table.datagrid({
        columns:[[
            {title: "Name", field: "name"}
          , {title: "Type", field: "type"}
          , {title: "Number", field: "sum"}
        ]]
      }).datagrid("loadData", {rows: rows});

edit

edit json data

html

        <table id="tablewrap2" class="table table-hover"></table>

codes

      var $editTable = $('#tablewrap2');

      $editTable.datagrid({
        columns:[[
            {title: "Name", field: "name", formatter: function(val) {
              //override default input field
              return val;
            }}
          , {title: "Type", field: "type", readonly: true}
          , {title: "Number", field: "sum"}
        ]]
        , edit: true
        , singleSelect:  true //false allow multi select
        , selectedClass: 'danger' //default: 'success'
        , selectChange: function(selected, rowIndex, rowData, $row) {
            //allow multi-select
            //console.log(selected, rowIndex, rowData, $row);
          }
      }).datagrid("loadData", {rows: rows});

updateRow(index) Run 

$('#tablewrap2').datagrid("updateRow", {index: 0, row: {name: "Good luck", sum: new Date() }});

updateRow Run 

$('#tablewrap2').datagrid("updateRow", {row: {name: "Good luck", sum: new Date() }});

selectRow(index) Run 

$('#tablewrap2').datagrid("selectRow", 1);

selectRow Run 

$('#tablewrap2').datagrid("selectRow");

unselectRow(index) Run 

$('#tablewrap2').datagrid("unselectRow", 1);

unselectRow Run 

$('#tablewrap2').datagrid("unselectRow");

getSelections Run 

$('#tablewrap2').datagrid("getSelections");


      

        getSelectedIndex
        Run
      

      
$('#tablewrap2').datagrid("getSelectedIndex");

      


      

        getData
        Run
      

      
$('#tablewrap2').datagrid("getData");

      


      

        getConfig
        Run
      

      
$('#tablewrap2').datagrid("getConfig");

      


      

        getColumns
        Run
      

      
$('#tablewrap2').datagrid("getColumns");

      


      

        insertRow(index)
        Run
      

      
$('#tablewrap2').datagrid("insertRow", {index: 3, row: {"name":"new" + (Math.random() * 100 | 0)}});


      

        insertRow()
        Run
      

      
$('#tablewrap2').datagrid("insertRow", {row: {"name":"new" + (Math.random() * 100 | 0)}});


      

        deleteRow(index)
        Run
      

      
$('#tablewrap2').datagrid("deleteRow", 0);


      

        deleteRow()
        Run
      

      
$('#tablewrap2').datagrid("deleteRow");


    

  











  
jquery.tree.js

  

  
jquery tree view, depends on jquery.bootstrap.css

  

    

      
html

      
        <div id="folder"></div>
      

      

      
codes

      
      var treeDataArr = [
          {
              id:         "root"
            , text:       "Root"
            , attr: { yourfield: "your value" }
            , nodes: [
                  {
                      id:         "tool"
                    , text:       "Tool"
                  }
                , {
                      id:         "users"
                    , text:       "Users"
                    , active:     true
                    , nodes:   [
                          {text: "Kris"}
                        , {text: "Tom"}
                        , {text: "Jerry"}
                        , {text: "Dna"}
                      ]
                  }
              ]
          }
        , {
              text:       "Guest"
          }
        , {
              id:         "admin"
            , text:       "Admin"
          }
      ];

      $('#folder').tree({data: treeDataArr});
      

    

    

      

        Custom icon and event (arrow)
        Run
      

      
      var treeDataArr = [
          {
              id:         "root"
            , text:       "Root"
            , icon:       "glyphicon glyphicon-briefcase"
            , nodes: [
                  {
                      id:         "tool"
                    , text:       "Tool"
                  }
                , {
                      id:         "users"
                    , text:       "Users"
                    , active:      true
                    , nodes:   [
                          {text: "Kris"}
                        , {text: "Tom"}
                        , {text: "Jerry"}
                        , {text: "Dna"}
                      ]
                  }
              ]
          }
        , {
                text:       "Guest"
              , icon:       "glyphicon glyphicon-user"
          }
        , {
              id:         "admin"
            , text:       "Admin"
            , icon:       "glyphicon glyphicon-cog"
          }
      ];

      var $tree = $('#folder');

      $tree.tree({
          data       : treeDataArr
        , folderIcon : 'glyphicon glyphicon-chevron-down'
        , onClick    : function() {
            console.log(arguments)
          }
      }).addClass('tree-arrow');
      

      

        Options and defaults
      

      
      , treeClass     = 'nav'
      , activeClass   = 'active'
      , folderIcon    = 'glyphicon glyphicon-folder-close'
      , itemIcon      = 'glyphicon glyphicon-file'
      , indentIcon    = ''