JSGrid Dependent Filters
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
department_list = [{
"id": 1,
"department": "Department A"
},
{
"id": 2,
"department": "Department B"
}
];
team_list = [{
"department": "Department A",
"id": 1,
"team": "Team A"
},
{
"department": "Department B",
"id": 2,
"team": "Team B"
},
{
"department": "Department B",
"id": 3,
"team": "Team C"
}
];
/*select_list = [
{Name:"", id:"1"},
{Name:"select1 value1",id:"2", type:"TypeA"},
{Name:"select1 value2",id:"2",type:"TypeA"},
{Name:"select2 value1",id:"3",type:"TypeB"},
{Name:"select2 value1",id:"3",type:"TypeB"}
];*/
content = [{
"id": 1,
"activity_type": "CORE",
"department": "Department B",
"team": "Team B",
"time": "864000"
}];
var TimeField = function(config) {
jsGrid.Field.call(this, config);
};
TimeField.prototype = new jsGrid.Field({
css: "date-field",
align: "right",
itemTemplate: function(value) {
return Math.round(value / 86400) + " d " + Math.round((value % 86400) / 3600) + " h ";
},
insertTemplate: function(value) {
console.log("insert");
return this._insertTime = this._createTimeBox();
},
filterTemplate: function(value) {
return this._filterTime = this._createTimeBox();
},
editTemplate: function(value) {
console.log("edit");
return this._editTime = this._createTimeBox();
},
insertValue: function() {
var days = this._insertTime.siblings("input")[0].value;
var hours = this._insertTime.siblings("input")[1].value;
return days * 86400 + hours * 3600;
},
eidtValue: function() {
var days = this._editTime.siblings("input")[0].value;
var hours = this._editTime.siblings("input")[1].value;
return days * 86400 + hours * 3600;
},
filterValue: function() {
var days = this._filterTime.siblings("input")[0].value;
var hours = this._filterTime.siblings("input")[1].value;
return days * 86400 + hours * 3600;
},
_createTimeBox: function() {
return...