

# **数据列表SDK**

**整理中，有问题请联系：张功**

---

## **一、接入方式**

### **1.1 获取 pageSdk**

```
const ebSdk = window.ebuilderSDK;  // 全局SDK
const pageSdk = ebSdk.getPageSDK();  // 当前页面SDK
```

### **1.2 获取列表组件实例**

```
// 通过组件 id 获取列表组件实例，compInstance 即为 nlist 组件实例
var comp = pageSdk.getCompInstance("组件id");
```

组件 id 在列表设计器地址栏中查看，或在列表设计器左上角组件信息中获取。

---

## **二、pageSdk 方式 — 数据方法**

### **getListCurrentData()**

获取列表当前页完整数据信息。

**参数**：无

| **字段** | **类型** | **说明** |
| --- | --- | --- |
| total | number | 数据总条数 |
| data | array | 当前页数据数组 |
| pageNo | number | 当前页码 |
| pageSize | number | 每页条数 |

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
var res = compInstance.getListCurrentData();
// { total: 100, data: [...], pageNo: 1, pageSize: 20 }
```

---

### **getDataSource()**

获取列表数据源配置。

**参数**：无

**返回值**：列表数据源配置对象。

**返回值**：列表数据源配置对象。

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
var res = compInstance.getDataSource();
```

---

## **三、pageSdk 方式 — 选中数据方法**

### **getCheckedDatas()**

获取列表中已选中的数据。

**参数**：无

**返回值**：已选中的数据数组。

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
var res = compInstance.getCheckedDatas();
```

---

### **getCheckedIds()**

获取列表中已选中数据的主键 ID 数组。

**参数**：无

**返回值**：已选中数据的主键 ID 数组。

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
var res = compInstance.getCheckedIds();
```

---

### **getUnCheckedIds()**

获取列表中未选中数据的主键 ID 数组。

**参数**：无

**返回值**：未选中数据的主键 ID 数组。

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
var res = compInstance.getUnCheckedIds();
```

---

### **setCheckedDatas(checkedKeys)**

手动设置列表中的选中数据。

| **参数** | **类型** | **必需** | **说明** |
| --- | --- | --- | --- |
| checkedKeys | string\[\] | `是` | 需要选中的数据主键 ID 数组 |

**参数**：无

**返回值**：无

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
compInstance.setCheckedDatas(['1041120405073977349']);
```

---

### **setAllChecked()**

设置列表数据全部选中。

**参数**：无

**返回值**：无

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
compInstance.setAllChecked();
```

---

### **clearChecked()**

清除列表中所有选中状态。

**参数**：无

**返回值**：无

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
compInstance.clearChecked();
```

---

## **四、pageSdk 方式 — 列表操作方法**

### **refreshBtn**

刷新列表右上角按钮，会重新触发按钮权限接口。

**参数**：无

**返回值**：无

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
compInstance.refreshBtn({ date: "2022-12-27" }, function() { });
```

---

### **refresh**

刷新列表，支持传入筛选条件和回调函数。

**参数**：无

**返回值**：无

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
compInstance.refresh();
```

---

### **filterList**

对列表进行筛选操作。

**参数**：无

**返回值**：无

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
compInstance.filterList('筛选值');
```

---

### **updateSingleList**

更新列表中的单条数据。

**参数**：无

**返回值**：无

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
compInstance.updateSingleList('数据ID', { });
```

---

### **getBatchData**

列表"换一批"按钮事件，用于随机切换展示数据。

**参数**：无

**返回值**：无

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
compInstance.getBatchData();
```

---

### **spreadList**

列表展开收缩按钮事件，用于展开或收起列表的上下级数据。

**参数**：无

**返回值**：无

**示例**：

```
var compInstance = pageSdk.getCompInstance("f52946f5f2a842f491380e21b374e234");
compInstance.spreadList();
```

---

## **五、自定义插件（ecode）**

### **5.1 插件机制说明**

通过 `registerPlugin` 方法向列表组件注册自定义插件类，可以实现列表的渲染、权限、数据处理等行为的自定义扩展。

```
import { eventEmitter } from '@weapp/utils';

