关于样式与复选框校验

登录

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

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

Richard.Ma · Richard.Ma

本帖最后由 Richard.Ma 于 2023-8-4 17:01 编辑

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

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

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

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

<script>
import "@grapecity/wijmo.styles/wijmo.css";
import 'bootstrap.css';
import Vue from 'vue';
import '@grapecity/wijmo.vue2.core';
import '@grapecity/wijmo.vue2.grid';
import { getData } from "./data";
let App = Vue.extend({
name: "app",
data: function() {
return {
data: getData(),
view: new wijmo.CollectionView(getData(), {
trackChanges: true
}),
logText: "please select a range on the grid",
countries: [
"US",
"Germany",
"UK",
"Japan",
"Sweden",
"Norway",
"Denmark"
]
};
},
methods: {
flexInitialized: function(flexgrid) {
this.logText = "";
flexgrid.beginningEdit.addHandler((s, e) => {
let col = s.columns[e.col];
if (col.binding != "overdue"&&col.binding != "id") {
let item = s.rows[e.row].dataItem;
if (!item.overdue) {
// prevent editing overdue items
e.cancel = true;
this.logText = "Overdue items cannot be edited";
}
}
});
flexgrid.cellEditEnding.addHandler((s, e) => {
this.logText = "";
let col = s.columns[e.col];
let item = s.rows[e.row].dataItem;
if (col.binding == "sales" || col.binding == "expenses") {
}
});
flexgrid.formatItem.addHandler((s, e) => {
if (e.panel == s.cells) {
var col = s.columns[e.col], item = s.rows[e.row].dataItem;
e.cell.style.backgroundColor="lightgray";
if(col.binding != "overdue"&&col.binding != "id"){
if(item.overdue){
e.cell.style.backgroundColor="lightgreen";
}
}
else if(col.binding != "overdue"){
}
}
});
this.view.collectionChanged.addHandler((s,e)=>{
//在这里就可以判断，当值变化后，sales如果不是1，那么该行失去焦点时，会进行设置
if(e.item.sales!=1){
e.item.overdue=true;
}
});
},
}
});
new Vue({ render: h => h(App) }).$mount("#app");
</script>

复制代码

xiaolong · xiaolong

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

好的，谢谢

Richard.Ma · Richard.Ma

		自动登录	找回密码
密码			立即注册

[已处理] 关于样式与复选框校验

最佳答案

3 个回复

本帖子中包含更多资源

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人