如何使用服务器端分页将数据加载到Kendo UI Grid中?

时间:2013-04-25 21:41:18

标签: pagination kendo-ui kendo-grid

我有以下代码构建一个kendo ui网格:

    // build grid columns

    // the check box column is always visible for all users
    var columns = [{
        field:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>', 
        template: '<input class="check rowSelect" id="${id}" type="checkbox" /><label for="${id}"></label>',
        filterable: false,
        width: 33,
        sortable: false // may want to make this sortable later. will need to build a custom sorter.
    }];

    // build the rest of the columns using data provided by the server
    var metrics = initialData.metric;
    for (var i=0; i < metrics.length; i++) {
        var metric = metrics[i];
        var column = {};
        column.field = metric.qualifiedName;
        column.title = metric.label;
        column.width = metric.colWidth;
        // initially hide all columns. we'll know exactly which ones to show after a search
        column.hidden = true;        
        column.type = metric.type;

        // handle special considerations
        if (column.type === 'float' || column.type === 'int') {        

            // format all floats to two decimal places
            if (column.type === 'float') {
                column.format = '{0:n2}';
            }
            // the grid only has a type of number.            

            column.attributes = {'class' : 'right-align'};

            var field = column.field;

            // create a closure to build a function that captures the field variable value
            // in this iteration. Immediately execute the anonymous outer function so 
            // that the inner function is returned as assignment to the footerTemplate
            // variable. The param data will be passed to the function by the grid.
            // That function then executes the buildFooter which has the right field value
            // due to the closure. notice that each invocation of the outer function
            // creates a new scope chain that adds a new inner function.
            column.footerTemplate = (function(field, columnType) {return function() { return buildFooter(field, columnType); }; })(field, metric.type);
            column.type = 'number';

        } else if (column.type === 'date') {
            column.format = '{0:yyyy-MM-dd}';
        } else if (column.field === 'attachments') {
            //column.field = 'text';
            // use a template defined in search.jsp to style this complex
            // object
            column.template = kendo.template($('#attachmentTemplate').html());
            column.sortable = false;
            column.filterable = false;
        } else if (column.type === 'list') {
            column.type = 'string';
        }

        columns.push(column);        
    }

    var toolbarItems = [{ name: 'custom', text: 'Filter', className: 'filterClass k-state-disabled', imageClass: 'k-icon k-i-funnel'},
                        { name: 'view', text: 'View', className: 'viewClass k-state-disabled', imageClass: 'k-icon k-i-search' }];
    // only show build the edit and delete buttons in the toolbar if the
    // user has permissions
    if ($('#hasAdminControls')[0]) {
        toolbarItems.push({ name: 'edit', text: 'Edit', className: 'editClass k-state-disabled' });
        toolbarItems.push({ name: 'destroy', text: 'Delete', className: 'deleteClass k-state-disabled' });
    }

    var options = {

        autoBind: false,
        dataBound: function() {

            alert('dataBound');
            for(var i =0; i <  checkedRows.length; i++){
                $('#'+ checkedRows[i]).attr('checked','checked');
            }            
            $('.rowSelect').click(setGridControlsState);
            setGridControlsState();

            $('.k-grid-content').removeHighlight();
            $('.k-grid-content').highlight(uniqueHighlights);
        },    
         dataSource: {
            //type: 'json',
            //batch: 'true',
            serverPaging: true, // we may need to use paging for performance reasons
            //schema: {
            //    total: 'total'//function(response) { console.log(response); alert('hi2'); return 500; }
            //},
            //schema: {
                //model: Acquisition // if we use a model then complex objects' fields all have string type

            pageSize: 10, 

            //serverFiltering: true, // we may want to use this in the future if client filtering becomes a performance issue
            //serverSorting: true, // we may want to use this in the future if client sorting becomes a performance issue
            transport: { read: 
            function(options) {

                var setupOptions = { 
                        success: function(data, statusText, xhr, $form) {options.success(data); loadSearch(data, statusText, xhr, $form)},
                        type: 'POST',
                        dataType: 'json',
                        data: {skip: options.data.skip, take: options.data.take},
                        url:   '../search.x',
                        error: errorHandler.handle,
                        timeout: 50000
                };
                $('#searchForm').ajaxSubmit(setupOptions);
            }

            }
        },
        height: 600,
        pageable: {
            //numeric: false,
            //previousNext: false,
            messages: {
                display: "{2} Acquisitions"
            },
            pageSizes: true
        },
        sortable: true,
        resizable: true,
        filterable: true,
        toolbar: toolbarItems,
        columns: columns
    };

    // create the grid using the above options
    $('#resultsGrid').kendoGrid(options);

    // for purely aesthetic purposes, move the toolbar to the bottom (by default it's at the top) 
    $('#resultsArea').find('.k-grid-toolbar').insertAfter($('#resultsArea .k-grid-footer'));
    var grid = $('#resultsGrid').data('kendoGrid');
    grid.refresh();

