使用 SlickGrid DataView 设置默认排序列答案

【问题标题】：Setting a default sort column with SlickGrid DataView使用 SlickGrid DataView 设置默认排序列
【发布时间】：2023-03-28 22:53:02
【问题描述】：

使用 SlickGrid 的 Dataview，试图弄清楚如何让它在加载时自动排序。我在网上到处找这个，没有找到好的答案。例如，使用下面的代码，如何让“标题”列在页面加载时自动排序？谢谢！

<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);

...

【问题讨论】：

理论上，您排序的网格中显示的不是最终数据，而是来自您预过滤的 SQL (DB) 中的数据。当然，如果您确实从数据库中获取数据......我总是在加载到网格和性能之前对其进行排序，总是建议也这样做。

标签： jquery slickgrid dataview

【解决方案1】：

如果你寻找简单的东西，你可以使用 fastSort() ：

dataView.fastSort('title', true)

【讨论】：

【解决方案2】：

您可以在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)..

【讨论】：