关于devexpress:aspnet-core-使用-DevExtreme20-将int列转为checkbox

后端设置扩大办法

public static DataGridColumnBuilder<T> SetNumCheckBox<T>(this DataGridColumnBuilder<T> builder)
{return 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>`
  );
}