انتخاب انبوه
انتخاب انبوه به کاربران امکان می دهد چندین چک باکس را به طور همزمان بررسی کنند و یک رابط کاربری را برای انجام اقدامات انبوه برای موارد انتخابی تغییر می دهد.
انتخاب انبوه از این قسمت های زیر تشکیل شده است
- چک باکس اصلی که برای بررسی تمام چک باکس های دیگر استفاده می شود، از ویژگی
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>