item - 列表项控件

item列表项结构,是一个项的结构,如果要做一个列表,先把列表的项的结构取出来,从item项里继承过来

1.__initNode方法里把节点从事先装备好的项结构里取出来,并添加完事件

2.在__doRefresh用来设置数据数据

3.在回收时,把结构上改变了的样式复原

4.如果有事件回调在__reset方法里事件回调事件添加

5.事件响应时进行事件回调,回调到item下我模块

如:

列表项控件

Allocate

item控件所在脚本 {lib}ui/item/item.js

页面结构如下:

<div class="g-bd">
    <div class="m-btns">
        <button id="allocate">分配模板</button>
        <button id="recycle">回收模板</button>
        <button id="delete">删除</button>
    </div>
    <div class="m-cnt">
        <table class="w-table">
            <thead>
                <tr><th width="50"><input type="checkbox" id="selectAll"/></th><th width="50">序号</th><th>姓名</th><th width="50">性别</th><th width="50">操作</th></tr>
            </thead>
            <tbody id="content">
                <tr><td colspan="5" class="hint">数据加载中...</td></tr>
            </tbody>
        </table>
     </div>
</div>

从item继承并重写上面的几个方法

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _o = NEJ.P('nej.o'),
        _v = NEJ.P('nej.v'),
        _ui = NEJ.P('nej.ui'),
        _p = _('nej.demo'),
        _proWorkerItem,
        _supWorkerItem;


    var _key = _e._$addNodeTemplate(
                _e._$html2node('<table>\
                                <tr><td><input type="checkbox"/></td>\
                                    <td></td><td></td><td></td>\
                                    <td><a href="javascript:void(0);"/>删除</a></td>\
                                </tr><table>').getElementsByTagName('tr')[0]);
    // 工人项
    _p._$$WorkerItem = NEJ.C();
    _proWorkerItem = _p._$$WorkerItem._$extend(_ui._$$Item, !0);
    _supWorkerItem = _ui._$$Item.prototype;
    /**
     * 控件初始化
     * @return {Void}
     */
    _proWorkerItem.__init = function(_opt){
        this.__super(_opt);
        _opt = _opt || _o;
        this.__onCheck = _opt.oncheck;
    };
    /**
     * 初始化节点,子类重写具体逻辑
     * @return {Void}
     */
    _proWorkerItem.__initNode = function(){
        this.__body = _e._$getNodeTemplate(_key);
        var _etds = this.__body.getElementsByTagName('td');
        this.__ecb = this.__body.getElementsByTagName('input')[0];
        this.__enumber = _etds[1];
        this.__ename = _etds[2];
        this.__egender = _etds[3];
        this.__edelete = this.__body.getElementsByTagName('a')[0];
        _v._$addEvent(this.__edelete, 'click', this.__onClickDelete._$bind(this));
        _v._$addEvent(this.__ecb, 'click', this.__onClickCheck._$bind(this));
    };
    /**
     * 刷新项,子类实现具体逻辑
     * @return {Void}
     */
    _proWorkerItem.__doRefresh = function(_data){
        this.__enumber.innerText = this.__index + 1;
        this.__ename.innerText = _data.name;
        this.__egender.innerText = _data.gender?'男':'女';
        if(this.__index+1 == this.__end)
            _e._$addClassName(this.__body, 'last');
    };
    /**
     * 点击删除的响应函数
     * @param {Object} _event   事件对象
     */
    _proWorkerItem.__onClickDelete = function(_event){
        //alert('删除"' + this.__data.name + '"');
        this.__destroy();
    };
    /**
     * 点击复选框的响应函数
     * @param {Object} _event   事件对象
     */
    _proWorkerItem.__onClickCheck = function(_event){
        this.__onCheck&&this.__onCheck(this);
    };
    /**
     * 控件销毁
     * @return {Void}
     */
    _proWorkerItem.__destroy = function(){
        _supWorkerItem.__destroy.apply(this, arguments);
        this.__ecb.checked = false;
        _e._$delClassName(this.__body, 'last');
    };
    /**
     * 获取数据
     * @return  {Object}    数据
     */
    _proWorkerItem._$getData = function(){
        return this.__data;
    };
    /**
     * check该项
     * @param {Boolean} _checked
     */
    _proWorkerItem._$check = function(_checked){
        this.__ecb.checked = !!_checked;
    };
    /**
     * 获取该项是否选中
     * @return  {Boolean} _checked  是否选中
     */
    _proWorkerItem._$checked = function(){
        return this.__ecb.checked;
    };
};
define('{pro}item.js', ['{lib}ui/item/item.js', '{lib}util/template/tpl.js'], f);

