关于样式与复选框校验

https://demo.grapecity.com.cn/wijmo/demos/Grid/Overview/vue，替换代码在附件
1，加载完默认除edit列外其余列背景色为灰色

2，复选框选中的行指定列可编辑，指定列背景色变为白色，取消选中变为灰色
3，复选框取消选中校验所在行，校验不通过不能取消选中

测试了一下，目前可以用过wijmo的CollectionView来封装你的数据，作为grid 的数据源，这样就可以对数据进行追踪

在CollectionView的collectionChanged事件中，可以进行判断。

还是早上的这个demo链接
https://demo.grapecity.com.cn/wijmo/demos/Grid/Events/Editing/vue

替换script这一部分的代码即可验证，sales为1的时候，才允许不选中

1. <script>
   
2.     import "@grapecity/wijmo.styles/wijmo.css";
   
3.     import 'bootstrap.css';
   
4.     import Vue from 'vue';
   
5.     import '@grapecity/wijmo.vue2.core';
   
6.     import '@grapecity/wijmo.vue2.grid';
   
7.     import { getData } from "./data";
   
8. 
   
9.     let App = Vue.extend({
   
10.         name: "app",
    
11.         data: function() {
    
12.             return {
    
13.                 data: getData(),
    
14.                 view: new wijmo.CollectionView(getData(), {
    
15.                     
    
16.                     trackChanges: true
    
17.                 }),
    
18.                 logText: "please select a range on the grid",
    
19.                 countries: [
    
20.                     "US",
    
21.                     "Germany",
    
22.                     "UK",
    
23.                     "Japan",
    
24.                     "Sweden",
    
25.                     "Norway",
    
26.                     "Denmark"
    
27.                 ]
    
28.             };
    
29.         },
    
30.         methods: {
    
31.             flexInitialized: function(flexgrid) {
    
32.                 this.logText = "";
    
33.                 flexgrid.beginningEdit.addHandler((s, e) => {
    
34.                     let col = s.columns[e.col];
    
35.                     if (col.binding != "overdue"&&col.binding != "id") {
    
36.                         let item = s.rows[e.row].dataItem;
    
37.                         if (!item.overdue) {
    
38.                             // prevent editing overdue items
    
39.                             e.cancel = true;
    
40.                             this.logText = "Overdue items cannot be edited";
    
41.                         }
    
42.                     }
    
43.                 });
    
44.                 flexgrid.cellEditEnding.addHandler((s, e) => {
    
45.                     this.logText = "";
    
46.                     let col = s.columns[e.col];
    
47.                     let item = s.rows[e.row].dataItem;
    
48.                     if (col.binding == "sales" || col.binding == "expenses") {
    
49.                     }
    
50.                 });
    
51.                 flexgrid.formatItem.addHandler((s, e) => {
    
52.                     if (e.panel == s.cells) {
    
53.                         var col = s.columns[e.col], item = s.rows[e.row].dataItem;
    
54.                         e.cell.style.backgroundColor="lightgray";
    
55.                         if(col.binding != "overdue"&&col.binding != "id"){
    
56.                             if(item.overdue){
    
57.                                 e.cell.style.backgroundColor="lightgreen";
    
58.                             }
    
59.                         }
    
60.                         else if(col.binding != "overdue"){
    
61. 
    
62.                         }
    
63.                         
    
64.                     }
    
65.                 });
    
66.                 this.view.collectionChanged.addHandler((s,e)=>{
    
67.                     //在这里就可以判断，当值变化后，sales如果不是1，那么该行失去焦点时，会进行设置
    
68.                     if(e.item.sales!=1){
    
69.                         e.item.overdue=true;
    
70.                     }
    
71.                 });
    
72.             },
    
73. 
    
74.         }
    
75.     });
    
76. 
    
77.     new Vue({ render: h => h(App) }).$mount("#app");
    
78. </script>

复制代码

Richard.Ma 发表于 2023-8-4 16:59
测试了一下，目前可以用过wijmo的CollectionView来封装你的数据，作为grid 的数据源，这样就可以对数据进行 ...

好的，谢谢