请教GRID表格列中加入了复选框，但不可修改值

Posted 2023-04-12

参考技术A extjs自己提供复选框列// checkbox列var filecheckbox = new Ext.grid.CheckboxSelectionModel();// GridPanelvar fileGrid = new Ext.grid.GridPanel(store : fileStore,columns : [new Ext.grid.RowNumberer(), //显示列数filecheckbox,//显示复选框列//其他显示列]//省略其他属性);这样你就可以而得到一个复选框，可以进行单选、全选了如果你想自己定义的话，也可以//定义filtersvar filters = new Ext.ux.grid.GridFilters( // encode and local configuration options defined previously for easier reuse encode: encode, // json encode the filter query local: local, // defaults to false (remote filtering) filters: [ type: 'numeric', dataIndex: 'id' , type: 'string', dataIndex: 'company', disabled: true , type: 'numeric', dataIndex: 'price' , type: 'date', dataIndex: 'date' , type: 'list', dataIndex: 'size', options: ['small', 'medium', 'large', 'extra large'], phpMode: true , type: 'boolean', dataIndex: 'visible' ] );// use a factory method to reduce code while demonstrating // that the GridFilter plugin may be configured with or without // the filter types (the filters may be specified on the column model var createColModel = function (finish, start) var columns = [ dataIndex: 'id', header: 'Id', // instead of specifying filter config just specify filterable=true // to use store's field's type property (if type property not // explicitly specified in store config it will be 'auto' which // GridFilters will assume to be 'StringFilter' filterable: true //,filter: type: 'numeric' , dataIndex: 'company', header: 'Company', id: 'company', filter: type: 'string' // specify disabled to disable the filter menu //, disabled: true , dataIndex: 'price', header: 'Price', filter: //type: 'numeric' // specify type here or in store fields config , dataIndex: 'size', header: 'Size', filter: type: 'list', options: ['small', 'medium', 'large', 'extra large'] //,phpMode: true , dataIndex: 'date', header: 'Date', renderer: Ext.util.Format.dateRenderer('m/d/Y'), filter: //type: 'date' // specify type here or in store fields config , dataIndex: 'visible', header: 'Visible', filter: //type: 'boolean' // specify type here or in store fields config ]; return new Ext.grid.ColumnModel( columns: columns.slice(start || 0, finish), defaults: sortable: true ); ;然后 var grid = new Ext.grid.GridPanel( colModel: createColModel(4), plugins: [filters], //这两个属性是重点，加上去就可以了 );效果看图片。建议你去下载官方的源代码，然后看其中的例子。里面有一个就是如何自定义这个的

列上下文菜单复选框在ag-grid中切换

我正在尝试为ag-grid中的整列添加上下文菜单复选框。通过关注this教程，我可以通过设置checked : true为我的自定义菜单添加一个复选框，但这不是一个可切换的复选框。它始终设置为true。如何让它可以切换？

答案

首先，您必须按如下方式定义网格选项的上下文：context：{thisComponent：this}

public gridOptions: any = {
   columnDefs: this.columnDefs,
   rowData: this.rowData,
   enableSorting: false,
   enableFilter: false,
   context: { thisComponent: this }
}

然后你必须创建自己的函数，返回true或false：

public checkedContextMenuFunction(params): boolean {
   if (){
       return true;
   }else {
       return false;
   }
}

并将其添加到contextMenuItems函数：

选中：params.context.thisComponent.checkedContextMenuFunction（params）

public getContextMenuItems(params) {
  return{      
     'separator',
     {
       name: 'Checked menu',
       tooltip: 'Tooltip text',
       checked: params.context.thisComponent.checkedContextMenuFunction(params),
       action: function() {
          params.context.thisComponent.differentFunction(params);
       }
   }
}