网格最初是隐藏的,但在提交搜索表单后显示。提交搜索表单时,将执行以下功能:

function startSearch(evt) {
    evt.preventDefault();

    showLoadingGrid();
    var grid = $('#resultsGrid').data('kendoGrid');
    grid.dataSource.read();

}

grid.dataSource.read()函数调用将导致对transport.read启动的服务器的AJAX调用。但是,成功函数永远不会被调用,因为kendo会抛出错误。它声明d.oneOfMyObjects未定义kendo.web.min.js(第9行)。当我查看json响应时,我从服务器获得了几个json对象。其中一个对象是一个对象数组。每个对象都有一个名为oneOfMyObjects的属性(它是一个对象)。每个oneOfMyObjects都是非null。所以,我不确定为什么剑道会失败。我正在使用kendoui.2012.3.1315。如何阻止kendo抛出此错误并允许调用我的loadSearch回调函数?

第二次编辑 在options.success(data);

的成功函数中发生错误

修改 编辑问题以包含服务器的输出。请注意,相同的输出工作正常没有严重分页(为了数据安全目的也必须修改输出...我试图保持相同的结构,但希望我没有意外更改,使其非JSON兼容):

{
    "total":500,
    "displayFields":["summary","page","take","pageSize","skip"],
    "object":[{
        "id":16835,
        "date":-2208967200000,
        "type":"Needs Value",
        "nestedObject1":{
            "id":16870,
            "name":"Not Specified",
            "region":{
                "name":"Needs Value"
            }
        },
        "oneOfMyObjects":{
            "id":16923,
            "name":"Needs Value"
        }
    }, {
        "id":16836,
        "date":-2208967200000,
        "type":"Needs Value",
        "nestedObject1":{
            "id":16873,
            "name":"Not Specified",
            "region":{
                "name":"Needs Value"
            }
        },
        "oneOfMyObjects":{
            "id":16925,
            "name":"Needs Value"
        }
    }, /* 8 more records */]
}

第3次修改以包含loadSearch功能

