html [kendo] [web]使用Kendo Grid的自定义编辑器

Posted 2021-05-11

//The Kendo UI Grid makes it easy to display and edit your data in a tabular format.  By default, the grid will use a TextBox for string and numeric data columns and a DropDownList for editing columns with a list of options.  What if you want to use a different editor type?  I’ll demonstrate two examples of using a custom editor for a grid column: MultiSelect and NumericTextBox.
//Custom MultiSelect Editor
//There are a few steps to use a MultiSelect as a column editor.  The first is to make sure your data is formatted correctly.  Looking at this sample DataSource, we will use a MultiSelect editor for our “countries” property.  If you specify a schema, notice how I do NOT give a type for countries because there is no “array” type and we don’t want Kendo to try to parse our array into a different format.  We want to leave it how it is.

(function () {

    var multiSelectEditor = function (container, options) {
        $('<input data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoMultiSelect({
            suggest: true,
            dataSource: options.values
        });
    };

    var numericEditor = function (container, options) {
        $('<input data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoNumericTextBox({
            decimals: 2,
            min: 0,
            format: 'c2'
        });
    };

    var multiSelectArrayToString = function (item) {
        return item.countries.join(', ');
    };

    var vm = kendo.observable({
        countries: ['Canada', 'Mexico', 'United States'],
        dataSource: new kendo.data.DataSource({
            data: [{
                id: 1,
                product: 'X002',
                countries: ['Mexico', 'Canada'],
                price: 0.98
            }, {
                id: 2,
                product: 'X036',
                countries: ['United States'],
                price: 2.96
            }, {
                id: 3,
                product: 'X098',
                countries: [],
                price: 45.90
            }, ],
            schema: {
                model: {
                    id: 'id',
                    fields: {
                        'id': {
                          type: 'number'
                        },
                        'product': {
                          type: 'string'
                        },
                        'countries': {},
                        'price': {
                          type: 'number'
                        }
                    }
                }
            }
        }),
    });

    $('#grid').kendoGrid({
        columns: [{
            command: 'edit',
            width: '120px',
        }, {
            field: 'product'
        }, {
            field: 'countries',
            editor: multiSelectEditor, // function that generates the multiSelect control
            values: vm.countries, // custom property with array of values
            template: multiSelectArrayToString // template: how to display text in grid
        }, {
            field: 'price',
            editor: numericEditor,
            format: '{0:c}'
        }],
        editable: 'inline',

    });

    kendo.bind('#main', vm);

})()

<div id="main">
    <div id="grid" data-bind="source: dataSource"></div>
</div>