简体   繁体   English

如何在重新加载另一个数据集 ui-grid 之前删除 ui-grid 上的排序

[英]How to remove sorting on ui-grid before reload another data set ui-grid

Im using ui-grid to load my data set.我使用ui-grid加载我的数据集。 Here is my requirment;这是我的要求;

step 01: I want to load dataset_01 ( scope.gridOptions.data = res_01; ).步骤 01:我想加载 dataset_01 ( scope.gridOptions.data = res_01; )。

step 02: I want to sort by First Name (Click by firstname column).步骤 02:我想按firstname排序(按firstname列单击)。

step 03: Click an external button and Reload ui-grid with an another data set ( scope.gridOptions.data = res_02; ).步骤 03:单击外部按钮并使用另一个数据集( scope.gridOptions.data = res_02; )重新加载 ui-grid。

Here is my result:这是我的结果:

在此处输入图片说明

I dont want sort by First Name here for second dataset.我不想在这里按First Name对第二个数据集进行排序。 I want data without sorting.我想要没有排序的数据。 How can I do it ?我该怎么做?

Expected result:预期结果:

在此处输入图片说明

So I want to reload second data set without sorting (Means I want to remove first sorting before load second data set).所以我想重新加载第二个数据集而不进行排序(意味着我想在加载第二个数据集之前删除第一个排序)。 how can I reset my ui-grid before load next data set ( scope.gridOptions.data = res_01; ).如何在加载下一个数据集( scope.gridOptions.data = res_01; )之前重置我的 ui-grid。

How can I do it ?我该怎么做?

Thank you.谢谢。 :) :)

You can set the sort property of your columnDefs to:您可以将columnDefssort属性设置为:

sort: {
   direction: undefined,
}

and call for grid refresh using $sope.gridApi.core.refresh() after.并在之后使用$sope.gridApi.core.refresh()调用网格刷新。 This should re-render the whole grid and get rid of the sorting.这应该重新渲染整个网格并摆脱排序。

Visit this page: http://ui-grid.info/docs/#/api/ui.grid.core.api:PublicApi访问此页面: http : //ui-grid.info/docs/#/api/ui.grid.core.api : PublicApi

After having instantiated your gridApi, you can just call:实例化您的 gridApi 后,您可以调用:

$scope.gridApi.core.refresh();

Hope that helps!希望有帮助! :) :)

  1. Create your gridoption like this像这样创建你的 gridoption

example例子

$scope.gridOptions = {
    useExternalPagination: true,
    useExternalSorting: false,
    enableFiltering: false,
    enableSorting: true,
    enableRowSelection: false,
    enableSelectAll: false,
    enableGridMenu: true,
    enableFullRowSelection: false,
    enableRowSelection: false,
    enableRowHeaderSelection: false,
    paginationPageSize: 10,
    enablePaginationControls: false,
    enableRowHashing: false,
    paginationCurrentPage:1,
    columnDefs: [
        { name: "FristName", displayName: "Frist Name", width: '6%', sort: { direction: undefined }  },
    ]
};

after that you can remove the sorting where you want using below code之后,您可以使用以下代码删除所需的排序

$scope.RemoveSorting = function ()
{
    $scope.gridOptions.columnDefs.forEach(function (d) {

        d.sort.direction = undefined;
    })
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM