找回密码
 立即注册

QQ登录

只需一步,快速开始

wss.

初级会员

49

主题

149

帖子

452

积分

初级会员

积分
452

[已处理] format格式化问题

wss.
初级会员   /  发表于:2020-6-3 09:41  /   查看:6611  /  回复:16
你好,对于列上绑定format可以格式化当前列的信息,但是可能存在一行为一种格式(例如一行都是时间日期格式yyyy-MM-dd hh:ss),那么,请问在页面上如何渲染当前行的格式为所需格式

16 个回复

倒序浏览
wss.
初级会员   /  发表于:2020-6-3 09:43:37
沙发
1、 我用过formatItem的
  1.         var fmt='yyyy-MM-dd hh:ss';
  2.         e.cell.innerHTML=wijmo.Globalize.format(s.rows[e.row].dataItem.Time, fmt)
复制代码
但是这只是浅层次的改变,在触发编辑时依然会是默认的日期格式(yyyy-MM-dd)
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-6-3 13:54:55
板凳
您好,format配置的维度都是列上的,如果想在不同行的同一列显示不同的格式,可以直接将数据源修改为string格式。
回复 使用道具 举报
wss.
初级会员   /  发表于:2020-6-3 14:06:32
地板
KevinChen 发表于 2020-6-3 13:54
您好,format配置的维度都是列上的,如果想在不同行的同一列显示不同的格式,可以直接将数据源修改为string ...

我尝试了直接更改数据源为yy-MM-dd hh:ss 格式,页面的确可以正常显示,但是在我进行编辑之后页面又恢复默认的yyyy/MM/dd 格式
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-6-3 15:28:20
5#
你好,请参考这个示例:

https://demo.grapecity.com.cn/wi ... nding/Basics/purejs

将以下代码完整替换掉app.js即可看到效果:

  1. import 'bootstrap.css';
  2. import '@grapecity/wijmo.styles/wijmo.css';
  3. import { SortDescription, format } from '@grapecity/wijmo';
  4. import { FlexGrid } from '@grapecity/wijmo.grid';
  5. document.readyState === 'complete' ? init() : window.onload = init;
  6. function init() {
  7.     // create some random data
  8.     var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  9.     var data = [];
  10.     for (var i = 0; i < countries.length; i++) {
  11.         data.push({
  12.             id: i,
  13.             country: "20-06-03 15:27",
  14.             sales: '20-06-03 15:27',
  15.             expenses: '20-06-03 15:27'
  16.         });
  17.     }
  18.     // bind a grid to the raw data
  19.     var theGrid = new FlexGrid('#theGrid', {
  20.         allowSorting: false,
  21.         showSort: false,
  22.         autoGenerateColumns: false,
  23.         columns: [
  24.             { binding: 'country', header: 'Country', width: '2*' },
  25.             { binding: 'sales', header: 'Sales', width: '*'},
  26.             { binding: 'expenses', header: 'Expenses', width: '*'}
  27.         ],
  28.         itemsSource: data
  29.     });
  30.     // show the current item
  31.     var selItemElement = document.getElementById('selectedItem');
  32.     function updateCurrentInfo() {
  33.         selItemElement.innerHTML = format('Country: <b>{country}</b>, Sales: <b>{sales:c0}</b> Expenses: <b>{expenses:c0}</b>', theGrid.collectionView.currentItem);
  34.     }
  35.     // update current item now and when the grid selection changes
  36.     updateCurrentInfo();
  37.     theGrid.collectionView.currentChanged.addHandler(updateCurrentInfo);
  38.     // sort the data by country
  39.     var sd = new SortDescription('country', true);
  40.     theGrid.collectionView.sortDescriptions.push(sd);
  41. }
复制代码
回复 使用道具 举报
wss.
初级会员   /  发表于:2020-6-3 19:04:21
6#
本帖最后由 wss. 于 2020-6-3 19:13 编辑

我可能没有描述清楚,因为是对于行上的,所以不能绑定列的format格式


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-6-4 09:39:28
7#
第二张截图中用到的是自定义编辑器,自定义编辑器的样式设置的是编辑时样式,但回填时还是date类型,回填逻辑如图:



在这里给FlexGrid的单元格设置一个格式化后的字符串即可,也可以根据自己的业务逻辑加一些判断,灵活处理。

如果仍然无法解决问题,请提供一个能重现问题的可运行的Demo。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
wss.
初级会员   /  发表于:2020-6-4 18:10:23
8#
本帖最后由 wss. 于 2020-6-4 18:29 编辑

我按照您所说的改了一下,发现还有两个问题:
  1. if (saveEdits) {
  2.                 if (!wijmo.isUndefined(ctl['value'])) {
  3.                      var c=wijmo.Globalize.format(ctl['value'], "p4");//我想设置p4的格式
  4.                      console.log(c)  //这里也打印出“2.3400%”
  5.                     this._grid.setCellData(this._rng.row, this._rng.col, c); //设置后页面也没改变,并且页面值变成了0.02  下次触发编辑时值依然是2.0000%
  6.                 }
  7.                 else if (!wijmo.isUndefined(ctl['text'])) {
  8.                     this._grid.setCellData(this._rng.row, this._rng.col, ctl['text']);
  9.                 }
  10.                 else {
  11.                     throw 'Can\'t get editor value/text...';
  12.                 }
  13.                 this._grid.invalidate();
  14.             }
复制代码

  

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-6-5 10:58:50
9#
您好,请提供完整的Demo,我在您的Demo上调试解决
回复 使用道具 举报
wss.
初级会员   /  发表于:2020-6-5 13:44:17
10#
KevinChen 发表于 2020-6-5 10:58
您好,请提供完整的Demo,我在您的Demo上调试解决

请查阅

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部