数值类型带百分比控制显示

假设真实数值是0.234567，显示在页面上希望是23.4567%，并且进入编辑的时候应该是23.4567 或者是 0.234567    ，但是我发现被内置控制了，只能保留两位小数，能不能不做这方面的控制，用户想输入0.23就显示23% 输入0.23456就显示23.456%

你好，这个目前尚不支持，针对数字的格式是设置在column上的，一列数字的格式是确定的，没办法在随cell走的同时还能确保编辑功能保持正常。

用事件可以实现，参考代码：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import { Globalize } from '@grapecity/wijmo';
   
5. import { FlexGrid, Row, AllowMerging } from '@grapecity/wijmo.grid';
   
6. document.readyState === 'complete' ? init() : window.onload = init;
   
7. function init() {
   
8.     // generate some random data
   
9.     var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];
   
10.     for (var i = 0; i < 200; i++) {
    
11.         data.push({
    
12.             id: i,
    
13.             country: countries[i % countries.length],
    
14.             sales: Math.random() * 10000,
    
15.             expenses: Math.random() * 5000,
    
16.         });
    
17.     }
    
18.     // show data in a grid
    
19.     var theGrid = new FlexGrid('#theGrid', {
    
20.         isReadOnly: false,
    
21.         allowResizing: 'None',
    
22.         allowDragging: 'None',
    
23.         allowSorting: false,
    
24.         selectionMode: 'RowRange',
    
25.         alternatingRowStep: 0,
    
26.         autoGenerateColumns: false,
    
27.         columns: [
    
28.             { binding: 'id', header: 'ID', width: 50 },
    
29.             { binding: 'country', header: 'Country' },
    
30.             { binding: 'sales', header: 'Sales', width: 80, format: 'n0' },
    
31.             { binding: 'salesDiff', header: 'Diff', dataType: 'Number', width: 80 },
    
32.             { binding: 'expenses', header: 'Expenses', width: 80, format: 'n0' },
    
33.             { binding: 'expensesDiff', header: 'Diff', dataType: 'Number', width: 80 }
    
34.         ],
    
35.         itemsSource: data,
    
36.     });
    
37.     // insert extra column header row
    
38.     var ch = theGrid.columnHeaders, hr = new Row();
    
39.     ch.rows.insert(0, hr);
    
40.     // fill out headings in extra header row
    
41.     for (var i = 0; i < theGrid.columns.length; i++) {
    
42.         var hdr = ch.getCellData(1, i, false);
    
43.         if (hdr == 'Diff')
    
44.             hdr = ch.getCellData(1, i - 1, false);
    
45.         ch.setCellData(0, i, hdr);
    
46.     }
    
47.     // allow merging across and down extra header row
    
48.     theGrid.allowMerging = AllowMerging.ColumnHeaders;
    
49.     hr.allowMerging = true;
    
50.     theGrid.columns[0].allowMerging = true;
    
51.     theGrid.columns[1].allowMerging = true;
    
52.     // custom rendering for headers and "Diff" columns
    
53.     theGrid.formatItem.addHandler(function (s, e) {
    
54.         // center-align column headers
    
55.         if (e.panel == s.columnHeaders) {
    
56.             e.cell.innerHTML = '<div class="v-center">' +
    
57.                 e.cell.innerHTML + '</div>';
    
58.         }
    
59.     });
    
60. 
    
61.     theGrid.cellEditEnded.addHandler(function (s, e) {
    
62.         if (e.panel == s.cells) {
    
63.             var col = s.columns[e.col];
    
64.             if (col.binding == 'salesDiff' || col.binding == 'expensesDiff'){
    
65.                 var val = s.getCellData(e.row, e.col);
    
66.                 if(!isNaN(val)){
    
67.                     val *= 100;
    
68.                     s.setCellData(e.row, e.col, val + "%", false, true);
    
69.                 }
    
70.             }
    
71.         }
    
72.     });
    
73. }
    

复制代码

示例地址：https://demo.grapecity.com.cn/wi ... ionalStyling/purejs
把这段代码完整替换app.js可以看到效果

KevinChen 发表于 2020-7-10 13:43
用事件可以实现，参考代码：

你好，这样的话就把实际值变了 ，在数据角度只希望是以0.2345这样的形式展现，如果设置以百分比新式的话希望页面是23.45%这样映射，更可以说希望不要有输入框的默认几位保留小数这样的限制，完全由用户自定义输入