请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Iris_qjj

注册会员

2

主题

10

帖子

80

积分

注册会员

积分
80
  • 92

    金币

  • 10

    帖子

  • 0

    精华

Iris_qjj
注册会员   /  发表于:2019-9-26 16:19  /   查看:207  /  回复:12
目前的日历: 点击日历中某一天会触发valuechanged(底色变色了),再次点击该天就不能触发valuechanged的了
期望: 点击日历中某一天会触发valuechanged,并且底色变色,再次点击该天再触发valuechanged,底色消失(颜色变化已经解决,主要是想触发valuechanged)
求解决方案呀~

12 个回复

倒序浏览
Wijmo5User
初级会员   /  发表于:2019-9-28 13:37:18
推荐
本帖最后由 Wijmo5User 于 2019-9-28 13:44 编辑

以下这个示例或许能解决楼主的需求。

源代码如下:
  1. import 'bootstrap.css';
  2. import '@grapecity/wijmo.styles/wijmo.css';
  3. import './styles.css';
  4. import * as wijmo from '@grapecity/wijmo';
  5. import * as input from '@grapecity/wijmo.input';
  6. //
  7. document.readyState === 'complete' ? init() : window.onload = init;
  8. //
  9. function init() {
  10.         const elDayMap = new WeakMap();
  11.         const selectedDaySet = new Set();
  12.         const toYmd = (d) => wijmo.Globalize.formatDate(d, 'yyyy-MM-dd');
  13.         // the calendar
  14.         const theCalendar = new input.Calendar('#theCalendar', {
  15.                 value: null,
  16.                 isReadOnly: true,
  17.                 itemFormatter: (date, el) => elDayMap.set(el, date)
  18.         });
  19.         theCalendar.addEventListener(theCalendar.hostElement, 'click', (e) => {
  20.                 const clickedDay = elDayMap.get(e.target);
  21.                 if (clickedDay == null) return;

  22.                 const dateString = toYmd(clickedDay);
  23.                 if (selectedDaySet.has(dateString)) {
  24.                         selectedDaySet.delete(dateString);
  25.                 } else {
  26.                         selectedDaySet.add(dateString);
  27.                 }
  28.                 showSelectedDateList();
  29.                 theCalendar.invalidate();
  30.         });
  31.         theCalendar.formatItem.addHandler((sender, args) => {
  32.                 const selected = selectedDaySet.has(toYmd(args.data));
  33.                 wijmo.toggleClass(args.item, 'wj-state-selected', selected);
  34.                 wijmo.setAttribute(args.item, 'aria-selected', selected);
  35.         });
  36.         //
  37.         // show the currently selected date
  38.         function showSelectedDateList() {
  39.                 const el = document.querySelector('#theCalendarOutput');
  40.                 el.textContent = '';
  41.                 selectedDaySet.forEach((d) => {
  42.                         el.textContent = el.textContent + '[' + d + '] ';
  43.                 });
  44.                 el.textContent = el.textContent.trim();
  45.         }
  46.         showSelectedDateList();
  47. }
复制代码


如果想查看以上代码的运行效果,可以打开以下官方示例页面:
WijmoJS 示例 - 输入(Input) - 日历(Calendar) - 概览(Overview) - ES6

在运行效果面板的下方,有一个源码编辑器面板。
在源码编辑器面板的“app.js”页签中,将以下内容替换成上面的那段代码:

  1. import 'bootstrap.css';
  2. import '@grapecity/wijmo.styles/wijmo.css';
  3. import './styles.css';
  4. import * as wijmo from '@grapecity/wijmo';
  5. import * as input from '@grapecity/wijmo.input';
  6. //
  7. document.readyState === 'complete' ? init() : window.onload = init;
  8. //
  9. function init() {
  10.         // the calendar
  11.         let theCalendar = new input.Calendar('#theCalendar', {
  12.                 valueChanged: () => showCurrentDate()
  13.         });
  14.         //
  15.         // show the currently selected date
  16.         function showCurrentDate() {
  17.                 let el = document.querySelector('#theCalendarOutput');
  18.                 el.textContent = wijmo.Globalize.format(theCalendar.value, 'D');
  19.         }
  20.         showCurrentDate();
  21. }
复制代码


点击源码编辑器面板右上角的“运行”按钮。
在运行效果面板中点击日历组件中的元素,查看日历组件下方的输出。


评分

参与人数 1金币 +2000 收起 理由
KevinChen + 2000 很给力!

查看全部评分

回复 使用道具 举报 1 0
KevinChen
超级版主   /  发表于:2019-9-26 18:08:51
沙发
您好,您描述的是哪个产品的问题?SpreadJS和Wijmo都有这个事件,请指出具体产品,或者把您的实现逻辑打包成demo上传帖子附件,我们重现排查一下问题。
请点击评分,对我的服务做出评价!5分为非常满意!

葡萄城技术服务团队
官方网站:https://www.grapecity.com.cn/
SpreadJS v12.2 全新发布:打印、拖拽全面增强
回复 使用道具 举报
Iris_qjj
注册会员   /  发表于:2019-9-27 13:21:46
板凳
KevinChen 发表于 2019-9-26 18:08
您好,您描述的是哪个产品的问题?SpreadJS和Wijmo都有这个事件,请指出具体产品,或者把您的实现逻辑打包 ...

Wijmo calendar里面的valueChanged,目前是点过一次日期,再次点击同一天不会触发valuechanged
回复 使用道具 举报
KevinChen
超级版主   /  发表于:2019-9-27 17:20:24
地板
您好,valuechanged 事件确实是只有当calendar的值改变时才会触发,

不太了解为何您想要在点击时一定触发这个事件,或许您也可以尝试一下flexgrid的EditEnded事件:

https://demo.grapecity.com.cn/wi ... .html#celleditended
请点击评分,对我的服务做出评价!5分为非常满意!

葡萄城技术服务团队
官方网站:https://www.grapecity.com.cn/
SpreadJS v12.2 全新发布:打印、拖拽全面增强
回复 使用道具 举报
Iris_qjj
注册会员   /  发表于:2019-9-27 17:54:42
5#
KevinChen 发表于 2019-9-27 17:20
您好,valuechanged 事件确实是只有当calendar的值改变时才会触发,

不太了解为何您想要在点击时一定触 ...

你好:
       业务需求是:做一个日历,点击其中一天底色变色,然后这一天会被放进addList,再次点击这天底色消失(即取消选择),然后从addList中排除
       所以现在没有已经封装这种事件是么?
回复 使用道具 举报
KevinChen
超级版主   /  发表于:2019-9-27 18:15:03
6#
您好,calendar确实不支持这个操作,包括内置的点击事件也不能取消掉选中的日期,

您是否可以做一个单独的删除或维护addList顺序的组件,以便于实现您的功能?
请点击评分,对我的服务做出评价!5分为非常满意!

葡萄城技术服务团队
官方网站:https://www.grapecity.com.cn/
SpreadJS v12.2 全新发布:打印、拖拽全面增强
回复 使用道具 举报
KevinChen
超级版主   /  发表于:2019-9-29 09:16:44
8#
Wijmo5User 发表于 2019-9-28 13:37
以下这个示例或许能解决楼主的需求。

源代码如下:

感谢你的回答!!
你的代码完整,思路清晰,还有运行效果演示,
最高标准奖励2000金币,请收好!

评分

参与人数 1满意度 +3 收起 理由
Wijmo5User + 3 赞一个!

查看全部评分

请点击评分,对我的服务做出评价!5分为非常满意!

葡萄城技术服务团队
官方网站:https://www.grapecity.com.cn/
SpreadJS v12.2 全新发布:打印、拖拽全面增强
回复 使用道具 举报
Iris_qjj
注册会员   /  发表于:2019-10-7 10:07:56
9#
Wijmo5User 发表于 2019-9-28 13:37
以下这个示例或许能解决楼主的需求。

源代码如下:

万分感谢!!~~撒花撒花
回复 使用道具 举报
KevinChen
超级版主   /  发表于:2019-10-8 08:58:37
10#
为乐于助人的大神鼓掌~
请点击评分,对我的服务做出评价!5分为非常满意!

葡萄城技术服务团队
官方网站:https://www.grapecity.com.cn/
SpreadJS v12.2 全新发布:打印、拖拽全面增强
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册