Question

您好我正在使用aui-datatable插件将我的数据库中的一些数据解析为一个表但是我想在我的列中添加一些基本的排序。 Bellow你可能会看到渲染数据表的函数“renderProducts”。此外，bellow是一个传递到表格渲染器的示例列对象。

var API= (function(Y){

    var settings = {
        serviceURL : null
    };

    var getServiceAttribute = function( attribute ) {
        return '_openpimadmin_WAR_OpenTest_' + attribute;
    }

    var getServiceURL = function( service ) {

        return settings.serviceURL + '&p_p_resource_id=' + service;
    };

    var service = function( service, dataSet, handlers ){

        var serviceData = {};
        var serviceHandlers = {
                start   : function(){},
                success : function(){},
                failure : function(){},
                end     : function(){}
        };

        for (prop in dataSet) {
            serviceData[getServiceAttribute(prop)] = dataSet[prop];
        }

        for (prop in handlers) {
            if ( serviceHandlers.hasOwnProperty(prop) && typeof handlers[prop] === 'function') {
                serviceHandlers[prop] = handlers[prop];
            }
        }

        Y.io(
            getServiceURL( service ), 
            {
                method : 'POST',
                data : serviceData,
                on : {
                    start : function( transactionID ) {
                        serviceHandlers.start(transactionID);
                    },
                    success : function( transactionID, response ) {

                        var parsed = Y.JSON.parse(response.responseText);

                        if (parsed.success === true){
                            serviceHandlers.success( transactionID, parsed );
                        } else {
                            console.log('Service [' + service + '] error: ' + parsed.error);
                        }

                    },
                    failure : function( transactionID, response ) {
                        serviceHandlers.failure( transactionID, response );
                    },
                    end : function( transactionID ) {
                        serviceHandlers.end( transactionID );
                    }
                }
            }
        );

    }

    return {

        services : {

            getProducts : function( dataSet, handlers ){
                dataSet = dataSet || {};
                handlers = handlers || {};
                service( 'getProducts', dataSet, handlers );
            },

            getProductsTableAttributeHeaders : function( dataSet, handlers) {
                dataSet = dataSet || {};
                handlers = handlers || {};
                service( 'getProductsTableAttributeHeaders', dataSet, handlers );
            },

        },

        views : {

            renderProducts : function( el, columns, dataSet ) {

                Y.one(el).get('childNodes').remove();

                new Y.DataTable.Base({
                    columnset : columns,
                    recordset : dataSet,
                    width: '100%'
                }).render(el);
            }

        },


        get : function( prop ) {
            return settings[prop];
        },

        set : function( options ) {
            settings = Y.merge( settings, options );
        }
    };

})( YUI().use('node', 'io', 'aui-datatable', 'datatable-sort', function(Y){return Y;}) );

列对象：

Object {key: "name", label: "Όνομα", allowHTML: true, emptyCellValue: "<em>(not set)</em>", sortable: true}

我面临的问题是排序无处可见，列似乎不是交互式的，用户无法对它们进行排序，尽管表格正常呈现。

提前谢谢。

PS：我是YUI（）的新手。

Answer 1

您需要确保对需要排序的列进行sortable：true设置。

这是一个带有排序功能的real world example

Answer 2

这似乎是问题所在：

new Y.DataTable.Base({
                    columnset : columns,
                    recordset : dataSet,
                    width: '100%'
                }).render(el);

应该是这样的：

new Y.DataTable({
                    columnset : columns,
                    recordset : dataSet,
                    width: '100%'
                }).render(el);

YUI数据表 - 排序不起作用

2 个答案: