JSGrid Basic

by Frank Liu

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsGrid"></div>

JavaScript

var db = {

  loadData: function(filter) {
    return $.grep(this.clients, function(client) {
      return (!filter.Name || client.Name.indexOf(filter.Name) > -1) &&
        (!filter.Age || client.Age === filter.Age) &&
        (!filter.Address || client.Address.indexOf(filter.Address) > -1) &&
        (!filter.Country || client.Country === filter.Country) &&
        (filter.Married === undefined || client.Married === filter.Married);
    });
  },

  insertItem: function(insertingClient) {
    this.clients.push(insertingClient);
  },

  updateItem: function(updatingClient) {},

  deleteItem: function(deletingClient) {
    var clientIndex = $.inArray(deletingClient, this.clients);
    this.clients.splice(clientIndex, 1);
  }

};

window.db = db;

db.countries = [{
    Name: "",
    Id: 0
  },
  {
    Name: "United States",
    Id: 1
  },
  {
    Name: "Canada",
    Id: 2
  },
  {
    Name: "United Kingdom",
    Id: 3
  },
  {
    Name: "France",
    Id: 4
  },
  {
    Name: "Brazil",
    Id: 5
  },
  {
    Name: "China",
    Id: 6
  },
  {
    Name: "Russia",
    Id: 7
  }
];

db.clients = [{
    "Name": "Otto Clay",
    "Age": 61,
    "Country": 6,
    "Address": "Ap #897-1459 Quam Avenue",
    "Married": false
  },
  {
    "Name": "Connor Johnston",
    "Age": 73,
    "Country": 7,
    "Address": "Ap #370-4647 Dis Av.",
    "Married": false
  },
  {
    "Name": "Lacey Hess",
    "Age": 29,
    "Country": 7,
    "Address": "Ap #365-8835 Integer St.",
    "Married": false
  },
  {
    "Name": "Timothy Henson",
    "Age": 78,
    "Country": 1,
    "Address": "911-5143 Luctus Ave",
    "Married": false
  },
  {
    "Name": "Ramona Benton",
    "Age": 43,
    "Country": 5,
    "Address": "Ap #614-689 Vehicula Street",
    "Married": true
  },
  {
    "Name": "Ezra Tillman",
    "Age": 51,
    "Country": 1,
    "Address": "P.O. Box 738, 7583 Quisque St.",
    "Married": true
  },
  {
    "Name": "Dante Carter",
    "Age": 59,
    "Country": 1,
    "Address": "P.O. Box...