List.js widget for Yii2
List.js is a handy way of adding searching and sorting to HTML lists and tables. It allows searching trough a list of items with multiple data fields per item. Read more on how it works and try some examples here.
So, for the ones who are interested in using List.js in a Yii2 project, here is a simple widget for it.
Either run
yii2-listjs-widget on github
So, for the ones who are interested in using List.js in a Yii2 project, here is a simple widget for it.
Requirements
Yii 2.0 or aboveInstallation
The preferred way to install this extension is through composer.Either run
or add
php composer.phar require --prefer-dist nterms/yii2-listjs-widget "*"
to the require section of your
"nterms/yii2-listjs-widget": "*"
composer.json
file.Usage
Once the extension is installed, simply use it in your code by :<?= \nterms\listjs\ListJs::begin([
'id' => 'days-list',
'search' => true,
'sort' => [
'name' => [
'label' => Yii::t('app', 'Sort by name'),
],
],
'clientOptions' => [
'valueNames' => ['name'],
],
]); ?>
<ul class="list">
<li><div class="name">Sunday</div></li>
<li><div class="name">Monday</div></li>
<li><div class="name">Tuesday</div></li>
<li><div class="name">Wednesday</div></li>
<li><div class="name">Thursday</div></li>
<li><div class="name">Friday</div></li>
<li><div class="name">Saturday</div></li>
</ul>
<?= \nterms\listjs\ListJs::end(); ?>
Configurations
Following properties are available for customizing the widget.options
: HTML attributes for the container element.search
: Whether to show the search field.searchOptions
: HTML attributes (name-value pairs) for the search input tag.sort
: list of name-value pairs for rendering the sorting buttons list. Value being the HTML attributes for the button. Special parameterlabel
is used as the button text...
'sort' => [
'name' => [
'class' => 'sort',
'label' => Yii::t('app', 'Sort by name'),
],
],
...clientOptions
: Options for List.js. Read this for list of options.content
: HTML content, preferably a list or table. If the widget is used in content capturing mode this will be ignored.view
: Name of the view file to render the content. If the widget is used in content capturing mode or a string is assigned tocontent
property this will be ignored.viewParams
: Parameters to be passed toview
when it is being rendered. This property is used only whenview
is rendered to generate the content of the widget.
yii2-listjs-widget on github