关于样式与复选框校验
https://demo.grapecity.com.cn/wijmo/demos/Grid/Overview/vue，替换代码在附件
1，加载完默认除edit列外其余列背景色为灰色
2，复选框选中的行指定列可编辑，指定列背景色变为白色，取消选中变为灰色
3，复选框取消选中校验所在行，校验不通过不能取消选中
本帖最后由 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;
if (col.binding != "overdue"&&col.binding != "id") {
let item = s.rows.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;
let item = s.rows.dataItem;
if (col.binding == "sales" || col.binding == "expenses") {
}
});
flexgrid.formatItem.addHandler((s, e) => {
if (e.panel == s.cells) {
var col = s.columns, item = s.rows.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>
Richard.Ma 发表于 2023-8-4 16:59
测试了一下，目前可以用过wijmo的CollectionView来封装你的数据，作为grid 的数据源，这样就可以对数据进行 ...
好的，谢谢 :mj72:
页:
[1]