这边用了
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[Math.floor(Math.random() * this.countries.length)],
- product: this.products[Math.floor(Math.random() * this.products.length)].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>
|
陕公网安备：61019002000258