后端设置扩展方法
public static void SetNumCheckBox<T>(this DataGridColumnBuilder<T> builder)
{
_ = builder.CellTemplate(new JS("CheckBoxCellTemplate"))
.EditCellTemplate(new JS("CheckBoxEditorTemplate"))
.Lookup(lookup => lookup.DataSource(new object[] {
new {
label = "是",
value = 1,
},
new {
label = "否",
value = 0,
},
}).DisplayExpr("label").ValueExpr("value"));
}
前端添加单元格和编辑代码
const getNewDomId = (function () {
let id = 1;
return function () {
return id++;
};
})();
function CheckBoxEditorTemplate(el, e) {
var domId = 'grid_cell_' + getNewDomId();
el.html(`<div id="${domId}"></div>`);
new Vue({
el: '#' + domId,
template: `<el-checkbox v-model="state" v-on:change="onChange" />`,
data: {
state: e.value === 1,
},
methods: {
onChange(value) {
e.setValue(value ? 1 : 0);
},
},
});
}
function CheckBoxCellTemplate(container, options) {
container.html(
`<div class="dx-checkbox-container ${
options.value === 1 ? 'dx-checkbox-checked' : ''
}"><span class="dx-checkbox-icon"></span></div>`
);
}
以上就是asp.net core使用DevExtreme20将int列转为checkbox方法示例的详细内容，更多关于asp.net core将int列转为checkbox的资料请关注其它相关文章！
