javascript - 从剑道网格中列的每个日期添加或减去一天的小部件
问题描述
我想为我的剑道网格的每一列创建一个小部件,可以从该特定列的每个日期中添加或减去一天。这些是列
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),
},
];
我想在每列下方添加这些小部件。你能帮我理解我该怎么做吗?
解决方案
这是我想出的。您将需要使用页脚模板(https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.footertemplate)。在此模板中,假设您有 2 个按钮。你可以使用任何你想要的东西,并按照你想要的方式设计它。这里重要的是事件。
<button class="subtract-btn" data-column-id="Column1">−</button>
<button class="add-btn" data-column-id="Column1">+</button>
现在设置一些 JQuery 来处理这样的事件。当然,这假设您尝试更改的日期绑定到该列。在这种情况下,该日期称为 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
}
}
推荐阅读
- reactjs - 如何配置 webpack 以从其他 lerna 包中转译文件(从 create-react-app 中弹出)
- java - 如何使用微服务架构构建博客应用程序?
- php - 作曲家更改缓存目录
- angular - 在 Ionic 4 中从我的服务获取值到我的页面
- javascript - 通过 NodeList 中的内部文本选择子节点
- c# - 具有参数类型限制的泛型类型不能传递给具有非泛型参数的方法
- php - 在php中我可以下载excel文件,但是当我在codeigniter中使用相同的代码时,它直接发送HTML内容而不是下载XLS文件?
- c# - 为什么签署pdf文件时PFX的公钥不同?
- php - 如何在 Mysql 中使用多对多关系更新表
- python-3.x - 如何使用 smtplib 在 python 中发送 cc 邮件