const comId = 'cf11ee5cdbab436db809ed75c45cbf92';

class DemoPlugin {
    name = `DemoPlugin_${comId}`;  // 插件唯一键，必须

    // 可在此类中实现任意数量的插件钩子函数
}

eventEmitter.once("@weapp/designer", `onBeforeMount_${comId}`, (plugin) => {
    plugin.registerPlugin(DemoPlugin);
});
```

**可用上下文**：

- `this.list`：List 组件实例，包含 `reRenderList()`、`reRenderCom()` 等方法
- `this.list.props`：List 组件的 props 配置
- `this.pluginCenter`：插件中心，可调用如 `this.pluginCenter.use('Data')` 获取数据插件

---

### **5.2 渲染类钩子**

#### **reRender**

**示例**：

```
import { eventEmitter } from '@weapp/utils';

const comId = 'eff5f11f260749e9a6d6fb151e3da51b' //需要注册插件的列表组件id

class DemoPlugin {
  name = `DemoPlugin_${comId}`

  // 让列表组件数据区域重新渲染，表格式是Table，列表式是List组件重新渲染
  onRefreshList = () => {
    this.list.reRenderList();
  }

  // 让整个列表组件重新渲染，render层开始
  onReRenderCom = () => {
    this.list.reRenderCom();
  }

  onDidMount() {
    this.onRefreshList();
    this.onReRenderCom();
  }
}

eventEmitter.once('@weapp/designer', `onBeforeMount_${comId}`, (plugin) => {
  plugin.registerPlugin(DemoPlugin)
});
```

---

#### **renderAddonBefore**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=934240362813415426&type=imgs)

**示例**：

```
type RenderHookType = (...args: any[]) => ReactElement | null;

/** 在列表之前的自定义渲染 */
renderAddonBefore?(hook: RenderHookType): (datas: any[]) => ReactElement | undefined;
```

```
renderAddonBefore = (hook: RenderHookType) => {
    const listProps = this.list.props;
    const self = this;

    return (datas: any[] = [], ...args: any[]) => (
      <>
        <div>自定义渲染</div>
        {hook?.(datas, ...args)}
      </>
    );
  };
```

---

#### **renderAddonAfter**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=934241234909593603&type=imgs)

**示例**：

```
type RenderHookType = (...args: any[]) => ReactElement | null;

/** 在列表之后的自定义渲染 */
renderAddonAfter?(hook: RenderHookType): RenderHookType;
```

```
renderAddonAfter = (hook: RenderHookType) => {
    const self = this;
    const listProps = this.list.props;

    return (...args: any[]) => (
      <>
        {hook(...args)}
        <div>自定义渲染</div>
      </>
    );
  };
```

---

#### **renderAddonHeader**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=934242450217852929&type=imgs)

**示例**：

```
type RenderHookType = (...args: any[]) => ReactElement | null;

/** 在列表之上的自定义渲染 */
renderAddonHeader?(hook: RenderHookType): RenderHookType;
```

```
renderAddonHeader = (hook: RenderHookType) => {
    const self = this;
    if (xxxx) {
      return (...args: any[]) => (
        <>
          <div>自定义渲染</div>
          {hook(...args)}
        </>
      );
    }
    return hook;
  };
```

---

#### **renderContent**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=934238095120728066&type=imgs)

**示例**：

```
type RenderHookType = (...args: any[]) => ReactElement | null;

/** 列表内容自定义渲染 */
renderContent?(hook: RenderHookType): RenderHookType;
```

```
renderContent = (hook: RenderHookType): RenderHookType => {
    const self = this;
    if (xxxx) {
      return (...args: any[]) => (
        <>
          <div>自定义渲染</div>
          {hook(...args)} // hook代表上一个使用此钩子渲染的dom，即上图的列表区域
        </>
      );
    }
    return hook;
  };
```

---

#### **renderContentHeaderBefore**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936880475045003267&type=imgs)

**示例**：

```
type RenderHookType = (...args: any[]) => ReactElement | null;

