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条后的效果