javascript - 在剑道网格中的列的每个日期中添加或减去一天的小部件

Question

我想为我的剑道网格的每一列创建一个小部件，它可以从该特定列的每个日期添加或减去一天。这些是列

initGridReparti: function initGridReparti() {

    var gridColumns = [
    {
        field: "repartoDescr",
        title: "Reparto",
        width: 200
    },

    { 
        field: "dataAtt", 
        title: "Data Attivazione",
        format:"{0:dddd dd MMM yyyy}", 
        width:100
    },
    {
        field: "dataChimpdv",
        title: "Data Chiusura Impegni PDV",
        format:"{0:dddd dd MMM yyyy}", 
        width: 100
    },
    {
        field: "dataChimpsede",
        title: "Data Chiusura Impegni Sede",
        format:"{0:dddd dd MMM yyyy}", 
        width: 100
    },

    {
        field: 'statoPubblicazioneERP',
        title: 'Stato pubblicazione ERP',
        attributes: { 'class': 'align-center' },
        width: 100,
        template: function (dataItem) {
            //var sezioneDescr = _.get(_.find(this._filters.dataSources.sezioniVolantinoCurrentPromo, 'id', dataItem.sezioneId), 'descrizione', '');
            var statoPubblicazioneERPId = _.get(dataItem, 'statoPubblicazioneERP', 1);
            var statoPubblicazioneERPCode = commonLookupData.getItemCodeById(constants.commonLookupDataNames.statiPubblicazione, statoPubblicazioneERPId);
            var statoPubblicazioneERPDescr = commonLookupData.getItemDescrById(constants.commonLookupDataNames.statiPubblicazione, statoPubblicazioneERPId);

            return '' +
                '<span class="ff-item ajax-loading" data-id-reparto="' + dataItem.repartoId + '"><img src="img/ajaxLoading2.gif" /></span> ';
        }.bind(this),
    },
];

我想在每列下方添加这些小部件。你能帮我理解我该怎么做吗？

Answer 1

这是我想到的。您将需要使用页脚模板( https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.footertemplate )。在此模板中，假设您有 2 个按钮。您可以使用任何您想要的东西并按照您想要的方式设计它。这里重要的是事件。

<button class="subtract-btn" data-column-id="Column1">&minus;</button>
<button class="add-btn" data-column-id="Column1">&plus;</button>

现在设置一些 JQuery 来处理事件，如下所示。当然，这假设您尝试更改的日期已绑定(bind)到该列。在本例中，该日期称为 Column1

$(document).ready(function () {
    $('#grid').on('click', '.subtract-btn', subtractDate);
    $('#grid').on('click', '.add-btn', addDate);
});

function subtractDate(e) {
    var columnId = $(this).data('columnId');
    var data = $('#grid').data('kendoGrid').dataSource.data();
    var dataLen = data.length;
    var item, columnValue;

    for (var i = 0; i < dataLen; i++) {
        item = data[i];
        columnValue = item[columnId];
        columnValue.setDate(columnValue.getDate() - 1); //I prefer to use momentjs
        item.set(columnId, columnValue); //Forces UI update
    }
}

function addDate(e) {
    var columnId = $(this).data('columnId');
    var data = $('#grid').data('kendoGrid').dataSource.data();
    var dataLen = data.length;
    var item, columnValue;

    for (var i = 0; i < dataLen; i++) {
        item = data[i];
        columnValue = item[columnId];
        columnValue.setDate(columnValue.getDate() + 1); //I prefer to use momentjs
        item.set(columnId, columnValue); //Forces UI update
    }
}