/** 内容顶部左侧的渲染 */
renderContentHeaderBefore?(hook: RenderHookType): RenderHookType;
```

```
renderContentHeaderBefore = (hook: RenderHookType): RenderHookType => {
    const self = this;
    const listProps = self.list.props;

    if (this.isEnabled) {
      return (...args: any[]) => (
        <>
          <div>自定义中渲染</div>
          {hook(...args)}
        </>
      );
    }

    return hook;
  };
```

---

#### **renderContentHeaderAfter**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936881535892611075&type=imgs)

**示例**：

```
type RenderHookType = (...args: any[]) => ReactElement | null;

/** 内容顶部右侧的渲染 */
renderContentHeaderAfter?(hook: RenderHookType): RenderHookType;
```

```
renderContentHeaderAfter = (hook: RenderHookType): RenderHookType => {
  const self = this;
  const listProps = this.list.props;

  return (...args) => (
    <>
      {hook(...args)}
      <div>自定义渲染</div>
    </>
  );
};
```

---

#### **getEnableContentHeader**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936878975970246664&type=imgs)

**示例**：

```
/** 内容顶部的渲染条件 */
getEnableContentHeader?(enabled: boolean): boolean[];
```

```
getEnableContentHeader = (enabled: boolean): boolean[] => {
  const isRenderTop = xxxx
  const isEnabled = enabled === true || isRenderTop
  return [isEnabled];
};
```

---

#### **getEnableContentHeaderCell**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936879813569708034&type=imgs)

**示例**：

```
 /** 内容顶部区域的渲染条件 */
getEnableContentHeaderCell?(enabled: boolean): boolean[];
```

```
getEnableContentHeaderCell = (enabled: boolean): boolean[] => {
  const isRenderHeader = xxxx
  const isEnabled = enabled === true || isRenderHeader
  return [isEnabled];
};
```

---

#### **renderTitle**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936848975637413893&type=imgs)

**示例**：

```
/** List标题自定义渲染 */
renderTitle?(hook: RenderHookType): (title: any, config: any) => ReactElement | undefined;
```

```
renderTitle = (hook: RenderHookType) => {
    const self = this;
    const listProps = self.list.props;
    const plugin = self.pluginCenter;

    // 因为渲染头部处的config需要最新的，所以通过参数方式传递，不从当前上下文获取
    return (title: any, config: BaseConfigDataType, ...args:any[]) => (
      <>
        {config.titleEnabled && hook(title, config, ...args)}
        <div>自定义渲染</div>
      </>
    );
  };
```

---

#### **renderCell**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936851771685683203&type=imgs)

**示例**：

```
RenderHookType = (...args: any[]) => ReactElement | null;

/** List单元格自定义渲染 */
renderCell?(hook: RenderHookType): RenderHookType;
```

```
renderCell = (hook) => {
  return (opts, ...args) => {
    return (
      <div>
        <div style={{color: 'red'}}>自定义渲染单元格</div>
        {hook(opts, ...args)}
      </div>
    )
  }
}
```

---

#### **renderListItem**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936851269292556293&type=imgs)

**示例**：

```
 /** 列表式-行自定义渲染 */
  renderListItem?(
    hook: RenderHookType
  ): (rowData: ListData, index: number, opts?: any) => ReactElement | undefined;
```

```
renderListItem = (hook) =>  {
  return (rowDatas, index, ...args) => {
    if(index % 2 === 0) {
      return <div style={{background: 'red'}}>
        {hook(rowDatas, index, ...args)}
      </div>
    }
    return hook(rowDatas, index, ...args)
  }
}
```

---

#### **renderListContent**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936847524172742657&type=imgs)

**示例**：

```
type RenderHookType = (...args: any[]) => ReactElement | null;

/** 列表内容自定义渲染，不包含renderAddonBefore和renderAddonAfter */
renderListContent?(hook: RenderHookType): RenderHookType;
```

```
renderTableContent = () => (
  <div>自定义视图</div>
);
```

---

#### **renderTableContent**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936846501772853254&type=imgs)

**示例**：

```
type RenderHookType = (...args: any[]) => ReactElement | null;

