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

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实现合并单元格的功能)