上面的workItem是从item.js继承过来,如前所述,只在给相关的方法里进行逻辑处理就可以完成批项的处理

Allocate Item

var f = function(){
        var _  = NEJ.P,
            _e = _('nej.e'),
            _o = NEJ.P('nej.o'),
            _v = NEJ.P('nej.v'),
            _u = NEJ.P('nej.u'),
            _ui = NEJ.P('nej.ui'),
            _tu = NEJ.P('t.u'),
            _p = _('nej.demo'),
            _workItems;
        // 页面初始化接口
        function init(){
            _v._$addEvent('allocate', 'click', function(){
                // 点击"分配模板"按钮的消息响应
                var _data = {workers: [{name:'魏文庆', gender:1}, {name:'严跃杰', gender:1}, {name:'张晓容'}]};
                var _econtent = _e._$get('content');
                _e._$empty(_econtent);
                workItems = _e._$getItemTemplate(_data.workers, _p._$$WorkerItem, {
                    parent: _econtent,
                    oncheck: onCheck
                });
            });
            _v._$addEvent('recycle', 'click', function(){
                // 点击"回收模板"按钮的消息响应
                _p._$$WorkerItem._$recycle(workItems);
            });
            _v._$addEvent('selectAll', 'click', onClickSelectAll);
            _v._$addEvent('delete', 'click', onClickDelete);
        }
        /**
         * 工人项check的回调函数
         * @param {Object} _item    工人项
         */
        function onCheck(_item){
            var _checkedItems = getCheckedItems();
            var _eselectAll = _e._$get('selectAll');
            var _checked;
            if (!_checkedItems||!_checkedItems.length) {
                _eselectAll.checked = false;
                return;
            }
            if (_checkedItems.length == workItems.length) {
                _eselectAll.checked = true;
            }
        }
        /**
         * 获取所有的选中项
         * @return  {Array} 选中项列表
         */
        function getCheckedItems(){
            var _items = [];
            _u._$forEach(workItems, function(worker){
                if(worker._$checked()){
                    _items.push(worker);
                }
            });
            return _items;
        }
        /**
         * 点击"删除"按钮的响应函数
         * @param {Object} _event   事件对象
         */
        function onClickDelete(_event){
            var _checkedItems = getCheckedItems();
            var _arr;
            if(_checkedItems.length){
                _arr = [];
                _u._$forEach(_checkedItems, function(_item){
                    var _data = _item._$getData();
                    _arr.push(_data&&_data.name);
                });
                _p._$$WorkerItem._$recycle(_checkedItems);
            }
        }
        /**
         * 点击"全选"复选框的响应函数
         * @param {Object} _event   事件对象
         */
        function onClickSelectAll(_event){
            var _checked = v._$getElement(_event).checked;
            _u._$forEach(workItems, function(_worker){
                _worker._$check(_checked);
            });
        }
        init();
    };
    define(['{lib}base/element.js','{lib}base/event.js','{pro}js/item.js', '{pro}js/extend.js'], f);

Explain

上面做的工作是把数据列表,生成到item项里,并进行的回收,删除,分配的处理

更多的参数信息请参照item.js

Recycle

_checkedItems是一个数据,对其进行批量回后可以用item上的静态方法进行回收如下

p.$$WorkerItem._$recycle(_checkedItems);

如果是单个的item项,可以对其进行

item.$recycle()这样回收方式

DatePick external interface

可以自定义对外接口,可外面模块可以获取item项里的相关数据

Known Issues

Demo

列表项控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus