SlickGrid: Column to Object value Extraction
HTML
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css">
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.css"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css"></script>
<div id="myGrid" style="width:600px;height:500px;"></div>
JavaScript
//See: https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-custom-column-value-extractor.html
var grid;
var columns = [
{
id: "NotSpecial",
name: "Data Outside of SmDetails",
field: "SomethingElse"
},
{
id: "field1",
name: "Id1",
field: "SmDetails",
fieldIdx: 'Id1'
}, {
id: "field2",
name: "Id2",
field: "SmDetails",
fieldIdx: 'Id2'
}, {
id: "field3",
name: "Other",
field: "SmDetails",
fieldIdx: 'Other'
}];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
dataItemColumnValueExtractor:
// Get the item column value using a custom 'fieldIdx' column param
function getValue(item, column) {
var values = item[column.field];
if (column.fieldIdx !== undefined) {
return values && values[column.fieldIdx];
} else {
return values;
}
console.log(values);
}
};
$(function () {
var data = [{
SomethingElse: "Something else",
"SmDetails": {
Id1: 40071,
Id2: 40072,
Other: 'Other details'
}
}, {
SomethingElse: 'Nothing Special',
"SmDetails": {
Id1: 40073,
Id2: 40074,
Other: 'Misc'
}
}]
grid = new Slick.Grid("#myGrid", data, columns, options);
})