Question

我有一个带有MVVM绑定的Jquery Kendo UI网格，这是Razor上的html代码查看

<div data-role="grid"
         id="dvJobGoalGrid"
         data-groupable="true"
         data-sortable="true"
         data-filterable="{'mode':'row'}"
         data-pageable="{pageSize:20}"
         data-pageSize="defaultRowsPerPage"
         data-reorderable="true"
         data-column-menu="true"
         data-columns="[
            {'field': 'SJobID', 'title':'Job ID', 'width': 150,
            'template': '#= viewModel.JobIdTemplate(SJobID) #',
            'filterable': {  'cell': { 'showOperators': false, 'operator': 'contains'  } }},
            {'field': 'DisplayName', 'title':'Name','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},
            {'field': 'PName', 'title':'POT Name','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},
            {'field': 'JobDesc', 'title':'Description','width': 450, 'filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},
            {'field': 'MgGShortDesc', 'title':'MG','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},
            {'field': 'RGDesc', 'title':'RGD','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},
            {'field': 'CategoryShortDesc', 'title':'Category','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},
            {'field': 'JobStatusDesc', 'title':'Status','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},
            {'field': 'RGDesc', 'title':'RG','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},
            {'field': 'Api', 'title':'API','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }}
         ]"
         data-bind="source: goalJobs">
    </div>

以下是JQuery viewModel

var viewModel = kendo.observable({
isVisible: true,
gridRowsPerpage: [10,20,30,40],
defaultRowsPerPage: 10,
goalJobs: new kendo.data.DataSource({
    schema: {
        data: function (data) {
            return data.value;
        },
        total: function (data) {
            return data['odata.count'];
        },
        model: {
            fields: {
                JobID: { type: "number" },
                SJobID: { type: "string" },
                DisplayName: { type: "string" },
                PName: { type: "string" },
                JobDesc: { type: "string" },
                MgGShortDesc: { type: "string" },
                RGroupDesc: { type: "string" },
                CategoryShortDesc: { type: "string" },
                JobStatusDesc: { type: "string" },
                RGroupDesc: { type: "string" },
                Api: { type: "string" },
                Area: { type: "string" },
                LastUpdatedDate: { type: "date" },
            }
        }
    },
    sort: {
        field: "LastUpdatedDate",
        dir: "desc"
    },
    filter: {
        logic: "and",
        filters: [{ field: "GW", operator: "eq", value: true },
        { field: "JobStatusID", operator: "eq", value: 1 }]
    },
    type: "odata",
    transport: {
        read: {
            url: MYURL
            dataType: "json"
        }
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
}),
rowNumberSelected: function (n) {
    this.goalJobs.pageSize(this.defaultRowsPerPage);
    console.log(n);
},
searchChanged: function () {
    var searchVal = viewModel.searchText;
    var existingFilters;
    var globalSearchFilter = {
        pageSize: 10,
        logic: "or",
        filters: [
            { field: "SJobID", operator: "contains", value: searchVal },
            { field: "DisplayName", operator: "contains", value: searchVal },
            { field: "PName", operator: "contains", value: searchVal },
            { field: "JobDesc", operator: "contains", value: searchVal },
            { field: "MgGShortDesc", operator: "contains", value: searchVal },
            { field: "RGroupDesc", operator: "contains", value: searchVal },
            { field: "CategoryShortDesc", operator: "contains", value: searchVal },
            { field: "JobStatusDesc", operator: "contains", value: searchVal },
            { field: "RGroupDesc", operator: "contains", value: searchVal },
            { field: "Api", operator: "contains", value: searchVal }]
    };
    if (viewModel.goalJobs.filter()) {
        existingFilters = viewModel.goalJobs.filter();
        existingFilters.filters.push(globalSearchFilter);
        globalSearchFilter = existingFilters;
    }
    viewModel.goalJobs.filter(globalSearchFilter);
},
clearAllFilters: function () {
    viewModel.goalJobs.filter();
    viewModel.goalJobs.filter({ filters: [{ field: "Goal", operator: "eq", value: true }] });
    viewModel.set("searchText", "");
},
searchText: "",
JobIdTemplate: function (jobid) {
    return '<a href="/goto/' + jobid + '" target="_blank">' + jobid + '</a>';
},
loadSettings: function () {
    if (localStorage["dvJobGoalGrid-grid-filters"]) {
        viewModel.goalJobs.filter(JSON.parse(localStorage["dvJobGoalGrid-grid-filters"]));
    }
    if (localStorage["dvJobGoalGrid-grid-groups"]) {
        viewModel.goalJobs.group(JSON.parse(localStorage["dvJobGoalGrid-grid-groups"]));
    }
}
});
kendo.bind($("#dvJobs"), viewModel);
viewModel.loadSettings();

我正在尝试保存用户的首选项（选项），例如当用户更改列顺序，分组和/或应用过滤器时，保存在本地存储中，并且当该用户返回页面时，浏览器应读取本地存储并将其应用于网格。我可以使用下面的代码找到过滤器和分组的方法，该代码在用户离开网页时运行。

   window.onbeforeunload = function () {
            localStorage["dvJobGoalGrid-grid-filters"] = JSON.stringify(viewModel.goalJobs.filter());
            localStorage["dvJobGoalGrid-grid-groups"] = JSON.stringify(viewModel.goalJobs.group());
            return;
        }

然后下面的代码读取本地存储并将过滤器和摸索应用于网格

kendo.bind($("#dvJobs"), viewModel);
viewModel.loadSettings();

但是我找不到如何从viewModel.goalJobs中检索重新排序的列列表，也找不到如何动态应用它。

当用户离开页面时有没有办法存储所有设置（选项）并在他/她回来时应用相同的设置？有一些使用非MVVM绑定方式执行此操作的示例，但使用MVVM看不到任何东西。

带有MVVM绑定的JQuery Kendo UI网格上状态重新排序的列的状态持久性

0 个答案: