首页 › 求助中心 › 一个可编辑列的isRequired值设置为默认值（null）会导致一个现象

阿Zzzz 发表于 2023-10-16 14:13:57

一个可编辑列的isRequired值设置为默认值（null）会导致一个现象

本帖最后由 阿Zzzz 于 2023-10-16 14:27 编辑

可编辑列的isRequired值设置为默认值（null）

现象一：
第一行数据的改列值为null,该列的其他行即使有值也删不掉
现象二：
第一行数据的改列值不为null,该列的其他行如果有值可以删掉

想知道最初的预想现象是什么~~isRequired默认值的应场景应该是什么

※country为例
现象一代码：
<template>
    <div class="container-fluid">
      <!-- the grid -->
      <wj-flex-grid
            :itemsSource="data"
            :initialized="initializeGrid">
            <wj-flex-grid-column binding="id" header="ID" :width=50 :isReadOnly=true></wj-flex-grid-column>
            <wj-flex-grid-column binding="country" header="Country"></wj-flex-grid-column>
            <wj-flex-grid-column binding="sales" header="Sales" :isRequired=false></wj-flex-grid-column>
            <wj-flex-grid-column binding="expenses" header="Expenses" :isRequired=false></wj-flex-grid-column>
            <wj-flex-grid-column binding="overdue" header="Overdue"></wj-flex-grid-column>
      </wj-flex-grid>
    </div>
</template>

<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import { WjGridModule } from '@grapecity/wijmo.vue2.grid';
import * as wjcGrid from '@grapecity/wijmo.grid';


new Vue({
          el: "#app",
          data: {
      data: null
    },
    methods:{
      initializeGrid(flex){
            this.data = this._getData();
            flex.beginningEdit.addHandler((s, e) => {
                let item = s.rows.dataItem;
                if (item.overdue) { // prevent editing overdue items
                  e.cancel = true;      
                }
            });
      },
      _getData() {
            // create some random data
            let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
                data = [];
                data.push({
                  id: '-1',
                  country: null,
                  sales: Math.random() * 10000,
                  expenses: Math.random() * 5000,

                });               
            for (let i = 0; i < countries.length; i++) {
                data.push({
                  id: i,
                  country: countries,
                  sales: Math.random() * 10000,
                  expenses: Math.random() * 5000,
                  overdue: i % 4 == 0
                });
            }
            return data;
      }
    }
});
</script>

<style>
    .wj-flexgrid {
      max-height: 200px;
      margin-bottom: 12px;
    }

    body {
      margin-bottom: 24px;
    }
</style>

现象二代码：
<template>
    <div class="container-fluid">
      <!-- the grid -->
      <wj-flex-grid
            :itemsSource="data"
            :initialized="initializeGrid">
            <wj-flex-grid-column binding="id" header="ID" :width=50 :isReadOnly=true></wj-flex-grid-column>
            <wj-flex-grid-column binding="country" header="Country"></wj-flex-grid-column>
            <wj-flex-grid-column binding="sales" header="Sales" :isRequired=false></wj-flex-grid-column>
            <wj-flex-grid-column binding="expenses" header="Expenses" :isRequired=false></wj-flex-grid-column>
            <wj-flex-grid-column binding="overdue" header="Overdue"></wj-flex-grid-column>
      </wj-flex-grid>
    </div>
</template>

<script>
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import Vue from "vue";
import { WjGridModule } from '@grapecity/wijmo.vue2.grid';
import * as wjcGrid from '@grapecity/wijmo.grid';


new Vue({
          el: "#app",
          data: {
      data: null
    },
    methods:{
      initializeGrid(flex){
            this.data = this._getData();
            flex.beginningEdit.addHandler((s, e) => {
                let item = s.rows.dataItem;
                if (item.overdue) { // prevent editing overdue items
                  e.cancel = true;      
                }
            });
      },
      _getData() {
            // create some random data
            let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
                data = [];            
            for (let i = 0; i < countries.length; i++) {
                data.push({
                  id: i,
                  country: countries,
                  sales: Math.random() * 10000,
                  expenses: Math.random() * 5000,
                  overdue: i % 4 == 0
                });
            }
            return data;
      }
    }
});
</script>

<style>
    .wj-flexgrid {
      max-height: 200px;
      margin-bottom: 12px;
    }

    body {
      margin-bottom: 24px;
    }
</style>

Richard.Ma 发表于 2023-10-16 14:13:58

和研发确认的情况如下

默认情况下，Wijmo FlexGrid 不允许空单元格值，并且它不允许您删除单元格值，除非您将该列的 ：isRequired 属性显式设置为 false。

因此，如果删除 ：isRequired=false，则将应用不允许空值的默认行为。

Richard.Ma 发表于 2023-10-16 18:12:56

isRequired默认值是null，但是等同于false，也就是不对列数据做限制，只有true的时候，该单元格有值的时候才不能删除

请 上传一个完成的demo上来重现你说的问题

阿Zzzz 发表于 2023-10-17 09:09:01

本帖最后由 阿Zzzz 于 2023-10-17 09:10 编辑

Richard.Ma 发表于 2023-10-16 18:12
isRequired默认值是null，但是等同于false，也就是不对列数据做限制，只有true的时候，该单元格有值的时候 ...
https://demo.grapecity.com.cn/wijmo/demos/Grid/Editing/Read-only/vue

例如这个demo，把binding="country"的isRequired属性移除，使用其默认属性
在首行插入一条country为null的数据
部分代码如下：

            // create some random data
            let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
                data = [];
            
            //在第一行插入一条country为null的数据
                data.push({
                  id: '-1',
                  country: null,
                  sales: Math.random() * 10000,
                  expenses: Math.random() * 5000
                });

这个时候即使其他country列有值。也删除不了。

我们项目就是产生了一个类似的bug，所以想知道设置为默认值时的应用场景是什么

Richard.Ma 发表于 2023-10-17 17:35:36

这个问题已经重现了，原因得和研发确认，看看是否是bug，还是设计如此

另外，如果你那边要暂时解决问题的话，可以将文本字段设置为空字符串“”来替代null，是可以解决这个问题的。

阿Zzzz 发表于 2023-10-18 09:19:19

Richard.Ma 发表于 2023-10-17 17:35
这个问题已经重现了，原因得和研发确认，看看是否是bug，还是设计如此

另外，如果你那边要暂时解决问题 ...

好的，谢谢，确认好麻烦告知下，需和客户解释

Richard.Ma 发表于 2023-10-18 13:39:19

好的，会在帖子中回复

查看完整版本: 一个可编辑列的isRequired值设置为默认值（null）会导致一个现象