انتخاب انبوه
انتخاب انبوه به کاربران امکان می دهد چندین چک باکس را به طور همزمان بررسی کنند و یک رابط کاربری را برای انجام اقدامات انبوه برای موارد انتخابی تغییر می دهد.
انتخاب انبوه از این قسمت های زیر تشکیل شده است
- چک باکس اصلی که برای بررسی تمام چک باکس های دیگر استفاده می شود، از ویژگی
data-bulk-select
برای تعریف آن آیتم استفاده می شود. - سه عنصر (3) را می توان با انتخاب انبوه قلاب کرد:
body
,actions
,replacedElement
.<input class="form-check-input" type="checkbox" data-bulk-select='{"body":"bulk-select-body","actions":"bulk-select-actions","replacedElement":"bulk-select-replace-element"}' />
این شناسه های تعریف شده در این کلیدها برای قلاب کردن عناصر مربوطه استفاده می شود.
body:
چک باکس های هدف با استفاده از یک شناسه منحصر به فرد تعریف شده در بسته بندی می شوندbody
. در این مثالbulk-select-body
. هر چک باکس هدفمند در این پوشش با ویژگی مشخص شده استdata-bulk-select-row.
actions:
اقدامات هدف با استفاده از یک شناسه منحصر به فرد تعریف شده در بسته بندی می شوندactions
. عنصر دارای این شناسه (درexample bulk-select-actions
) با علامت زدن چک باکس اصلی تغییر می کند.replacedElement:
عنصر جایگزین شده با عمل با استفاده از یک شناسه منحصر به فرد تعریف شده در بسته بندی می شودreplacedElement
. کنشهای انتخاب انبوه با محتوای این عنصر با این شناسه جایگزین میشوند (به عنوان مثالbulk-select-replace-element
)
مثال
<div class="card shadow-none">
<div class="card-body p-0 pb-3">
<div class="d-flex align-items-center justify-content-end my-3">
<div id="bulk-select-replace-element"><button class="btn btn-falcon-success btn-sm" type="button"><span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span><span class="ms-1">New</span></button></div>
<div class="d-none ms-3" id="bulk-select-actions">
<div class="d-flex"><select class="form-select form-select-sm" aria-label="Bulk actions">
<option selected="selected">Bulk actions</option>
<option value="Delete">Delete</option>
<option value="Archive">Archive</option>
</select><button class="btn btn-falcon-danger btn-sm ms-2" type="button">Apply</button></div>
</div>
</div>
<div class="table-responsive scrollbar">
<table class="table mb-0">
<thead class="text-black bg-200">
<tr>
<th class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" data-bulk-select='{"body":"bulk-select-body","actions":"bulk-select-actions","replacedElement":"bulk-select-replace-element"}' /></div>
</th>
<th class="align-middle">Name</th>
<th class="align-middle">Nationality </th>
<th class="align-middle">Gender</th>
<th class="align-middle white-space-nowrap pe-3">Age</th>
</tr>
</thead>
<tbody id="bulk-select-body">
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-1" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle">Kit Harington</th>
<td class="align-middle">British</td>
<td class="align-middle">Male</td>
<td class="align-middle white-space-nowrap text-end pe-3">32</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-2" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle">Emilia Clarke</th>
<td class="align-middle">British</td>
<td class="align-middle">Female</td>
<td class="align-middle white-space-nowrap text-end pe-3">32</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-3" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle">Peter Dinklage</th>
<td class="align-middle">American</td>
<td class="align-middle">Male</td>
<td class="align-middle white-space-nowrap text-end pe-3">49</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-4" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle">Sean Bean</th>
<td class="align-middle">British</td>
<td class="align-middle">Male</td>
<td class="align-middle white-space-nowrap text-end pe-3">59</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-5" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle">Maisie Williams</th>
<td class="align-middle">British</td>
<td class="align-middle">Female</td>
<td class="align-middle white-space-nowrap text-end pe-3">21</td>
</tr>
<tr>
<td class="align-middle white-space-nowrap">
<div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="checkbox-6" data-bulk-select-row="data-bulk-select-row" /></div>
</td>
<th class="align-middle">Sophie Turner</th>
<td class="align-middle">British</td>
<td class="align-middle">Female</td>
<td class="align-middle white-space-nowrap text-end pe-3">23</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>