/** 表格内容自定义渲染，不包含renderAddonBefore和renderAddonAfter */
renderTableContent?(hook: RenderHookType): RenderHookType;
```

```
renderTableContent = () => (
  <div>自定义视图</div>
);
```

---

#### **renderLayoutAddonBefore**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936876076934430729&type=imgs)

**示例**：

```
/** 列表式-layout左侧自定义渲染 */
renderLayoutAddonBefore?(hook: RenderHookType): (rowData: ListData) => ReactElement | undefined;
```

```
renderLayoutAddonBefore = (hook: RenderHookType) => {
  return (rowData: ListData, ...args: any[]) => (
    <>
      <div>自定义渲染</div>
      {hook(rowData, ...args)}
    </>
  );
};
```

---

#### **renderLayoutAddonAfter**

**示例**：

```
/** 列表式-layout右侧自定义渲染 */
renderLayoutAddonAfter?(hook: RenderHookType): (rowData: ListData) => ReactElement | undefined;
```

```
renderLayoutAddonAfter = (hook: RenderHookType) => {
  return (rowData: ListData, ...args: any[]) => (
    <>
      {hook(rowData, ...args)}
      <div>自定义渲染</div>
    </>
  );
};
```

---

#### **renderRowAddonBefore**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936862990257700869&type=imgs)

**示例**：

```
/** List单元格前的自定义渲染 */
renderRowAddonBefore?(hook: RenderHookType): (
  colIndex: number,
  options: {
    data: ListData;
    isMainLayout?: boolean;
    layoutIndex?: number;
    isExtendList?: boolean;
  }
) => ReactElement | undefined;
```

```
renderRowAddonBefore = (hook: RenderHookType) => {
  const listProps = this.list.props;
  const { feedBackMark = false } = listProps.config;
  return (colIndex: number, opts: any, ...args: any[]) => {
    const { isMainLayout } = opts || {};
    return (
      <>
        {colIndex === 0 && isMainLayout && feedBackMark && (
          <div className={`${clsPrefix}-nlist-list-prefix-dot`} />
        )}
        {hook(colIndex, opts, ...args)}
      </>
    );
  };
};
```

---

#### **renderGridAddonAfter**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=936877146381287431&type=imgs)

**示例**：

```
/** 列表式-列表每行数据下方的自定义渲染 */
renderGridAddonAfter?(
  hook: RenderHookType
): (index: number, data: ListData) => ReactElement | undefined;
```

```
renderGridAddonAfter = (hook: RenderHookType) => {
    const listProps = this.list.props;

    return (itemIndex: number, data: ListData, ...args: any[]) => (
      <>
        {hook(itemIndex, data, ...args)}
        <div>自定义渲染</div>
      </>
    );
};
```

---

### **5.3 权限类钩子**

#### **getRowLineButtonEnabled**

**示例**：

```
/** 是否启用行上按钮插件 */
getRowLineButtonEnabled?(enabled: boolean): boolean[];
```

```
getRowLineButtonEnabled = (enabled: boolean): boolean[] => {
  // 根据条件开启行上按钮插件
  const isEnabled = true
  return [isEnabled];
};
```

---

#### **getButtonPermissionParams**

**示例**：

```
/** 获取按钮权限接口额外参数 */
getButtonPermissionParams?(params: AnyObj): AnyObj[];
```

```
getButtonPermissionParams = (params: AnyObj): AnyObj[] => {
  return [{
    ...params,
    // xxxx
  }];
};
```

---

#### **getButtonPermissionAfter**

**示例**：

```
/** 按钮权限接口数据后置处理 */
  getButtonPermissionAfter?(
    func: (...args: any[]) => Promise<ButtonPermissionDataType[]>
  ): ((...args: any[]) => Promise<ButtonPermissionDataType[]>)[];
