anima-list

list

---

A nice CMD module.

---

Usage

It is very easy to use this module.

<div id="l1">
</div>

seajs.use('index', function(List) {
  var items = [{text:'选项1',value:'a'},{text:'选项2',value:'b'},{text:'选项3',value:'c'},{text:"数字值",value:3}],
      list = new List({
        parentNode : '#l1',
        items :items
      });
 
  list.render();
 
  list.on('itemclick',function(ev){
    var item = ev.item,
      target = ev.domTarget;
    //TO DO
  });
});

Api

配置项

element Element

• 列表的根节点，如果指定了这个属性，则直接将对应的DOM转换成列表

parentNode Element

• 列表的父节点，这种方式，列表根据指定的json生成

items Array

• 列表项，列表项的渲染根据 itemTpl相关，默认是'<li>{text}</li>'

itemTpl String

• 列表项生成的模板，默认是'<li>{text}<li/>'

 
  {name : 'a',text:'选项a'} // 生成 '<li>选项a</li>'
 

selectedEvent String

• 选中列表项的事件，默认为'click',可以改成'touch'等事件

multipleSelect Boolean

• 是否允许多选，默认为false

idField String

• 标示列表项id的字段，默认为'id'
• 这个属性用于快速搜索列表项等操作

 list.getItem('134');// 此时可以查找出 id : '134' 的记录
 
 list.getSelectedValue() //此时返回选中记录的 id

• 可以通过配置项更改这个值 , idField : 'value'

statusCls Object

• 列表项状态对应的css，默认的状态css是 am-list-item-name，如 selected状态的名称是 am-list-item-selected

   var  list = new List({
       parentNode : '#l1',
       items :items,
       statusCls : {
         selected : 'active',
         disabled : 'disabled'
       }
     });
   list.render();
 

statusFields Object

• 列表初始化时，根据列表的值设置列表的状态

   var items = [{text:'选项1',value:'a'},{text:'选项2',value:'b',active : true},{text:'选项3',value:'c'},{text:"数字值",value:3,disabled : true}],
      list = new List({
       parentNode : '#l1',
       items :items,
       statusFields : {
         selected : 'active',
         disabled : 'disabled'
       }
     });
   list.render();
 

集合方法

getItems() Array

• 获取所有选项

getFirstItem()

• 获取第一项

getLastItem()

• 获取最后一项

getItemAt(index)

• 根据索引获取选项

getItem(id)

• 根据id 获取选项，可以通过idField字段设置id 对应的字段

getItemByField(field,value)

• 根据字段名和值获取记录

getItemsBy(fn)

• 根据匹配函数获取记录

 list.getItemBy(function(item){
   return item.id == 'a';
 });

setItems(items)

• 设置选项集合

addItem(item,index)

• 添加记录

removeItem(item)

• 删除记录

updateItem(item)

• 更新记录

addItems(items)

• 添加多条记录

clearItems()

• 清除所有记录

选中方法

getSelected()

• 获取选中的记录

getSelection()

• 多选时获取选中的所有记录

getSelectedValue()

• 获取选中记录对应的值,默认字段是id,使用idField配置项可以更改

getSelectionValues()

• 获取选中的所有字段的值，返回数组

setSelected(item)

• 设置选中

clearSelected(item)

• 清除选中

setSelection(items)

• 设置选中的多项

setAllSelection()

• 设置所有选中

clearAllSelection()

• 取消所有选中

isSelected(item)

• 选项是否选中

状态方法

setStatus(item,status,value)

• 设置状态

  list.setStatus(item,'disabled',true); //会增加disabled状态
 
  list.setStatus(item,'disabled',false); //移除disabled状态

hasStatus(item,status)

• 是否有某个状态

事件

itemclick 点击事件，由 selectedEvent属性决定触发的事件

• ev Object 事件对象
• ev.item Object 点击的选项
• ev.domTarget HTMLElement DOM对象
• ev.domEvent Object zepto 抛出来的事件，用于阻止默认事件等

selectedchange 选中改变事件

• ev Object 事件对象
• ev.item Object 发生改变的选项
• ev.selected 'Boolean' 是否选中
• ev.domTarget HTMLElement DOM对象

注意事项

• 单选状态下，只有选中的记录触发此事件，此时取消前面选中的选项不触发2次selectedchange事件
• 多选时，无论选中还是取消选中都会触发

itemselected 选项选中

• ev Object 事件对象
• ev.item Object 发生改变的选项
• ev.domTarget HTMLElement DOM对象

itemunselected 选项取消选中

• ev Object 事件对象
• ev.item Object 发生改变的选项
• ev.domTarget HTMLElement DOM对象

itemsshow 所有记录渲染完成后调用

• 此事件在setItems() 或者 set('items',items)时触发