Настройка столбца сортировки по умолчанию с помощью SlickGrid DataView

Question

Использование Dataview от SlickGrid, пытаясь выяснить, как получить его для автоматической сортировки при загрузке. Я искал это по всему Интернету, не нашел хорошего ответа. Например, с приведенным ниже кодом, как мне получить столбец «title» для автоматической сортировки при загрузке страницы? Благодаря!

<script> 
var dataView; 
var grid; 
var data = []; 
var columns = [ 
{id: "sel", name: "#", field: "num", cssClass: "cell-selection", width: 40, cannotTriggerInsert: true, resizable: false, selectable: false }, 
{id: "title", name: "Title", field: "title", toolTip: "test", behavior: "select", width: 120, minWidth: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true}, 
{id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text, sortable: true}, 
{id: "%", defaultSortAsc: false, name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete, sortable: true}, 
{id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, sortable: true}, 
{id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date, sortable: true}, 
{id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, cannotTriggerInsert: true, sortable: true} 
]; 

var options = { 
editable: true, 
enableAddRow: true, 
enableCellNavigation: true, 
asyncEditorLoading: true, 
forceFitColumns: false, 
topPanelHeight: 25 
}; 

var sortcol = "title"; 
var sortdir = 1; 
var percentCompleteThreshold = 0; 
var searchString = ""; 

function requiredFieldValidator(value) { 
if (value == null || value == undefined || !value.length) { 
return {valid: false, msg: "This is a required field"}; 
} 
else { 
return {valid: true, msg: null}; 
} 
} 

function myFilter(item, args) { 
if (item["percentComplete"] < args.percentCompleteThreshold) { 
    return false; 
} 

if (args.searchString != "" && item["title"].indexOf(args.searchString) == -1) { 
return false; 
} 

return true; 
} 

function percentCompleteSort(a, b) { 
    return a["percentComplete"] - b["percentComplete"]; 
} 

function comparer(a, b) { 
var x = a[sortcol], y = b[sortcol]; 
return (x == y ? 0 : (x > y ? 1 : -1)); 
} 

function toggleFilterRow() { 
    grid.setTopPanelVisibility(!grid.getOptions().showTopPanel); 
} 

$(".grid-header .ui-icon") 
    .addClass("ui-state-default ui-corner-all") 
    .mouseover(function (e) { 
     $(e.target).addClass("ui-state-hover") 
    }) 
    .mouseout(function (e) { 
     $(e.target).removeClass("ui-state-hover") 
    }); 

$(function() { 
    // prepare the data 
for (var i = 0; i < 50000; i++) { 
var d = (data[i] = {}); 

d["id"] = "id_" + i; 
d["num"] = i; 
d["title"] = "Task " + i; 
d["duration"] = i + " days"; 
d["percentComplete"] = Math.round(Math.random() * 100); 
d["start"] = "01/01/2009"; 
d["finish"] = "01/05/2009"; 
d["effortDriven"] = (i % 5 == 0); 
} 

dataView = new Slick.Data.DataView({ inlineFilters: true }); 
grid = new Slick.Grid("#myGrid", dataView, columns, options); 
grid.setSelectionModel(new Slick.RowSelectionModel()); 

var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); 
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); 

... 

Answer 1

Вы можете вызвать событие щелчка на title колонке ...

сделать это так ...

$(function() { 
// prepare the data 
for (var i = 0; i < 50000; i++) { 
var d = (data[i] = {}); 

    d["id"] = "id_" + i; 
    d["num"] = i; 
    d["title"] = "Task " + i; 
    d["duration"] = i + " days"; 
    d["percentComplete"] = Math.round(Math.random() * 100); 
    d["start"] = "01/01/2009"; 
    d["finish"] = "01/05/2009"; 
    d["effortDriven"] = (i % 5 == 0); 
} 

dataView = new Slick.Data.DataView({ inlineFilters: true }); 
grid = new Slick.Grid("#myGrid", dataView, columns, options); 
grid.setSelectionModel(new Slick.RowSelectionModel()); 

var pager = new Slick.Controls.Pager(dataView, grid, $("#pager")); 
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); 

... 
$('.slick-header-columns').children().eq(2).trigger('click'); // eq(2) for the 3rd col (title).. 

Answer 2

Если вы ищете что-то простое, вы можете использовать fastSort ():

dataView.fastSort('title', true)