list组件应用
Posted lvsally
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了list组件应用相关的知识，希望对你有一定的参考价值。
画线工具，功能需求：五个列表，前四列每一行都存放着不同的画线工具。第五列用于保存自己收藏的图形。其中每列都具有收藏和取消收藏的功能。
数据结构
第五列数组内容为空，在页面初始化时向服务器动态获取用户收藏的工具。
var chartLineStyle = [//顶部画图图片集合 [ {idx:0,dia:\'LineSegment\',txt:"线段",val:"c0_0",isSelect:"no",selImg:\'imgs/rtdream/c1_slashSel.png\',imgSrc:\'imgs/rtdream/c1_slash.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:1,dia:\'HorizontalLine\',txt:"水平线段",val:"c0_1",isSelect:"no",selImg:\'imgs/rtdream/c1_horizontalSel.png\',imgSrc:\'imgs/rtdream/c1_horizontal.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:2,dia:\'VerticalLine\',txt:"竖直线段",val:"c0_2",isSelect:"no",selImg:\'imgs/rtdream/c1_verticalSel.png\',imgSrc:\'imgs/rtdream/c1_vertical.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:3,dia:\'RayLine\',txt:"射线",val:"c0_3",isSelect:"no",selImg:\'imgs/rtdream/c1_radialSel.png\',imgSrc:\'imgs/rtdream/c1_radial.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:4,dia:\'BidirectionLine\',txt:"直线",val:"c0_4",isSelect:"no",selImg:\'imgs/rtdream/c1_straightLineSel.png\',imgSrc:\'imgs/rtdream/c1_straightLine.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:5,dia:\'ParallelLine\',txt:"平行线",val:"c0_5",isSelect:"no",selImg:\'imgs/rtdream/c1_parallelLinesSel.png\',imgSrc:\'imgs/rtdream/c1_parallelLines.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:6,dia:\'CyclicLines\',txt:"等周期线",val:"c0_6",isSelect:"no",selImg:\'imgs/rtdream/c1_cycleSel.png\',imgSrc:\'imgs/rtdream/c1_cycle.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:7,dia:\'FibChannel\',txt:"通道线",val:"c0_7",isSelect:"no",selImg:\'imgs/rtdream/c1_passSel.png\',imgSrc:\'imgs/rtdream/c1_pass.png\',save:"imgs/rtdream/uncollected_min.png"} ], [ {idx:0,dia:\'Triangle\',txt:"三角形",val:"c1_0",isSelect:"no",selImg:\'imgs/rtdream/c2_triangleSel.png\',imgSrc:\'imgs/rtdream/c2_triangle.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:1,dia:\'Rectangle\',txt:"矩形",val:"c1_1",isSelect:"no",selImg:\'imgs/rtdream/c2_rectangleSel.png\',imgSrc:\'imgs/rtdream/c2_rectangle.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:2,dia:\'Parallelogram\',txt:"平行四边形",val:"c1_2",isSelect:"no",selImg:\'imgs/rtdream/c2_parallelogramSel.png\',imgSrc:\'imgs/rtdream/c2_parallelogram.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:3,dia:\'Circle\',txt:"圆",val:"c1_3",isSelect:"no",selImg:\'imgs/rtdream/c2_circularSel.png\',imgSrc:\'imgs/rtdream/c2_circular.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:4,dia:\'Ellipse\',txt:"椭圆",val:"c1_4",isSelect:"no",selImg:\'imgs/rtdream/c2_ellipseSel.png\',imgSrc:\'imgs/rtdream/c2_ellipse.png\',save:"imgs/rtdream/uncollected_min.png"} ], [ {idx:0,dia:\'ThreeWave\',txt:"三浪",val:"c2_0",isSelect:"no",selImg:\'imgs/rtdream/c3_threeWaveSel.png\',imgSrc:\'imgs/rtdream/c3_threeWave.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:1,dia:\'FiveWave\',txt:"五浪",val:"c2_1",isSelect:"no",selImg:\'imgs/rtdream/c3_fiveWaveSel.png\',imgSrc:\'imgs/rtdream/c3_fiveWave.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:2,dia:\'EightWave\',txt:"八浪",val:"c2_2",isSelect:"no",selImg:\'imgs/rtdream/c3_eightWaveSel.png\',imgSrc:\'imgs/rtdream/c3_eightWave.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:3,dia:\'HeadShoulder\',txt:"头肩顶/底",val:"c2_3",isSelect:"no",selImg:\'imgs/rtdream/c3_multipleWaveSel.png\',imgSrc:\'imgs/rtdream/c3_multipleWave.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:4,dia:\'WHeadFoot\',txt:"M头W底",val:"c2_4",isSelect:"no",selImg:\'imgs/rtdream/c3_mwShapeSel.png\',imgSrc:\'imgs/rtdream/c3_mwShape.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:5,dia:\'ABCD\',txt:"ABCD形态",val:"c2_5",isSelect:"no",selImg:\'imgs/rtdream/c3_abcdShapeSel.png\',imgSrc:\'imgs/rtdream/c3_abcdShape.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:6,dia:\'XABCD\',txt:"XABCD形态",val:"c2_6",isSelect:"no",selImg:\'imgs/rtdream/c3_xabcdShapeSel.png\',imgSrc:\'imgs/rtdream/c3_xabcdShape.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:7,dia:\'TrianglePattern\',txt:"三角形态",val:"c2_7",isSelect:"no",selImg:\'imgs/rtdream/c3_tetraShapeSel.png\',imgSrc:\'imgs/rtdream/c3_tetraShape.png\',save:"imgs/rtdream/uncollected_min.png"} ], [ {idx:0,dia:\'FibSpeedResistanceFan\',txt:"速阻线",val:"c3_0",isSelect:"no",selImg:\'imgs/rtdream/c4_speedResistanceSel.png\',imgSrc:\'imgs/rtdream/c4_speedResistance.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:1,dia:\'GannBox\',txt:"江恩箱",val:"c3_1",isSelect:"no",selImg:\'imgs/rtdream/c4_JiangEnxiangSel.png\',imgSrc:\'imgs/rtdream/c4_JiangEnxiang.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:2,dia:\'GannFan\',txt:"江恩角度线",val:"c3_2",isSelect:"no",selImg:\'imgs/rtdream/c4_gannFanSel.png\',imgSrc:\'imgs/rtdream/c4_gannFan.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:3,dia:\'FibChannel\',txt:"斐波那契通道",val:"c3_3",isSelect:"no",selImg:\'imgs/rtdream/c4_screenLinesSel.png\',imgSrc:\'imgs/rtdream/c4_screenLines.png\',save:"imgs/rtdream/uncollected_min.png"}, // {idx:4,dia:\'FibCircles\',txt:"消解点",val:"c3_4",isSelect:"no",selImg:\'imgs/rtdream/c4_digestionSel.png\',imgSrc:\'imgs/rtdream/c4_digestion.png\',save:"imgs/rtdream/uncollected_min.png"}, // {idx:5,dia:\'Pitchfork\',txt:"斐波那契周期线",val:"c3_5",isSelect:"no",selImg:\'imgs/rtdream/c4_fibonacciSel.png\',imgSrc:\'imgs/rtdream/c4_fibonacci.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:4,dia:\'FibCircles\',txt:"斐波那契同心圆",val:"c3_4",isSelect:"no",selImg:\'imgs/rtdream/c4_fibonacciCirSel.png\',imgSrc:\'imgs/rtdream/c4_fibonacciCir.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:5,dia:\'Pitchfork\',txt:"干草叉",val:"c3_5",isSelect:"no",selImg:\'imgs/rtdream/c4_pitchforkSel.png\',imgSrc:\'imgs/rtdream/c4_pitchfork.png\',save:"imgs/rtdream/uncollected_min.png"}, {idx:6,dia:\'FibRetracement\',txt:"黄金分割",val:"c3_6",isSelect:"no",selImg:\'imgs/rtdream/c4_goldensectionSel.png\',imgSrc:\'imgs/rtdream/c4_goldensection.png\',save:"imgs/rtdream/uncollected_min.png"} // {idx:7,dia:\'PredictRange\',txt:"预测点",val:"c3_7",isSelect:"no",selImg:\'imgs/rtdream/c4_digestionSel.png\',imgSrc:\'imgs/rtdream/c4_digestion.png\',save:"imgs/rtdream/uncollected_min.png"} ], [] ];
1 new list，写相关事件，点击事件可优化
分两步： 1.1如果list为第五个，写针对第五列的事件，用户取消收藏将服务器发送取消后的收藏结果，并且将取消元素移出当前组。
1.2 list为其他组，写不是特殊列事件，
用户取消保存改变当前收藏状态，将第五列元素对应的数组元素pop，将用户的收藏结果保存在服务器。
用户选择保存改变当前收藏状态，将第五列元素对应的数组元素push，将用户的收藏结果保存在服务器。
function createChartListTools(pid,showImg,index){//头部菜单画图显示
if (ChartListTools) {ChartListTools.r();}
var items = {
p:pid,
ifIcon:true,
ifSave:true,
items: chartLineStyle[+index],
onClick:function(selElm){
// [].forEach.call($(\'canvas_chartGroupTools\').querySelectorAll(\'li[opt]\'),function(elem){
// $(elem).ac(\'shadow1\');
// })
if (+index === 4) {//收藏按钮功能
if ($(selElm.elm).find(\'img\').length > 0) {
if ($(selElm.elm).chr(0).attr(\'opt\') == \'save\') {
if($(selElm.elm).chr(0).attr(\'isSelect\') == \'yes\'){
//判断收藏栏中是否有收藏图标，如果没有隐藏删除弹框
var selElmTag = $(selElm.elm).pn(2).getElementsByTagName(\'tr\');
if (selElmTag.length<=1) {
ChartListTools.r();
$(\'canvas_chartTools_content\').r();
}
$(selElm.elm).pn(0).r();
//删除收藏中取消选中的元素
var argsYes = chartLineStyle;
var _selVal = selElm.val;
for(var i=0; i<argsYes[+index].length; i++){
if(argsYes[+index][i].val == _selVal){
var _imgFrom = _selVal.substring(1,2);
var _imgFromIndex = _selVal.substring(3,_selVal.length);
(argsYes[+_imgFrom])[_imgFromIndex].isSelect = \'no\';
(argsYes[+_imgFrom])[_imgFromIndex].save = \'imgs/rtdream/uncollected_min.png\';
argsYes[+index].splice(i, 1);
}
}
chartSaveArr = argsYes[4];
settingsSet(\'UserSettingsTemplates.Userlayouttemplates.chartLineItems\',chartSaveArr,null,false);
}
}else{
var get_i = chartLineStyle[+index];
selectDrawType(get_i[selElm.idx].dia);
ChartListTools.r();
$(\'canvas_chartTools_content\').r();
}
}else{
var get_i = chartLineStyle[+index];
selectDrawType(get_i[selElm.idx].dia);
ChartListTools.r();
$(\'canvas_chartTools_content\').r();
}
}else{//选择画图工具功能
if ($(selElm.elm).find(\'img\').length > 0) {
if ($(selElm.elm).chr(0).attr(\'opt\') == \'save\') {
if($(selElm.elm).chr(0).attr(\'isSelect\') == \'yes\'){
$(selElm.elm).chr(0).attr(\'src\',\'imgs/rtdream/uncollected_min.png\');
$(selElm.elm).chr(0).attr(\'isSelect\',\'no\');
var argsYes = chartLineStyle;
(argsYes[+index])[selElm.idx].isSelect = \'no\';
(argsYes[+index])[selElm.idx].save = \'imgs/rtdream/uncollected_min.png\';
//删除收藏中取消选中的元素
var _selVal = (argsYes[+index])[selElm.idx].val;
for(var i=0; i<argsYes[4].length; i++){
if(argsYes[4][i].val == _selVal){
argsYes[4].splice(i, 1);
}
}
chartSaveArr = argsYes[4];
settingsSet(\'UserSettingsTemplates.Userlayouttemplates.chartLineItems\',chartSaveArr,null,false);
}else{
$(selElm.elm).chr(0).attr(\'src\',\'imgs/rtdream/collected_min.png\');
$(selElm.elm).chr(0).attr(\'isSelect\',\'yes\');
var argsNO = chartLineStyle;
(argsNO[+index])[selElm.idx].isSelect = \'yes\';
(argsNO[+index])[selElm.idx].save = \'imgs/rtdream/collected_min.png\';
//添加收藏中选中的元素
var _add = {
idx:argsNO[4].length,
txt:(argsNO[+index])[selElm.idx].txt,
val:(argsNO[+index])[selElm.idx].val,
isSelect:(argsNO[+index])[selElm.idx].isSelect,
selImg:(argsNO[+index])[selElm.idx].selImg,
imgSrc:(argsNO[+index])[selElm.idx].imgSrc,
save:(argsNO[+index])[selElm.idx].save,
dia:(argsNO[+index])[selElm.idx].dia
};
argsNO[4].push(_add);
chartSaveArr = argsNO[4];
settingsSet(\'UserSettingsTemplates.Userlayouttemplates.chartLineItems\',chartSaveArr,null,false);
}
}else{
var get_i = chartLineStyle[+index];
if (showImg) {
showImg.chr(0).attr(\'src\',get_i[selElm.idx].selImg);
showImg.chr(0).attr(\'dia\',get_i[selElm.idx].dia);
}
selectDrawType(get_i[selElm.idx].dia);
ChartListTools.r();
$(\'canvas_chartTools_content\').r();
}
}else{
var get_f = chartLineStyle[+index];
if (showImg) {
showImg.chr(0).attr(\'src\',get_f[selElm.idx].selImg);
showImg.chr(0).attr(\'dia\',get_f[selElm.idx].dia);
}
selectDrawType(get_f[selElm.idx].dia);
ChartListTools.r();
$(\'canvas_chartTools_content\').r();
}
}
}
};
ChartListTools = new WT.UI.List_bs(items);
ChartListTools.render();
ChartListTools.show();
}
2 在点击事件触发时调用函数
$(\'canvas_chartGroupTools\').evt(\'click\',function(){ var e=WT.e.fix(e),_e=e.t; if ($(\'canvas_chartTools_content\')) { $(\'canvas_chartTools_content\').r(); [].forEach.call($(\'canvas_chartGroupTools\').querySelectorAll(\'li[opt]\'),function(elem){ $(elem).ac(\'shadow1\'); }); } [].forEach.call($(\'canvas_chartGroupTools\').querySelectorAll(\'[src]\'),function(elem){//点击其他元素图像设置为未选中状态 if ($(elem).attr(\'src\').indexOf(\'Sel.png\')>-1) { var _elemSrc = $(elem).attr(\'src\'); _elemSrc = _elemSrc.slice(0,_elemSrc.length-7)+\'.png\'; $(elem).attr(\'src\',_elemSrc); } }); while (_e.tagName != \'UL\') {//统一操作 if (_e.tagName === \'LI\' && !_e.attr(\'isdel\')) { var _o = _e.pos(); if (+_e.attr(\'opt\') <= 3) { $DB.adElm(\'canvas_chartTools_content\', \'div\').css(WT.box(Number(_o.x)+",以上是关于list组件应用的主要内容，如果未能解决你的问题，请参考以下文章后退按钮关闭应用程序而不是转到上一个片段 android 导航组件
如何打开关闭应用程序后打开的最后一个片段并使用导航抽屉和导航组件重新打开它