function loadSearch(data, statusText, xhr, $form, options) {

    if (data.validationError) {
        // TODO we need to look at the message from the reply
        // right now though only date validation errors will exist
        dialog.show('Error', 'Please enter dates formatted as yyyy-mm-dd.');
        global.loadingIndicator.hide();
        return;
    }

    checkedRows = [];
    var object= data.object;

    var grid = $('#resultsGrid').data('kendoGrid');

    // clear any filters. This also help with an issue where no 
    // rows are shown due to a filter.
    grid.dataSource.filter({});


    // set the search results data in the grid
    grid.dataSource.data(object);

    // show columns that are either a user preference
    // column (or default set if user has no preferences)
    // or a field matching search data

    // let's only hide/show the delta between
    // previously viewed cols and new cols to display 
    // since it's much faster than hiding all old
    // and then displaying all new cols
    var oldCols = $('#displayColumns').val() || [];

    // the server tells the UI which fields to display
    // based on user preference and fields that that
    // have matching search data
    var newCols = data.displayFields;

    var removedCols = oldCols.diff(newCols);
    for (var i in removedCols) {
        $('#displayColumns option[value="' + removedCols[i] + '"]').removeAttr('selected');
        grid.hideColumn(removedCols[i]);
    }

    var addedCols = newCols.diff(oldCols);
    for (var i in addedCols) {
        grid.showColumn(addedCols[i]);
        $('#displayColumns option[value="' + addedCols[i] + '"]').attr('selected', 'selected');
    }

    // we have to tell the chosen overlay that we updated the list
    $('#displayColumns').trigger('liszt:updated');

    // we have to keep track of the current selected values
    // so that when the user changes to selection we'll 
    // be able to compare to the original selection
    // and now what they changed.
    $('#displayColumns').data('chosen-values', $('#displayColumns').val());


    // display the results
    grid.refresh();

    realignFooter();

    // Highlight search matches so the user can easily see
    // why the record is in the result grid.
    // Unfortunately, the highlights library takes a comma-delimited list.
    // It's problematic when the search results contain a comma.


    // remove previous highlights
    //$('.k-grid-content').removeHighlight();

    uniqueHighlights = data.uniqueHighlights || [];
    $('.k-grid-content').removeHighlight();
    $('.k-grid-content').highlight(uniqueHighlights);

    // reset the controls since all checkboxes have been cleared
    setGridControlsState();

    // register event to capture clicks on grid checkboxes
    // we can't do this during initialization b/c the checkboxes
    // are not yet built. Note: we don't have to remove
    // the events associated with previous checkboxes as 
    // jquery should automatically do this.
    $('.rowSelect').click(setGridControlsState);

    // remove loading indicator
    global.loadingIndicator.hide();

    // style the UI to give the user an option to save the columns again
    $('#saveCols > span').empty().text('Save Columns');
    $('#saveCols').removeClass('k-state-disabled');

}

3 个答案:

答案 0 :(得分:1)

您没有在schema中指定查找数据的位置。你需要说些什么:

schema   : {
    data : "object",
    total: "total"
}

事实上,你没有说明在哪里找到结果会使得显示任何字段都不可能。

关于成功函数永远不会被称为,这样的选项不存在(AFAIK)。

答案 1 :(得分:0)

我只是将其作为评论来澄清对你有用的内容,但是看到代码会更难,所以我会开始这个,看看我是否能完全回答你的问题。

transport: {
    read: {
        url: '@Url.Action("_List", "Check")',
        data: gridParams,
        type: 'POST'
    },
function gridParams() {
        return {
            Field1: $('#fd1').val(),
            Field2: $('#fd2').val(),
            Field3: $('#fd3').val()
        };
    }

fd1-3将是您的搜索表单ID,您需要将参数传递给控制器​​。

然后为您的控制器操作,

[HttpPost]
    public JsonResult _List(string Field1, DateTime? Field2, DateTime? Field3, int skip, int take)
    {

然后你只需使用这些参数来改变你的db.TableName.Where(w =&gt; w.fd1 == Field1&amp;&amp; w.fd2 == Field2 || w.fd3 == Field3).Skip (跳过)

等等。

答案 2 :(得分:0)

  var dataSource = new kendo.data.DataSource({
      serverPaging: true,
      serverSorting: true,
      pageSize : 15,
      transport : {
         read : {
           url : getEmployeeData,
           dataType : "json"
         },
         parameterMap : function(options, operation) {
            if (operation == "read") {
                return {
                  page: dataSource._page,
                  pageSize: dataSource._pageSize
            };
         }
      }
    },
    batch : true,
    schema : {
      data: "data",
      total: "total",
      model : {
        id : "id",
        fields : {
          name : {
            validation : {
              required : true
            }
          }
        }
      }
    }
  });