アント・クルド
React + Ant.Design に基づく CRUD コンポーネント。
特徴
- 1. 非常に軽量で、Ant.Design のみに依存し、他の依存関係はありません。
- 2.基本的な[追加、削除、変更、確認]および[一括削除]機能をサポートします
- 3. 検索、カスタム ページング、カスタム ソートなどの機能をサポート
- 4. 更新、Excel へのエクスポート、データ印刷、行高さ設定などの機能をサポートします。
- 5. その他の DIY 構成
完成した機能
- 基本的な追加、削除、変更、検索
- ページの読み込み
- 検索パネル
- 検索パネルが自動的に縮小される
- 一括削除
- データ更新
- EXCELエクスポート
- 行の高さの設定
- 印刷機能
使い始める
インストール：
npm i @codeflex/antd-crud
コード：
'緑' ; if ( tag === '敗者' ) { color = '火山' ; } return ( <タグの色= {カラー}キー= {タグ} > {タグ. toUpperCase () } </ Tag > ); }) } </> ), } ]; constデータ:アカウント[] = [ {キー: ' 1 ' 、名前: 'ジョンブラウン' 、年齢: 32 、住所: 'ニューヨーク No.1 レイクパーク' 、タグ: [ ' ' ' 、'開発者' ]、}, {キー: ' 2 ' 、名前: 'ジム グリーン' 、年齢: 42 歳、住所: 'ロンドン No. 1 レイクパーク' 、タグ: [ '敗者' ]、}、{キー: ' 3 ' 、名前: 「ジョー ブラック」、年齢: 32 、住所: 「シドニー No. 1 レイク パーク」、タグ: [ 'クール' 、'教師' ]、}、]; constアクション:アクション<アカウント> = { onCreate :(アカウント) => {コンソール. log ( " onCreate " ,アカウント); } }; return ( < divスタイル= { {幅: pageNumber = { 1 } pageSize = { 10 } totalRow = { 2342 } /> </ div > ) }
ColumnConfig タイプの説明:
ColumnConfigAntd から継承されたテーブルの列のすべての構成については、https: //ant-design.antgroup.com/components/table-cn#columnを参照してください。
これに基づいて、独自の構成を追加しました。
- placeholder : 検索ボックスと編集ページのプレースホルダー コンテンツ
- supportSearch : 検索要素をサポートするかどうか
- form : フォームのフォーム設定を編集します。タイプは次のとおりです。
FormConfig
FormConfig タイプの説明:
type FormConfig = { // フォーム タイプ、デフォルトは入力、// サポート: Input、InputNumber、Hidden、Radio、Checkbox、Rate、// Switch、DatePicker、Select、Slider、Upload type : string , // カスタム プロパティ、サポートantd 制御属性のすべての属性設定?: any , //検証ルールは編集ページルールでのみ機能します?: any [], }
Actions タイプの説明:
ActionsAntdCrud コンポーネントのリスニング メソッドを定義するために使用されます
Actions 定義されている型は次のとおりです。
type Actions < T > = { //データリストを取得onFetchList ?: ( currentPage : number , pageSize : number , totalPage : number , searchParams : any , sortKey : string , sortType : " asc " | " desc " ) => void , // データの詳細を取得onFetchDetail ?: ( row : T ) => T , // 単一のデータを削除onDelete ?: ( row : T ) => void , // データを一括削除onDeleteBatch ?: ( rows : T []) = > void , //データ更新onUpdate ?: ( row : T ) => void , // データ作成onCreate ?: ( row : T ) => void , // 検索ボックスの値を初期化onFormItemValueInit ?: (キー:文字列) =>任意}
ユーザーは、データを操作またはクエリするために上記のメソッドを定義する必要があります。 Actions
デモを実行する
git clone https://gitee.com/antdadmin/antd-crud.git cd antd-crud/example npm install npm run dev
AntdAdmin の概要
AntdAdmin は、React + Ant.Design に基づいたオープン ソース テクノロジ コミュニティであり、そのオープン ソース (または計画されているオープン ソース) の高度なコンポーネントには次のものが含まれます。
- antd-crud: React + Ant.Design (オープンソース) をベースにした追加、削除、変更、確認のための高度なコンポーネント。
- antd-bpmn: React + Ant.Design に基づくワークフロー設計コンポーネント (準備中...)。
- antd-builder: React + Ant.Design に基づくドラッグ アンド ドロップ設計コンポーネント (準備中...)。