JSGrid Multiselect field
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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<div id="jsGrid"></div>
CSS
html,
body {
height: 100%;
}
JavaScript
var db = {
loadData: function(filter) {
return $.grep(this.users, function(user) {
return (!filter.Name || user.Name.indexOf(filter.Name) > -1);
});
},
insertItem: function(item) {
this.users.push(item);
},
deleteItem: function(item) {
var index = $.inArray(item, this.users);
this.users.splice(index, 1);
}
};
window.db = db;
var countries = [
{ID:1, Name: "USA" },
{ID:2, Name: "Canada" },
{ID:3, Name: "France" },
{ID:4, Name: "UK" },
{ID:5, Name: "Russia" }
];
db.users = [
{
"Account": "A758A693-0302-03D1-AE53-EEFE22855556",
"Name": "Carson Kelley",
"Country": [1, 2]
},
{
"Account": "D89FF524-1233-0CE7-C9E1-56EFF017A321",
"Name": "Prescott Griffin",
"Country": [3]
},
{
"Account": "06FAAD9A-5114-08F6-D60C-961B2528B4F0",
"Name": "Amir Saunders",
"Country": [4]
},
{
"Account": "EED7653D-7DD9-A722-64A8-36A55ECDBE77",
"Name": "Derek Thornton",
"Country": [4]
},
{
"Account": "2A2E6D40-FEBD-C643-A751-9AB4CAF1E2F6",
"Name": "Fletcher Romero",
"Country": [5]
},
{
"Account": "3978F8FA-DFF0-DA0E-0A5D-EB9D281A3286",
"Name": "Thaddeus Stein",
"Country": []
},
{
"Account": "658DBF5A-176E-569A-9273-74FB5F69FA42",
"Name": "Nash Knapp",
"Country": []
}
];
var MultiselectField = function(config) {
jsGrid.Field.call(this, config);
};
MultiselectField.prototype = new jsGrid.Field({
items: [],
textField: "",
valueField: "",
itemTemplate: function(Name) {
return $.makeArray(Name).join(", ");
},
_createSelect: function(selected) {
var textField = this.textField;
var valueField=this.valueField;
var $result = $("<select>").prop("multiple", true);
$.each(this.items,...