JavaScript生成分层table

最新推荐文章于 2021-08-27 11:00:38 发布
最新推荐文章于 2021-08-27 11:00:38 发布
阅读量141 收藏
点赞数
文章标签： javascript json 人工智能 ViewUI
原文链接：https://my.oschina.net/u/2999760/blog/858802
版权 
        $(function(){
            var json = '[{"id":"364061218_8","text":"2#电房1250kvA总表","layer":1,"lastMonthV":"2016.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"600","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"364061218_5","text":"一厂区10#盘拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"6627874_1","text":"一厂区1#盘拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"120","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"6693410_1","text":"一厂区2#盘拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"6693410_2","text":"一厂区3#盘拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"364061218_6","text":"一厂区4#5#盘拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"120","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"4203042_1","text":"一厂区5#盘拉机","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]},{"id":"364061218_1","text":"一厂区6#盘拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"364061218_2","text":"一厂区7#盘拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"364061218_4","text":"一厂区8#盘拉机+一厂区复绕总表","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"364061218_3","text":"一厂区9#盘拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]},{"id":"13181474_4","text":"3#电房2000kvA总表","layer":1,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"800","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"13181474_2","text":"二厂区1#平引炉","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"200","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"13181474_3","text":"二厂区1#轧机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"200","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"13181474_1","text":"二厂区2#平引炉","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"200","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"72819234_1","text":"制氮机空压机冷却塔总表","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]},{"id":"263004706_1","text":"4011开关(新电房1600kvA总表)","layer":1,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"1","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"263004706_2","text":"4021开关(三厂区辊底式盘管炉)","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"1","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"263004706_3","text":"4022开关(三厂区辊底式直管炉)","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"1","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"263004706_6","text":"4033开关(三厂区照明)","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"1","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"263004706_7","text":"4034开关(三厂区1米6退火炉)","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"1","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"263004706_11","text":"4041开关(办公室+四厂区总表)","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"1","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"263004706_12","text":"4042开关(1#联拉机+春节用电)","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"1","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"364061218_7","text":"二厂区1#联拉机","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"120","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]}]},{"id":"218440226_6","text":"4#电房总表","layer":1,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"800","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"218440226_2","text":"一厂区2#联拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"218440226_1","text":"一厂区2#轧机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"218440226_4","text":"一厂区3#联拉机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"218440226_5","text":"一厂区3#平引炉+一厂区机修总表","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"218440226_3","text":"一厂区3#轧机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]},{"id":"291250722_6","text":"5#电房总表","layer":1,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"800","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"291250722_5","text":"五厂区550+2#350挤压机总表","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"19735074_4","text":"五厂区2#350挤压机","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"200","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"19735074_5","text":"五厂区550挤压机","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"200","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]},{"id":"291250722_1","text":"一厂区4#平引炉","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"291250722_2","text":"一厂区5#平引炉","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"291250722_3","text":"一厂区6#平引炉","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"291250722_4","text":"一厂区熔铸炉水泵","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"120","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]},{"id":"39395874_11","text":"八厂区总表1250kvA","layer":1,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"500","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"39395874_3","text":"八厂区1375T挤压机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"200","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"39395874_10","text":"八厂区3#4#半连铸炉总表","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"500","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"39395874_1","text":"八厂区冷轧机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"120","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"39395874_2","text":"八厂区热轧机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"60","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"39395874_12","text":"七厂区450冷轧机","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"160","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]},{"id":"39395874_9","text":"八厂区总表2000kvA","layer":1,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"800","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"39395874_4","text":"八厂区1#2#半连铸炉总表","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"200","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"39395874_5","text":"六厂区总表","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"39395874_7","text":"七厂区总表","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"150","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"39395874_6","text":"五厂区总表1","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"19735074_1","text":"五厂区2#400挤压机总表","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"300","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"19735074_3","text":"五厂区630挤压机+连续挤压机水泵","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"300","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"4203042_1","text":"一厂区5#盘拉机","layer":4,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]},{"id":"19735074_2","text":"五厂区小电排100T拉伸机","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"300","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]}]},{"id":"39395874_8","text":"五厂区总表2","layer":2,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"400","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[{"id":"19800610_2","text":"五厂区1#350挤压机","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"120","upElecV":"123.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"19800610_1","text":"五厂区1#400挤压机","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"120","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"0.00","children":[]},{"id":"19800610_3","text":"五厂区小电排拉拔机","layer":3,"lastMonthV":"1.00","curMonthV":"5.00","subMonthV":"4.00","multiRate":"80","upElecV":"0.00","midElecV":"0.00","downElecV":"0.00","totalElecV":"789.00","children":[]}]}]}]';
            var count = 0; //计数所有
            var table = $('#table').get(0);
            var layerFlag = ['☆','◇','△','○'];
            var tempColspan = []; //合并行 存储所有分层信息
             //后面8个数值顺序 lastMonthV curMonthV subMonthV multiRate upElecV midElecV downElecV totalElecV
            var tdData = []; //全部行数据 [ "364061218_8", "2#电房1250kvA总表", 1, "0.00", "0.00", "0.00", "600", "0.00", "0.00", "0.00", "0.00"]
            var tempData = []; //保存所有行数值数据 不保存文本信息 从上面的tdData的第3开始保存
            var dataCount = 0; //获取上面tempData
            recursion(eval(json));
            function recursion(jsondata){ // 循环所有
                $.each(jsondata,function (index,value){
                    if (jsondata[index].children != null){
                        tdData[count]=[]; //每一行的全部数据就是一个数组 到后面把后面的8个数值拆分保存到一个临时数组去填充到td
                        for(var i in value){
                            if(typeof value[i] != 'object'){
                                tempColspan.push(value.layer); //保存所有层信息
                                tdData[count].push(value[i]); //保存所有数据
                            }
                        }
                        count++;
                        var data = jsondata[index].children;
                        recursion(data);
                    }
                });
            }
            $('#afterTd').attr('colspan',maxArray(unRepeat(tempColspan))+1);  //第二行的第二个td 合并最大的分层+1
            for(var i = 1; i < maxArray(unRepeat(tempColspan))+1; i++){ //合并了行 第一行合并的位置后面添加的td等于 合并-1
                $('#afterTd').after('<td class="none"></td>');
            }
            for(var i = 0; i < (maxArray(unRepeat(tempColspan))+2); i++){ //合并了行 第二行合并的位置前面添加的td等于 合并数量+2 序号和五角星占了两个
                $('#beforeTd').before('<td class="none"></td>');
            }
            for(var i = 0; i < tdData.length; i++){ //循环所有的行数据
                $(table).append('<tr></tr>'); // 添加行
                for(var j = 0; j < ((tdData[0].length - 1)+tdData[i][2]); j++){
                    if (table.rows[3+i].cells.length < ((tdData[0].length - 1)+tdData[i][2])){ //从第三行开始添加td 每行添加的td长度不一样 用层的信息去添加td
                        $(table.rows[3+i]).append('<td></td>');
                    }
                }
                $(table.rows[3+i].cells[0]).text(i+1); //第一个td添加行号
                var tdLayer = table.rows[3+i].cells[tdData[i][2]+1]; //层位置
                // 添加分类信息 将每个层位置添加到class 单元格合并 合并4个class是1 3个是2 以此类推
                $(tdLayer).text(tdData[i][1]).attr('class',tdData[i][2]).attr('colspan',(maxArray(unRepeat(tempColspan)) - parseInt($(tdLayer).attr('class')))+1).css('text-align','left').prev().text(layerFlag[$(tdLayer).attr('class') - 1]);
                for(var k = 1; k < $(tdLayer).attr('class'); k++){ //根据层的class访问前面的边框
                    $(table.rows[3+i].cells[k]).css({
                        borderTop:'0 none',
                        borderBottom:'0 none'
                    });
                }
                for(var l = tdData[i][2]+2; l < (tdData[i][2]+2)+3; l++){ //比如层是1加2=3 加2访问层后面的3个td 加3是因为要访问3个 因为每个层信息的td位置不一样 
                    $(table.rows[3+i].cells[l]).attr('colspan',3); //根据每个class层信息合并后面的td
                }
                for(var m = 3; m < tdData[0].length; m++){ //把tdData行数组里面的数值数据全部保存 从第三个开始保存 tdData的所有数值数据
                    tempData.push(tdData[i][m]); 
                }
                for(var n = tdData[i][2]+2; n < (tdData[i][2]+2)+8; n++){ //填充数据 加8是访问层后面的8个td 每个层位置不一样 但是后面的数据长度一样
                    $(table.rows[3+i].cells[n]).text(tempData[dataCount]);  //n循环次数的和tempData长度一样 用dataCount++去访问填充
                    dataCount++;
                }
            }
            for(var j = 3; j < table.rows.length; j++){ //从第三行开始查找有colspan的td
                for(var k = 0; k < table.rows[j].cells.length; k++){
                    if(table.rows[j].cells[k].colSpan > 1){
                        for(var l = 1; l < table.rows[j].cells[k].colSpan; l++){ //从有colspan的td开始添加 td.none 添加长度等于合并的colspan - 1
                            $(table.rows[j].cells[k]).after('<td class="none"></td>');
                        }
                    }
                }
            }
        });
        $(window).click(function (){
            console.log(obj.get_posi_value('table'));
        });
         // 最大数组
        function maxArray(array){
            var max = array[0];
            for(var i=1;i<array.length;i++){
                if(max<array[i]){
                    max=array[i];
                }
            }
            return max;
        }
         // 数组去重
        function unRepeat(array){
            var n = [];
            for(var i = 0; i < array.length; i++){
                if (n.indexOf(array[i]) == -1){
                    n.push(array[i]);
                }
            }
            return n;
        }
        var obj={
    // html5 存储
    sava_data:function (name,value) {
        if (!!window.sessionStorage) {//html5 验证
            localStorage.setItem(name,value);
        }
    },
    // html5 读取
    get_data:function (name) {
        if (!!window.sessionStorage) {
            return localStorage.getItem((name));
        }
    },
    //修改之后的新方法
    get_posi_value:function (tableId) {
        var data = [];//清空 避免数据叠加
        //标题
        $.each($('#'+tableId+'').find('th'),function(i,item){
            if($(item).css('display')!='none'){
                var key=item.parentNode.rowIndex+"_"+item.cellIndex+"_"+item.rowSpan+"_"+item.colSpan+"_1";
                var itemData={};
                itemData[''+key+'']=item.innerText;
                data.push(itemData);
            }
        });
        //内容
        $.each($('#'+tableId+'').find('td'),function(i,item){
            if($(item).css('display')!='none'){
                var key=item.parentNode.rowIndex+"_"+item.cellIndex+"_"+item.rowSpan+"_"+item.colSpan+"_0";
                var itemData={};
                if ($(item).find('input').length > 0) { //push input value
                    itemData[''+key+'']=$(item).find('input').val();
                }else {
                    itemData[''+key+'']=item.innerText;
                }
                data.push(itemData);
            }
        });
        localStorage.clear();
        return data;
    },
    //限制只能输入数字和小数点
    number_readonly:function () {
        $('#form input[type="text"]').on('keyup',function(){
            $(this).val($(this).val().replace(/[^0-9.]/g,''));
        }).on('paste',function () {
            var _this = this;
            setTimeout(function(){
                $(_this).val($(_this).val().replace(/[^0-9.]/g,''));
            },100);
        }).on('blur',function () {//焦点离开时保存数据
            $.each($('#form input[type="text"]'),function(i){
               if ($($('#form input[type="text"]')[i]).val() != '') {
                   obj.sava_data($($('#form input[type="text"]')[i]).attr('id'),$($('#form input[type="text"]')[i]).val());
               }
            });
        });
    },
    // 生成输入框和存储本地数据
    create_input:function () {
        $.each($('#form td'),function(i){// 生成输入框
            if($($('#form td')[i]).text() == ''){
                $($('#form td')[i]).append('<input type="text" id="" name="">');
            }
        });
        $.each($('#form input[type="text"]'),function(i){
            $($('#form input[type="text"]')[i]).attr({// 输入框添加id name
                id:'data_id'+(i),
                name:'data_name'+(i)
            });
            // 获取数据
            if ($($('#form input[type="text"]')[i]).attr('id') == 'data_id'+i) {
                $($('#form input[type="text"]')[i]).val(obj.get_data('data_id'+i));
            }
        });
    }
};

 

