美文网首页前端面试题
easyui的树形表格treegrid实现合并单元格的功能

easyui的树形表格treegrid实现合并单元格的功能

作者: 小薇同学v | 来源:发表于2020-09-24 14:19 被阅读0次

    easyui的datagrid数据表格实现单元格是很容易实现的,但是想要树形结构treegrid的表格合并单元格就很难了。我在网上查了一圈,都没有查到实现的办法!绞尽脑汁之后,终于实现了这个合并的功能!

    主要就是根据最外层级来判断,一层一层的判断来进行合并。如下

    //树型结构合并单元格的方法
    function mergeCell(row, field) {

            $(".datagrid-view2 .datagrid-btable tr").each(function () {

                if ($(this).attr("node-id") == row.id) {

                    var treeNext =$(this).next();

                    var treeTr =$(treeNext).find("tr");

                    var rowspan =1, stratNum =0, endNum =0;

                    for (var i =1; i <= treeTr.length; i++) {

                        var treeTd =$($(treeTr)[i]).find("td[field=\"" + field +"\"]");

                        var treeTdName =$($(treeTr)[i]).find("td[field=\"SHOWNAME_LAST\"]");

                        var treeTd2 =$($(treeTr)[i -1]).find("td[field=\"" + field +"\"]");

                        var treeTd2Name =$($(treeTr)[i -1]).find("td[field=\"SHOWNAME_LAST\"]");

                        if ($(treeTd).text() ==$(treeTd2).text() &&$(treeTdName).text() ==$(treeTd2Name).text()) {

                                rowspan++;

                                $(treeTd).hide();

                        }else {

                                $($(treeTr)[stratNum]).find("td[field=\"" + field +"\"]").attr("rowspan", rowspan);

                                endNum += rowspan -1;

                                stratNum = endNum + rowspan;

                                rowspan =1;

                       }

                   }

             }

        });

    }

    调用时如下,

    onBeforeExpand:function (row) {

            mergeCell(row, "SHOWNAME_LAST");//传入row和列的名称

            mergeCell(row, "PREMIUM_LAST");

            mergeCell(row, "WORTH_LAST");

            mergeCell(row, "BBZB_LAST");

            mergeCell(row, "RATE_LAST");

            return true;

    },

    onLoadSuccess:function (row, data) {

            $.each(data, function (index, val) {

                    $('#catetoryMix').treegrid('collapseAll', data[index].id);

            });

    }

    希望对大家有帮助!

    相关文章

      网友评论

        本文标题:easyui的树形表格treegrid实现合并单元格的功能

        本文链接:https://www.haomeiwen.com/subject/jeizyktx.html