```

```
getButtonPermissionAfter = () => {
  const func = (btns: ButtonPermissionDataType[]) => {
    const newBtns = btns; // 进行同步处理，比如处理按钮的enable控制按钮是否展示
    return newBtns;
  };
  return [func];
};
```

---

#### **getRightButtonsPermission**

**示例**：

```
type ButtonPermissionDataType = {
  buttonId: string /** 按钮id */;
  hasRight: boolean /** 是否有权限 */;
  dataIds?: string[] /** 有权限的数据id */;
  frontIds?: string[] /** 有权限的数据前端唯一键 */;
  isNewInsertButton?: boolean /** 新增的按钮，使用commonButton的属性渲染按钮 */;
  commonButton?: ButtonConfigType /** 按钮实体（插件在获取按钮时，新增了配置中不存在的按钮时，需要使用这个属性返回一个完整的按钮信息，便于前端能正确渲染 */;
};

/** 按钮自定义权限接口 */
getRightButtonsPermission?(
  func: (...args: any[]) => Promise<ButtonPermissionDataType[]>
): ((...args: any[]) => Promise<ButtonPermissionDataType[]>)[];
```

```
getRightButtonsPermission = (_func: Function, ...args): ((...args: any[]) => Promise<ButtonPermissionDataType[]>)[] => {
  const func = (params, ...args) => {
    console.log('参数打印：', params)
    const {config} = params || {}
    const {buttonConfig} = config || {}
    const {btns = []} = buttonConfig || {}
    return new Promise(reslove => {
      // 下方示例换成异步函数按照格式返回数据
      const res = btns.map(btn => {
        return {
          buttonId: btn.id,
          commonButton: {} // 额外按钮配置信息，默认不需要
        }
      })
      reslove(res)
    })
  } /** 自定义异步权限函数 */
  return [func, ...args];
};
```

---

#### **getRowButtonsPermission**

**示例**：

```
type ButtonPermissionDataType = {
  buttonId: string /** 按钮id */;
  hasRight: boolean /** 是否有权限 */;
  dataIds?: string[] /** 有权限的数据id */;
  frontIds?: string[] /** 有权限的数据前端唯一键 */;
  isNewInsertButton?: boolean /** 新增的按钮，使用commonButton的属性渲染按钮 */;
  commonButton?: ButtonConfigType /** 按钮实体（插件在获取按钮时，新增了配置中不存在的按钮时，需要使用这个属性返回一个完整的按钮信息，便于前端能正确渲染 */;
};

/** 按钮自定义权限接口 */
getRowButtonsPermission?(
  func: (...args: any[]) => Promise<ButtonPermissionDataType[]>
): ((...args: any[]) => Promise<ButtonPermissionDataType[]>)[];
```

```
getRowButtonsPermission = (_func: Function, ...args): ((...args: any[]) => Promise<ButtonPermissionDataType[]>)[] => {
  const func = (params, datas) => {
      console.log('参数打印：', params)
      console.log('列表数据：', datas)
      return new Promise(reslove => {
        // 下方示例换成异步函数按照格式返回数据
        const btnA = {
          buttonId: 'xxx', //按钮Id
          dataIds: ['xxx', 'xx'], // 行数据id集合， 该按钮在哪几条行数据上显示
          // frontIds: [] // 非必要，只有在行数据没有id时，前端会自动生成NLIST_DATA_UNIQUE_KEY作为唯一键
        }
        const btnB = {
          //xxx
        }
        reslove([btnA, btnB])
      })
    } /** 自定义异步权限函数 */
  return [func, ...args];
};
```

---

#### **getCustomBtnExecConfig**

**示例**：

```
type ButtonConfigType = {
  id: string /** uuid */;
  name: string /** 按钮名称 */;
  buttonKey: string /** 按钮key */;
  buttonType: ButtonType /** 按钮类型 */;
  btnPositionData?: PositionType[] /** 按钮可以展示的位置 */;
  actions?: any[][] /** 按钮事件动作 */;
  enable: ButtonEnableType /** 是否启用 */;
  isSingle?: boolean /** 是否同位置单独显示生效 */;
  hideAction?: boolean /** 是否隐藏按钮事件 */;
  hidePermission?: boolean /** 是否隐藏权限 */;
  onlyIcon?: ButtonOnlyIconType /** 是否只显示图标 */;
  permissions?: any[] /** 权限 */;
  showPosition?: PositionType[] /** 按钮展示的位置 */;
  system?: ButtonSystemType /** 是否是系统按钮(控制是否展示删除按钮) */;
  iconPath?: string /** 按钮显示的图标 */;
  conditionEnable?: ConditionEnableType /** 是否启用筛选条件 */;
  scope?: ScopeType /** 适用终端 */;
  groupBtns?: GroupButtonType[] /** 分组按钮集合 */;
  pluginName?: string /** 插件触发动作的插件 */;
  pluginFunc?: string /** 插件内执行的方法名 */;
  actionOpts?: AnyObj /** 自定义事件动作 */;
}
getCustomBtnExecConfig?(btns: ButtonConfigType[]): ButtonConfigType[][];
```

```
class DemoPlugin {
 name = `DemoPlugin_${comId}` // 插件唯一键，必须
 
