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)+","+Number(_o.y+20)+",150,200")).cn('pa').css('z-index:10;');
                        createChartListTools($('canvas_chartTools_content'),_e,+_e.attr('opt'));
                    }else if (+_e.attr('opt') === 4) {
                        if(chartLineStyle[4].length>0){
                            $DB.adElm('canvas_chartTools_content', 'div').css(WT.box(Number(_o.x)+","+Number(_o.y+20)+",150,200")).cn('pa').css('z-index:10;');
                            createChartListTools($('canvas_chartTools_content'),false,+_e.attr('opt'));
                         }else{
                             var save =  $DB.adElm('canvas_chartTools_content', 'div').css(WT.box(Number(_o.x)+","+Number(_o.y+20)+",150,200")).cn('pa').css('z-index:10;    background-color: white;    border: 1px #ccc solid;    text-align: center;    padding-top: 10px;');
                             $(save).adElm('','div').cn('w150 h200 b_65 bc_68 tac pt10').ht('没有收藏内容');
                         }
                    }else if(+_e.attr('opt') === 5){
                        ChartWidget.showCanvasTrade();
                    }
                    if(menuChatSelect&&menuChatSelect.attr('opt')==5){
                        menuChatSelect.chr(0).attr('src','imgs/rtdream/canvas_font.png');
                    }
                    if(_e.attr('opt')==5){
                        _e.chr(0).attr('src','imgs/rtdream/canvas_font_act.png');
                    }
                    if (_e == menuChatSelect) {
                        return;
                    }else{
                        if (menuChatSelect) {
                            menuChatSelect.ac('shadow1');
                        }
                    }
                    _e.dc('shadow1');
                    menuChatSelect = _e;
                }else if(+_e.attr('opt') === 6){
                    delPiccbFn();
                }
                _e = _e.pn();
            }
        });