DCAT管理者にデータを追加するためにクリックのテーブル関数をカスタマイズする方法は？

DCAT管理者カスタムテーブル：クリックしてデータを追加して情報を入力します

この記事では、DCAT管理者（Laravel-Admin）でカスタムテーブルを構築する方法について説明します。ユーザーがボタンをクリックして新しい行を追加し、新しい行に番号と選択を選択できるようにします。これは、DCAT管理ビルトインテーブルの直接的な機能を超えており、フロントエンドJavaScriptとバックエンドAPIの組み合わせが必要です。

まず、テーブルの上にボタンとID入力ボックスを追加して、データの追加プロセスをトリガーします。 DCAT管理者のツールバー関数を使用して実装できます。

1. ボタンと入力ボックスを追加します。

 $ grid-> tools（function（$ tools）{
    $ツール - > append（データを追加します
        <input type="text" id="input-id" placeholder="输入ID">
HTML
    ）;
}）;

2. バインドボタンクリックイベント（JavaScript）：

jqueryバインディングボタンを使用して、イベントをクリックします。ボタンをクリックした後、入力ボックスにIDを取得し、AJAX Request BackEnd APIを介してデータを取得します。

 $（ '＃add-data-btn'）。クリック（function（）{
    let id = $（ '＃input-id'）。val（）;
    if（id）{
        $ .ajax（{
            url： '/your-api-endpoint'、//バックエンドAPIタイプに置き換えます： 'get'、
            データ：{id：id}、
            成功：関数（応答）{
                addrowtotable（response）;
            }、
            エラー：関数（エラー）{
                アラート（ 'データが失敗した！'の追加！ '）;
                Console.Error（エラー）;
            }
        }）;
    } それ以外 {
        アラート（ 'IDを入力してください'）;
    }
}）;

3. テーブルに新しい行を追加します（JavaScript）：

addRowToTable関数は、バックエンドで返されたデータをテーブルに追加し、数量入力ボックスとカラーセレクターを含む責任があります。バックエンドによって返されるデータにはnameフィールドが含まれていると仮定します。

関数addrowtotable（data）{
    newRow = $（ '<tr> '）;
    newRow.Append（ '<td> 'data.name'</td> '）; // newrow.append（ '表示名newrow.append（'）<td><input type="number" name="quantity"></td> '）; //数量入力ボックスnewrow.Append（ '<td><select name="color"><option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option></select></td>'）; // color selector $（ '＃your-table-id tbody'）。append（newrow）; //テーブルIDに置き換えます
}<p>実際のAPIアドレスとテーブルIDには<code>/your-api-endpoint</code>と<code>#your-table-id</code>を置き換えることを忘れないでください。バックエンドAPIは、入力IDに基づいて対応するデータを返す必要があります。たとえば、 <code>{'name': 'ProductName'}</code> 。この例は、実際のニーズに応じてフィールドと関数を調整できる基本的なフレームワークを提供します。たとえば、より高度なUIコンポーネントを使用して、ユーザーエクスペリエンスを向上させることができます。</p>
</tr>

以上がDCAT管理者にデータを追加するためにクリックのテーブル関数をカスタマイズする方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。