Syncfusion Grid组件

Column表格列

1. 列值计算属性：valueAccessor，注意与checkboxSelection不兼容

   const totalCalories = (field, data, column) => {
       return data.Protein * 4 + data.Fat * 9 + data.Carbohydrate * 4;
   };
   
   <ColumnDirective valueAccessor={totalCalories} />
   

2. 自定义column

   const gridTemplate = (props: any) => {
       return <input type="checkbox" checked={true} />;
   };
   
   <ColumnDirective headerText='Discontinued' template={template} />
   

3. 用checkbox渲染bool字段

   <ColumnDirective displayAsCheckBox ... />
   

4. 控制列显示隐藏

   grid.showColumns(['headerText不是field']);
   grid.hideColumns(['headerText不是field']);
   

5. 列的ForeignKey。解决返回id，但是要显示name的问题

   <ColumnDirective
       headerText='Employee Name'
       field='EmployeeID'
       foreignKeyField='EmployeeID' //field属性对应外键数据源对象中的字段
       foreignKeyValue='FirstName' //单元格显示值，外键数据源对象中的字段
       dataSource={employeeData} //外键数据源
   />
   

Row表格行

1. 背景样式

   // 隔行背景色
   .e-grid .e-altrow {
       background-color: #fafafa;
   }
   // 选中行背景色
   .e-grid td.e-active {
       background-color: #f9920b;
   }
   

2. cellEdit事件在editSettings.mode == 'Batch'的时候有效

   const cellEdit = (args: BatchAddArgs): void => {
       if (getValue('value', args) === "France") {
         args.cancel = true;
       }
   }
   

Cell单元格

1. 通过queryCellInfo事件获取单元格信息

   const customizeCell = (args: QueryCellInfoEventArgs) => {
       if ((args.column as Column).field === "Freight"
         && args.data && args.cell) {
         if (getValue('Freight', args.data) < 30) {
           args.cell.classList.add('above-80');
         }
       }
   }
   <GridComponent queryCellInfo={customizeCell}>
   

编辑模式

1. editType内置的几种类型，用edit.params设置属性

   • stringedit
   • numericedit
   • datepicker
   • datetimepicker
   • dropdownedit
   • booleanedit

   案例: dropdownedit自定义数据源

   const editParams : IEditCell = {
       params:   {
         actionComplete: () => false,
         allowFiltering: true,
         dataSource: []
         fields: { text: "text", value: "id"},
         query: new Query() // 必须，在appsmith中自定义属性面板里是个问题
       }
   };
   
   <ColumnDirective
       ...
       edit={editParams}
       editType='dropdownedit'
   />
   

2. 自定义edit。官方demo

   // 自定义一个AutoComplete组件
   let inpuEle: HTMLElement;
   let autoCompleteIns: AutoComplete;
   const autoCompleteData: object = [
       { CustomerID: 'VINET', Id: '1' },
       { CustomerID: 'TOMSP', Id: '2' },
       { CustomerID: 'HANAR', Id: '3' },
       { CustomerID: 'VICTE', Id: '4' },
       { CustomerID: 'SUPRD', Id: '5' },
   ];
   const createCustomerIDFn = () => {
       inpuEle = document.createElement('input');
       return inpuEle;
   };
   const destroyCustomerIDFn = () => {
       autoCompleteIns.destroy();
   };
   const readCustomerIDFn = () => {
       return autoCompleteIns.value;
   };
   const writeCustomerIDFn = (args) => {
       autoCompleteIns = new AutoComplete({
         allowCustom: true,
         value: args.rowData[args.column.field],
         dataSource: autoCompleteData,
         fields: { value: 'CustomerID', text: 'CustomerID' },
       });
       autoCompleteIns.appendTo(inpuEle);
   };
   const daParams: IEditCell = {
       create: createCustomerIDFn,
       destroy: destroyCustomerIDFn,
       read: readCustomerIDFn,
       write: writeCustomerIDFn,
   };
   
   // 在表格中使用
   <ColumnDirective
       field='CustomerID'
       headerText='Customer ID'
       type='string'
       edit={daParams}
   />
   

3. 必填项约束：validationRules

   <ColumnDirective
       field='OrderID'
       headerText='Order ID'
       type='number'
       textAlign="Right"
       isPrimaryKey={true}
       validationRules={{ required: true, minLength: 3 }}
   />
   

4. 表格更新

   // 更新行
   grid.updateRow(rowIndex, { key: 'value', ... });
   // 更新单元格
   grid.setCellValue(('主键', 'column.field', value);
   grid.updateCell(rowIndex, 'column.field', value);
   

5. 双击聚焦单元格。单击编辑

   let fieldName;
   const recordDoubleClick = (e): void => {
       const clickedColumnIndex = e.cell.getAttribute("data-colindex");
       fieldName = grid.columnModel[parseInt(clickedColumnIndex)].field;
   }
   const actionComplete = (e): void => {
       if (e.requestType === "beginEdit") {
           e.form.elements[grid.element.getAttribute("id") + fieldName].focus();
       }
   }
   

6. 自定义快捷键

   const load = () => {
       let gridElement = document.getElementById('grid').ej2_instances[0];
       if (gridElement) {
           gridElement.element.addEventListener('keydown', function (e) {
               if (gridElement && e.keyCode === 13) {
                   gridElement.addRecord();
               }
           });
       }
   };