 getCustomBtnExecConfig = (_btns, ...args) => {
   const btns = [
     ..._btns,
     {
       id: '7300502276756858', // 复写按钮的id
       buttonType: 'COMCUSTOM', // 复写按钮的类型
       pluginName: 'DemoPlugin', // 触发的插件名
       pluginFunc: 'execCustomBtn' // 触发的插件方法
     }
   ]
   return [btns, ...args]
 }

 execCustomBtn = () => {
   console.log('复写了自定义按钮事件')
 }
```

---

#### **getPersonalFieldsFilter**

**示例**：

```
/** 获取个性化设置弹窗内字段过滤函数 */
getPersonalFieldsFilter?(func: Function, customFields:any[]): any[];
```

```
fieldsFilter = (field) => {
  if(field.id) {
    // 自定义逻辑，过滤出想要展示的字段
    return true
  }
  return false
}

getPersonalFieldsFilter = () => {
  return [this.fieldsFilter]
}
```

---

### **5.4 数据类钩子**

#### **getDataParams**

![](https://vscode-remote+wsl-002bubuntu.vscode-resource.vscode-cdn.net/home/bvzgong/Project/e10/myeb/api/file/preview?fileId=950235602764177413&type=imgs)

**示例**：

```
/** 基础列表getData参数 */
getDataParams?(params: Record<string, any>): Record<string, any>[];
```

```
getDataParams = (params, ...args) => {
  //接口参数传递
  return [{
    ...params,
    test: 123,
    test2: [1,2,3],
    test3: {a: 1}
  },  ...args]
}
```

---

#### **getListDatas**

**示例**：

```
/** 基础列表data数据 */
getListDatas?(listData: any[], fieldsData: any[], opts: any, ...args: any[]): any[];
```

```
getListDatas = (datas: any[] = [], ...args: any[]) => {
  const newData = datas;
  newData[0].test = 'xxxx'

  return [newData, ...args];
};
```

---

#### **getExcuEventActions**

**示例**：

```
/**
 * @params type 用作拦截事件动作，自定义处理事件
 */
type ExcuEventActionsOptsType = {
  type: ('basic' | 'dataList' | string)[];
};

/** 单击每一条数据事件动作的方法 */
getExcuEventActions?(
    data: any,
    index: number,
    e: React.MouseEvent,
    opts: ExcuEventActionsOptsType
  ): void;
```

```
getExcuEventActions = (data: any, ...args: any) => {
  const params = [data, ...args];
  params[3].type = ['doc'] // 拦截基础列表单击每一条数据事件
  // xxxx 自定义单击每一条数据事件
  return params;
};
```

---

#### **onDataChecked**

**示例**：

```
/** 数据选中回调 */
onDataChecked?(datas: any[], checkedKeys: string[]): void;
```

```
/**
 * 列表数据选中事件回调
 */
onDataChecked = (datas: any[], checkedKeys: string[]) => {
  console.log('选中的数据：',datas);
  console.log('选中的数据key', checkedKeys);
};
```

---

#### **getViewMount**

**示例**：

```
/** View视图抛出上下文的方法 */
getViewMount?(context: Record<string, any>): Record<string, any>[];
```

```
getViewMount = (context: Record<string, any>): Record<string, any>[] => [
  { ...context, execDemo: this.execDemo },
];
```

---

### **5.5 列配置类钩子**

#### **getTableColumns**

**示例**：

```
/** 表格式自定义列方法 */
  getTableColumns?(
    columns: ITableColumn[],
    opts: { tableHeadWidth: number; tableField: TableField[] }
  ): ITableColumn[][];
```

```
getTableColumns = (columns: any[], ...args: any[]) => {
    const customColumns = [...columns]
    // 自定义处理列顺序或者添加列等操作
    // xxx
    return [customColumns, ...args];
  };
```

---

#### **getTableViewColumns**

[图片附件未整合: ../../../../_assets/465814613280161792/018-55d52dbb13.png]

  
[图片附件未整合: ../../../../_assets/465814613280161792/019-47faa7f967.png]

**示例**：

```
/** 初始化列表异步更新表格列展示 */
getTableViewColumns?(tableField: TableField[]): TableField[][];
```

```
getTableViewColumns = () => {
  const func = () => {
    return new Promise(resolve => {
      // 模拟接口请求
      setTimeout(() => {
        const tableFields = [
         {id: '1', name: 'name', objId: '828109650843082753',text: '标题', width: 100}
        ]
        resolve(tableFields)
      }, 300)
    })
  }

  return [[func]]
}
```

## **六、eblistSdk 方式 — 备用接入方式**

> 以下为 eblistSdk 方式的说明。eblistSdk 是数据列表早期维护的 SDK，其中很多方法与 pageSdk 方式功能相同。**pageSdk 方式为推荐方式**，eblistSdk 仅作为备用参考。

### **6.1 获取 eblistSdk 实例**

```
// 直接访问 window 对象
var eblistSdk = window.eblistSdk;
```

### **6.2 基础信息方法**

直接在 `window.eblistSdk` 实例上调用：

| **方法** | **说明** |
| --- | --- |
| `getAppID()` | 获取当前应用 ID |
| `getViewID()` | 获取当前视图 ID |
| `getObjID()` | 获取当前数据集 ID |
| `getUniqueId()` | 获取组件唯一标识（compId） |
| `getListId()` | 获取列表 ID（pageId） |

**示例**：

```
var eblistSdk = window.eblistSdk;
var appId = eblistSdk.getAppID();
var viewId = eblistSdk.getViewID();
var objId = eblistSdk.getObjID();
```

### **6.3 数据方法**

| **方法** | **说明** |
| --- | --- |
| `getListData()` | 获取当前列表数据 |
| `reloadTable()` | 刷新列表数据 |

**示例**：

```
var eblistSdk = window.eblistSdk;
var data = eblistSdk.getListData();
eblistSdk.reloadTable();
```

### **6.4 选中数据方法**

| **方法** | **说明** |
| --- | --- |
| `getListCheckedData()` | 获取列表选中数据（含中间态） |
| `getCheckedID()` | 获取有效选中数据 ID（过滤中间态） |
| `getUnCheckedID()` | 获取未选中数据 ID |
| `setAllChecked()` | 设置全选 |
| `setAllChecked(false)` | 取消全选 |
| `setCheckedKeys(checkedKeys)` | 设置指定 keys 的选中状态 |
| `clearChecked()` | 清除所有选中状态 |

**示例**：

```
var eblistSdk = window.eblistSdk;
eblistSdk.setAllChecked();        // 全选
eblistSdk.setAllChecked(false);  // 取消全选
eblistSdk.setCheckedKeys(['id1', 'id2']);
eblistSdk.clearChecked();
var checkedIds = eblistSdk.getCheckedID();
```

### **6.5 实例管理方法**

| **方法** | **说明** |
| --- | --- |
| `getInstance(pageId, compId?, instanceId?)` | 根据 ID 查找 SDK 实例 |
| `getAllInstance(pageId?)` | 获取所有实例或指定 pageId 下的所有实例 |
| `destroy()` | 销毁当前实例 |
| `registerPlugin(PluginClass)` | 注册自定义插件类 |
