1.官网地址：https://demo.mescius/wijmo/demos/Grid/Overview/react
别进中文地址，注意后缀mescius有没有.cn有的话删掉，那个没有触发方法和各类API，组件也不全
2.中文地址：（不太好用）：https://demo.grapecity.com.cn/wijmo5/learningwijmo/#fZYKp
3.API介绍地址：模块 wijmo.collections - Wijmo 5 Help (grapecity.com.cn)
如果是开发过程中遇到的问题，在官网没找到API的话，第三个地址会更好用一些，搭配node-modules的源码查看
目录
1.引入FlexGrid之后想要做单列点击事件，需要在initialized上绑定事件后selectionChanged事件，通过判断行列进行后续逻辑处理。
2.FlexGrid在进行宽度自适应的设定过程中，想要设置自适应宽不生效
5.用flexGrid被二次封装的翻页组件 不是被biz二次封装的不用看这个
9.路由配置后報錯 initialEntries.map is not a function at createMemoryHistory
11.flexGrid单独给某列样式根据不同数据判断是否入力+其他各自禁用状态
1.引入FlexGrid之后想要做单列点击事件，需要在initialized上绑定事件后selectionChanged事件，通过判断行列进行后续逻辑处理。
searchResult: {
initialize: (grid: WjFlexGrid) => {
grid.selectionChanged.addHandler((s, e) => {
if (e.col === 3) {
console.log('正在进行点击事件', s, e);
}
});
}
}<FlexGrid
initialized={action.searchResult.initialize}
/>事件绑定后接收s,e
2.FlexGrid在进行宽度自适应的设定过程中，想要设置自适应宽不生效
FlexGrid在进行宽度自适应的设定过程中，想要设置自适应宽不生效，’*‘，’auto‘均不生效，调查源码发现是可以接收的，猜测是未给宽度导致的auto属性无法生效，在外层加了一个div盒子进行宽度限制，发现自适应能生效了
columns.push({
header: t('fileName'),
binding: 'fileName',
width: '*',
minWidth: 100,
align: 'left',
});<div style={{ width: '800px' }}>
<FlexGrid
columns={state.columns}
/>
</div>3.FlexGrid图标列添加事件
直接接收e: MouseEvent即可，e.row.index是所点击行，e.item是所点击内容
searchResult: {
columns: {
reference: (e: MouseEvent) => {
console.log('点击了第一列', e);
},
clear: (e: MouseEvent) => {
console.log('点击了第二列', e);
},
},
}columns.push({
header: '图标',
binding: '字段',
width: 57,
align: 'center',
allowDragging: false,
allowResizing: false,
allowSorting: false,
cellTemplate: makeAction({
actions: [
{
iconName: 'Info',
label: t('不知道'),
click: columnsAction.reference,
},
],
}),
});发现这么加完之后click事件报错了，传出来的东西没接全，写法换成
reference: (ctx: ICellTemplateContext, e: MouseEvent) => {
console.log('点击了第一列', e, ctx);
},去找源码里【ICellTemplateContext】来源是哪个然后引入
import { ICellTemplateContext } from '@grapecity/wijmo.grid';
4.循环渲染按钮的时候渲染就多次触发了click事件
解决办法=》箭头函数就好了
原因：onClick事件如果包含() ，就会变成执行函数，页面加载后会自动执行， 从而导致这个结果
<1>如果事件函数不需要参数，那么去除() 即可；
<2>如果包含参数，改成箭头函数
<IconButton
iconProps={{ iconName: 'Clear' }}
style={{
border: '1px solid #333333',
color: 'red',
}}
onClick={() =>
action.file.clear(index, file.id)
}
/>5.用flexGrid被二次封装的翻页组件 不是被biz二次封装的不用看这个
<FlexGrid
paginationProps={{
totalCount: 222,
pageSize: 10,
onPageChange: action.searchResult.getData,
}}
/>getData: async (
offset: number,
criteria: SearchCriteria
): Promise<any[]> => {
const fetchFileListData = action.searchResult.fetchData(
offset,
criteria
);
return fetchFileListData !== undefined ? fetchFileListData : [];
},
fetchData: (offset: number, criteria: SearchCriteria) => {
console.log('在这里做接口处理，', offset, criteria);
return stateRef.current.tableItems;
},另外样式上有缺陷style={{ height: `'100%' - 30px - 4px` }}从100-34
import { SearchCriteria } from '@biz-integral/biz-wijmo';
6.flexGrid的无限滚动只触发一次或者不触发
<1>高度是否支持产生滚动条，如果不产生的话不会触发，可以加max-height在外层
<2>第一次触发之后不会再次触发--是否进行了数据更新，一定要更新数据
<FlexGrid
infiniteScrollProps={{
onNext: action.searchResult.render,
}}
/>render: async (offset: number) => {
let results = [];
results = [...(stateRef.current.tableItems || [])];
return results;
},什么操作都不做哪怕是旧数据放进去结尾也让数据变一下
7.进行快捷键设置的时候报错[TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))]，后来发现是类型的错误，但是为什么会出现非数组类型还有待查找
useHotkeys(
[
...props.extHotKeys!,
// クリア
{
key: 'F9',
method() {
action.table.lineClear.execute();
return false;
},
},
],
hotKeyScope
); useHotkeys(
[
...(Array.isArray(props.extHotKeys!) ? props.extHotKeys! : []),
// クリア
{
key: 'F9',
method() {
action.table.lineClear.execute();
return false;
},
},
],
hotKeyScope
);8.flexGrid列根據不同情況同列有的禁用有的不禁用
{
...defaultProps,
header: t('button-edit'),
binding: 'edit',
width: 50,
allowSorting: false,
allowResizing: false,
allowDragging: false,
isReadOnly:true,
cellTemplate: makeAction({
actions: [
{
onCreate:(sender,ctx)=>{
sender.disabled = ctx.item.approvalFlag==='0'||ctx.item.approvalFlag==='1'
},
iconName: 'PageEdit',
label: t('button-edit'),
click: (ctx, e) => {
context.overlay
.open(OverlayLabelTypes.Progress, {
zoneId: MY_MESSAGE_AREA_ZONE_ID,
})
.execute(async () => {
const rowData: any =
ctx.item;
const response = {approve:''};
if (!response?.approve) {
setState((prev) => ({
...prev,
}));
}
// });
});
},
},
],
}),
align: 'center',
},oncreate列設置
9.路由配置后報錯 initialEntries.map is not a function at createMemoryHistory
找到APP.tsx 改完就好了
<MemoryRouter
initialEntries={
AppParams.getSystemParameters()?.initialEntries ??
props?.initialEntries ?? ['/p2jbec-cc-jvFundsRequestSearch']
}
><MemoryRouter
initialEntries={
AppParams.getSystemParameters()?.initialEntries ??
[props?.initialEntries ?? '/p2jbec-cc-jvFundsRequestSearch']
}
>10.flexGrid去除行样式
<FlexGrid
alternatingRowStep={0}
></FlexGrid>11.flexGrid单独给某列样式根据不同数据判断是否入力+其他各自禁用状态
initialize: (grid: WjFlexGrid) => {
grid.itemFormatter= (panel, r, c, cell) => {
if(stateRef.current.model){
for(let i = 0; i < stateRef.current.model?.length;i++){
if(stateRef.current.model[i].jvProjectNoName===''){
const allItems = grid.rows
allItems[i].isReadOnly = true
allItems[i].cssClass='cell-disabled'
console.log(allItems[i],"allItems[i]")
}
}
}
if (panel.cellType === CellType.Cell) {
const column = grid.getColumn(c);
const isReadOnly = column.isReadOnly;
if (isReadOnly) {
cell.classList.add('cell-disabled');
}
}
}
},12.禁用單元格的内容隱藏
allItems[i].cssClass='cell-disabled special-cell-disabled'
.special-cell-disabled .wj-cell-check{
display: none;
}13.flexGrid之中的单元格，要求输入数字，如果空展示【-】，如果为数字则三位一【，】分隔，数字居右，【-】居中
initialize: (grid: WjFlexGrid) => {
grid.onBeginningEdit = (e) => {
const cellData = grid.getCellData(e.row, e.col, false);
let value;
if (cellData !== undefined) {
value = cellData.replace(/,/g, '');
} else if (cellData === '-') {
value = '';
} else {
value = '';
}
grid.setCellData(e.row, e.col, value);
return true;
};
grid.onCellEditEnded = (e) => {
const cellData = grid.getCellData(e.row, e.col, false);
let value;
if (cellData === '') {
value = '-';
} else {
const number = parseFloat(cellData);
if (isNaN(number)) {
value = '-';
} else {
value = action.formatNumberWithCommas(cellData);
}
}
grid.setCellData(e.row, e.col, value);
};
grid.itemFormatter = (panel, r, c, cell) => {
if (panel.cellType === CellType.Cell) {
const column = grid.getColumn(c);
const isReadOnly = column.isReadOnly;
if (isReadOnly) {
cell.classList.add('cell-disabled');
} else {
const cellData = panel.getCellData(r, c, false);
if (cellData === '-') {
cell.style.textAlign = 'center';
} else {
cell.style.textAlign = 'right';
}
}
}
};
}formatNumberWithCommas: (number: string) => {
const numStr = number.toString();
const parts = numStr.split('.');
const integerPart = parts[0];
const formattedIntegerPart = integerPart.replace(
/\B(?=(\d{3})+(?!\d))/g,
','
);
return `${formattedIntegerPart}${
parts.length > 1 ? '.' + parts[1] : ''
}`;
},14.自定义表头换行
initialize: (grid: WjFlexGrid) => {
grid.itemFormatter = (panel, r, c, cell) => {
if (panel.cellType === CellType.ColumnHeader) {
cell.innerHTML = 'header \n aaa';
cell.innerText = 'header \n aaa';
}
};
}
1215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
