JQuery list/grid tool. Provides behaviours for any kind of items iterating controls
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
README.md

README.md

smarti.list.js Development

JQuery list/grid tool. Provides behaviours for any kind of items iterating controls

Automatically initializes when page is loaded. If content was loaded within ajax request, call JQuery extension method smarti() on container: $(container).smarti();

Download

Dependencies: smarti.data.js, smarti.to.js

Structure:

<... data-name="..." data-smarti="list" ...> <!--container-->
  ...
  <... data-item="true"> <!--this element will be repeated for each dataItem-->
    ...
  </...>
  ...
</...>

Container html attribute reference:

attribute description
data-name Defines javascript instance name of current smarti.list
<div data-smarti="list" data-name="list">
...
</div>
data-data Defines array of data or javascript function to populate list (global scope)
<script>
  var data = [{...}, {...}, ...];
  //or
  var data = function(){
    $.ajax({
      ...
      success:function(jsonData){ list.load(jsonData) }
    });
  }
</script>
<div data-smarti="list" data-name="list" data-data="data">
...
</div>
data-sortable Toggles sorting. Accept values: true|false|multi. Default: true
<div data-smarti="list" data-name="list" data-sortable="multi">
...
</div>
data-selectable Toggles selecting. Accept values: true|false|multi. Default: false
<div data-smarti="list" data-name="list" data-selectable="true">
...
</div>
data-select-class Defines css class name for selected item. Default: selected
<div data-smarti="list" data-name="list" data-selectable="true" data-select-class="selected-item">
...
</div>

Inner elements html attribute reference:

attribute description
data-...-field
data-...-expr
data-...-method
Most attributes can have suffixes -field, -expr or -method
-field - defines dataItem property name to be used
-expr - defines inline expression (dataItem is accessible by item variable)
-method - defines external method name with dataItem as argument and return primitive value
<div data-field="Name"></div>
<th data-sort-expr="smarti.to('yyyy', item.Date)">Year</th>
<script>
  var getAmount = function(e) { return e.Amount; }
</script>
<td data-method="getAmount">n2</td>
data-(field|expr|method) Displays defined value of dataItem inside element (nested content represents format pattern)
<td data-field="Amount">n2</td>
<td data-expr="item.Amount">Total: {0:n2}</td>
data-sort-(field|expr|method) Defines sorting behaviour on element mouseclick
<th data-sort-field="Date">Date</th>
data-group-(field|expr|method) Defines grouping (element will be repeated for each group)
<div data-group-expr="smarti.to('yyyy',item.Date)">
...
</div>
data-sort Defines default sorting. Accept values: asc|desc. Used with data-sort-... or data-group-... attributes
<th data-sort-field="Date" data-sort="asc">Date</th>
data-select-all Defines "sellect all items" behaviour on element mouseclick. Attribute value can be external method that will be called after selection
<th data-select-all=""><input type="checkbox" /></th>
<th data-select-all="someAction"><input type="checkbox" /></th>
<script>
  var someAction = function() { ... }
</script>
data-select Defines "sellect item" behaviour on element mouseclick. Attribute value can be external method (with current item argument) that will be called after selection
<td data-select=""><input type="checkbox" /></td>
<tr data-select="itemSelect">
...
</tr>
<script>
  var itemSelect = function(item) { ... }
</script>
data-click Defines mouseclick action. Attribute value can be external method that will be called after. If attribute defined within data-item element, then current item argument will be passed
<a data-click="showDetails">Show details</a>
<script>
  var showDetails = function(item) { ... }
</script>
data-show-(field|expr|method) Defines condition if element can be rendered. Supposed return value type: bool
<div data-show-expr="item.Name!=null">
...
</div>
data-attr-<attribute name>-(field|expr|method) Defines html attributes that depend on data.
<div data-field="Amount" data-attr-style-expr="item.Amount > 999 ? 'color:red' : ''">n2</div>
data-aggr-(sum|avg|min|max|first|last)-(field|expr|method) Defines aggregate to be calculated for current group or total summary and displays it
first, last and count aggregates already exists in summary/group (can be displayed with data-(field|expr|method) attribute)
Aggregates are supposed to be used outside data-item="true" element
<td data-field="first.Name"></td>
<td data-aggr-sum-field="Amount">n2</td>
<td data-field="count">Total rows: {0}</td>
data-aggr-custom-method Defines custom aggregate method with arguments: index, dataItem and group
Calculated with every iterated dataItem value should be assigned to custom property of group
Use data-(field|expr|method) attribute to display calculated value
<script>
  var custom_method = function(i, item, group) {
    group.custom_field = group.custom_field || 0;
    group.custom_field += item.Amount;
  }
</script>
<td data-aggr-custom-method="custom_method" data-field="custom_field">Total: {0:n2}</td>