LayaBox入门基础之JS代码实现按钮删除功能

2.2.3 实现List增加功能删除功能

​ 实现List删除功能需要实现多选框checkbox功能、删除按钮的鼠标侦听，删除操作后的数据重新渲染。详情直接查看代码与注释：

(function()
{
    //------>用于显示UI组件
    var Stage= Laya.Stage;  //定义变量Stage为Laya的封装好的Stage
    var Handler= Laya.Handler;
    var Loader= Laya.Loader;
    var Event = Laya.Event;   //点击鼠标的时候事件监听需要引用这个包
    var WebGL= Laya.WebGL;
    var CheckBox = Laya.CheckBox;  //实现多选框checkbox功能需要导入Laya提供的包

    var ListDemoView;   //定义整个界面的UI为一个变量
    var arr;
    (function()
    {

       Laya.init(640,1136,WebGL);     //Laya引擎的初始化
       Laya.stage.bgColor = "#ffffff";
       //设置为缩放模式
       Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
       //预加载资源文件（图集路径根据自己的项目实际情况定）后执行回调
       Laya.loader.load(["res/atlas/comp.atlas","res/atlas/template/ButtonTab.atlas"],Handler.create(this,onLoaded));

       
    })();
     
    //要执行的回调函数
    function onLoaded(){
        ListDemoView = new ListPageUI();    //这个ListPageUI类是在layaUI.max.all.js中发布UI的时候自动生成的
        Laya.stage.addChild(ListDemoView);   //这舞台中添加这个ListPage的UI组件

        //获取List模拟数据，并渲染
        getListData();
 
        //侦听增加按钮点击事件
        
        ListDemoView.add.on(Event.CLICK,this,onAddClick);
        //on()方法：四个入参，一个返回值；入参：type：事件的类型，caller：事件侦听函数的执行域，listener：事件侦听函数，args：事件侦听函数的回调参数
        //返回值：EventDispatcher :此EventDispatcher对象


        //侦听删除按钮点击事件
        ListDemoView.del.on(Event.CLICK,this,onRemoveClick);
    }
    //<------用于显示UI组件

    //------->编写代码逻辑，实现List序号逻辑
    //要实现List序号的数据添加，需要用到"laya.ui.List"  API中的list数据源赋值array，
    //单元格渲染处理器renderHandler，以及"laya.display.Node"API通过子节点名字获取子节点对象的方法getChildByName
    

     
     function getListData(){
         //添加list数据
         arr = [];
         for(var i = 1;i<=30;i++){
             arr.push({listNumber:{text:i}});  //listNumber是lable的Name属性值，text也是属性名
         }

         ListDemoView._list.vScrollBarSkin='';   //添加list滚动条功能(UI不可显示)，_list是list组件的变量名
         ListDemoView._list.array = arr;  //数据赋值

         //list渲染函数
         ListDemoView._list.renderHandler = new Handler(this,onRender);

         //mouseHandler:list单元格鼠标事件处理器
         ListDemoView._list.mouseHandler = new Handler(this,onMouse);
     }

     function onRender(cell,index){
         //如果索引不再可索引范围，则终止该函数
         if(index>arr.length)return;
         //获取当前渲染条目的数据
        var data = arr[index];
        //根据子节点的名字listNumber，获取子节点对象
        var listNumber = cell.getChildByName("listNumber");
        //label渲染列表文本（序号）
        listNumber.text=data.listNumber.text;

         //获取当前渲染的check组件
         var check=cell.getChildByName("check");
         //根据isCheck的值，确定当前check组件是否为勾选状态（可以避免出现其他多余的选中状态）
         if(data.isCheck)
         {
             check.selected=true;
         }
         else
         {
             check.selected=false;
         }

     }
     //<------编写代码逻辑，实现List序号逻辑

     //实现List增加功能，需要用到LayaAir引擎laya.display.Sprite中的事件侦听on()方法对鼠标点击事件CLICK进行侦听
     //以及laya.ui.List  API中添加单元格数据源的方法addItem();
     
     function onAddClick(){
         console.log("test");
         //添加单元格数据源
         ListDemoView._list.addItem({listNumber:{text:arr.length+1}});
     }

     //实现List删除功能需要实现多选框checkbox功能，删除按钮的鼠标事件侦听，删除 操作后的数据重新渲染

     function onRemoveClick(){
         //创建一个新的数组，存放移除条目后的数据
         var temp = [];
         for(var i=0;i<arr.length;i++)
         {
              //将非选中状态的条目数据存储起来
              if(!arr[i].isCheck)
              {
                   temp.push(arr[i]);
              }
         }
         arr=temp;
         //将新的数组赋值给list
         ListDemoView._list.array = arr;
     }

     function onMouse(e,index)
     {  
         //鼠标单击事件触发
         if(e.type == Event.CLICK)
         {
            //判断点击事件类型，如果点中的是checkBox组件执行
            if((e.target) instanceof CheckBox)
            {
               //记录当前条目所包含组件的数据信息（必秒后续删除条目后数据结构显示错误）
               var temObj = arr[index];
               //根据check的选中状态，设置条目的数据信息
               if((e.target).selected)
               {
                  ListDemoView._list.setItem(index,{listNumber:{text:temObj.listNumber.text},isCheck:true});
               }
               else
               {
                   ListDemoView._list.setItem(index,{listNumber:{text:temObj.listNumber.text},isCheck:false});
               }
            }
         }
     }
     
})();

运行效果如图28所示：

​ 
​ （图28）删除2、3、4条后的效果