疑似自定义编辑器的数字类型BUG
这边用了https://demo.grapecity.com.cn/wijmo/demos/Grid/Editing/CustomEditors/vue
这个例子中的自定义编辑器。
因为我们的需求是默认数字这里显示为空所以给amount设置了null。
然后在空白的情况下，强行用输入法输入中文的话就会报
index.js:14 Uncaught TypeError: Cannot read property 'indexOf' of null
at eval (VM85 index.js:14)
因为我们这个项目前端如果遇到报错是会强制跳转到登录页面的，所以不知道有没有解决办法。
代码如下，插入到上面的地址中即可。
<template>
<div class="container-fluid">
<!-- the grid -->
<wj-flex-grid
keyActionTab="CycleOut"
:itemsSource="data"
:initialized="initializeGrid">
<wj-flex-grid-column binding="id" header="ID" :width=40 :isReadOnly=true></wj-flex-grid-column>
<wj-flex-grid-column binding="date" header="Date" format="d"></wj-flex-grid-column>
<wj-flex-grid-column binding="time" header="Time" format="t"></wj-flex-grid-column>
<wj-flex-grid-column binding="country" header="Country"></wj-flex-grid-column>
<wj-flex-grid-column binding="product" header="Product"></wj-flex-grid-column>
<wj-flex-grid-column binding="amount" header="Amount" format="n2"></wj-flex-grid-column>
</wj-flex-grid>
</div>
</template>
<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import "@grapecity/wijmo.vue2.grid";
import * as wjcCore from '@grapecity/wijmo';
import * as wjcGrid from '@grapecity/wijmo.grid';
import * as wjcInput from '@grapecity/wijmo.input';
import { CustomGridEditor } from './customEditor';
new Vue({
el: "#app",
data: {
data: null,
countries: ['US', 'Germany', 'UK' ,'Japan', 'Italy', 'Greece'],
products: [
{ id: 0, name: 'Widget', unitPrice: 23.43 },
{ id: 1, name: 'Gadget', unitPrice: 12.33 },
{ id: 2, name: 'Doohickey', unitPrice: 53.07 }
]
},
methods:{
initializeGrid(flex){
this.data = this._getData();
// add custom editors to the grid
new CustomGridEditor(flex, 'date', wjcInput.InputDate, {
format: 'd'
});
new CustomGridEditor(flex, 'time', wjcInput.InputTime, {
format: 't',
min: new Date(2000, 1, 1, 7, 0),
max: new Date(2000, 1, 1, 22, 0),
step: 30
});
new CustomGridEditor(flex, 'country', wjcInput.ComboBox, {
itemsSource: this.countries
});
new CustomGridEditor(flex, 'amount', wjcInput.InputNumber, {
max: 99999999999999,
min: -9999999999999,
showSpinner: false,
step: 1,
format: 'n0',
isRequired: false,
});
// create an editor based on a ComboBox
let multiColumnEditor = new CustomGridEditor(flex, 'product', wjcInput.ComboBox, {
headerPath: 'name',
displayMemberPath: 'name',
itemsSource: this.products
});
// customize the ComboBox to show multiple columns
let combo = multiColumnEditor.control;
combo.listBox.formatItem.addHandler((s, e) => {
e.item.innerHTML = '<table><tr>' +
'<td style="width:30px;text-align:right;padding-right:6px">' + e.data.id + '</td>' +
'<td style="width:100px;padding-right:6px"><b>' + e.data.name + '</b></td>' +
'<td style="width:80px;text-align:right;padding-right:6px">' +
wjcCore.Globalize.format(e.data.unitPrice, 'c') +
'</td>' +
'</tr></table>';
});
},
_getData() {
// create some random data
let data = [];
let dt = new Date();
for (let i = 0; i < 100; i++) {
data.push({
id: i,
date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
time: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
country: this.countries,
product: this.products.name,
amount: null,
discount: Math.random() / 4
});
}
return data;
}
}
});
</script>
<style>
.wj-flexgrid {
height: 300px;
margin-bottom: 12px;
}
.wj-flexgrid .wj-cell {
padding: 6px 3px;
}
body {
margin-bottom: 24px;
}
</style>
具体操作是在Amount底下，用中文输入法输入中文，就会在浏览器的控制台中报错。
你好，这个问题比较麻烦，我详细解释一下：
首先，在线示例中Vue版本的示例看不到完整代码，建议对照官网下载的产品包中以下路径的完整示例：
wijmo-5.20201.663\samples\Grid\CustomCells\CustomEditors\vue
或者对照purejs版本的示例中，针对CustomGridEditor的具体实现来看：
https://demo.grapecity.com.cn/wijmo/demos/Grid/Editing/CustomEditors/purejs
实际上CustomGridEditor是一个自定义的类，通过利用FlexGrid原生的事件来实现替换编辑组件，实现“自定义”编辑组件的需求。
目前来讲，CustomGridEditor类只针对页面上用到的三种下拉组件做了实现，想实现这里的InputNumber，需要在这个基础上做一定修改，推荐参考这篇文章：
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=76339&extra=page%3D1 你好，正在调研这个问题，预计12点30前回复。 KevinChen 发表于 2020-6-18 09:00
你好，正在调研这个问题，预计12点30前回复。
你好，有进展了吗？
页:
[1]