转载于:https://my.oschina.net/u/2999760/blog/858802

chinian3056
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
层级设计以及算法，treetable的实现
戈多
03-22 3211
层级数据结构设计
JS树形表格（可分级展开）
04-10
otreetable.js 原生JS树形表格，调用非常简单（只需一句代码即可调用），获取HTML中输出的表格数据重构表格，以树形方式显示，可展开/收缩，不破坏表格原有数据格式及内容，支持无限级，兼容所有浏览器。当前版本支持分级展开、收缩。
双体循环.主要用来显示分层TABLE.
weixin_30613727的博客
07-31 89
1<% 2dimarrDispField(1,11) 3arrDispField(0,0)="Name" 4arrDispField(1,0)=dfShowML("Name") 5arrDispField(0,1)="Sex" 6arrDispFi...
js解析多层json转为层级table，js动态添加td的倍数
heerey525
08-24 1452
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial
HTML中table表格拆分合拼(colspan、rowspan)
yunduanaoligei的博客
08-27 2210
本文关键介绍了HTML中table表格拆分合拼(colspan、rowspan),原文中根据实例编码介绍的十分详尽，对大伙儿的学习或是工作中具备一定的参照学习使用价值，必须的小伙伴们下边伴随着小编来一起学习学习吧 代码演示 横向合并： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> <html> <head&gt
js-algorithms:JavaScript 算法和数据结构
06-08
6. 贪心算法（Greedy Algorithm）：每次选择局部最优解来达到全局最优，如霍夫曼编码、Prim最小生成树、Kruskal最小生成树。 7. 字符串匹配：如朴素算法、KMP算法、Boyer-Moore算法等。 在"js-algorithms"项目中，...
hierarchical_bar_chart-:在R中创建分层条形图的代码
05-05
如何使用“ hbar”功能关于如何使用此“ hbar”功能在R中生成分层条形图的快速演示： “ hbar”函数具有3个必需的参数： 数据-R环境中的data.table对象，其中包含将用于生成hbar图表的数据。 分组-字符串的向量，...
javascript模拟题.pdf
11-26
12. `Math.random()` 函数在JavaScript中生成0到1之间的随机数，不包括0和1，对应B选项。 13. 创建最大的标题的文本标签是`<h1></h1>`，对应B选项。 14. JavaScript 代码段`for(i=1;i;i++) sum +=a[i];` 的输出...
javascript模拟题.docx
11-26
`Math.random()`在JavaScript中生成的是0到1之间（不包括1）的一个随机浮点数，问题12的答案是B。 JavaScript数组操作的例子中，如`a=new Array(2,3,4,5,6)`定义了一个数组，然后通过循环累加数组元素，第一个例子`...
javascript常用函数代码大全.docx
07-09
1. **树型结构**: 实现分层展示数据的组件，支持ASP+SQL，ASP+XML+SQL，Java+SQL等不同平台。 2. **无边框效果**: 通过CSS实现无边框的视觉效果。 3. **联动下拉框**: 两个或多个下拉框之间的值相互依赖，改变一个...
table包的层次关系
10-09
javax.swing.table包与JTable的类层次关系
layer中显示table 表格
hzu_cyc的博客
09-01 1533
<div id="div_MachineInfo"> <table id="table_MachineAllInfo"></table> </div> <script> function MachineInfo() { layui.use('table', function () { var table = layui.table; layer.open({ //shade:0, type: 1, title: false, area:[.
html table th分层,html中 table的结构 彻底搞清 caption th thead等
weixin_32513585的博客
06-24 386
https://www.cnblogs.com/bkylee/p/5918219.html正因为有太多 随意 称呼的 教法, 所以 感到很困惑, 如, 很多人把th叫标题. 那人家 caption怎么想, th只是一个跟td一样的角色, 只是对他进行加粗 加黑了而已, 用于某些单元格的内容 具有 "总起, 总领, 总结, 总计 "之类的语义时...在html中写table的时候,要注意它的结构, ...
html标签的分层
yazhouren的专栏
10-19 2675
一直搞不明白，html中标签如何分层的，也就是table中可以放置和标签吗？这样类似的问题 下面稍微说一说! 1.第一层，也就是最外层，是和 2. 第二层，就是和等 3. 第三层是, table和form 4. 第四次层是等，大部分都属于第4层 5. 之类的不是html标签，而是标签的属性!!! understand???? 如id ,style,class等 这个
html table th分层,html中 table的结构 彻底搞清 caption th thead等
weixin_29009501的博客
06-24 917
正因为有太多 随意 称呼的 教法, 所以 感到很困惑, 如, 很多人把th叫标题. 那人家 caption怎么想, th只是一个跟td一样的角色, 只是对他进行加粗 加黑了而已, 用于某些单元格的内容 具有 "总起, 总领, 总结, 总计 "之类的语义时...在html中写table的时候,要注意它的结构, 和所包含的 标签层次.要得到 一个 空的 单元格, 直接写 就好了, 或许可以加 ...
TreeTable树形数据列表
热门推荐
那一刻，那一夜，那一月，那一年，那一世
12-19 2万+
使用Treetable展示ajax数据，通用的List集合递归转换为具有层级关系的List集合
table上下排序方法
qq_41130774的博客
12-24 491
table上下排序方法 &lt;table id="contentTable" title="Kurt Vonnegut novels" class="table grid table-striped table-bordered table-condensed"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;订货
说说table下面定位层级的问题
Cassie's blog
10-17 2528
先来看看问题是怎样的： 问题描述：就是一个table，我们想实现的效果是hover到比如标题上面，展示一个窗口的姑且，上面展示一些详细的内容。这样的效果，虽然用div列表也可以实现，但是table总有table的优势，我们这里就讲table。 这时候就开动了，很多人的想法，很简单嘛，首先td相对定位，然后里面加个div就是外面那个窗口，绝对定位，完美解决。我只能说，太年轻了我们... 上...
JavaScript生成随机数
最新发布
05-17
JavaScript 生成随机数有多种方法，以下是其中几种常用的方法： 1. 使用 Math.random() 函数生成 0 到 1 之间的随机小数： ```javascript var num = Math.random(); // 生成 0 到 1 之间的随机小数 ``` 2. 生成...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值