基于Bootstrap的多级表格实现

  在JS中，借助于Bootstrap，我们可以高效地绘制表格。但实际应用中，需要的表格功能更能往往更为复杂，需要在Bootstrap表格类的基础上进行二次开发。

  本文实现的主要是一个三级表格的开发，如下图：

          

  主要的功能如下：

1. 点开一级菜单，出现全部二级菜单，并使一级菜单前的“缩回展开”图标由“缩回”变为“展开”；
2. 点开二级菜单，出现全部三级菜单，并使二级菜单前的“缩回展开”图标由“缩回”变为“展开”；
3. 在二级菜单处于展开状态下，点击对应的一级菜单项，收回二级菜单，并使一级菜单前的“缩回展开”图标由“展开”变为“缩回”；
4. 在三级菜单处于展开状态下，点击对应的二级菜单项，收回三级菜单，并使二级菜单前的“缩回展开”图标由“展开”变为“缩回”；
5. 在三级菜单处于展开状态下，点击对应的一级菜单项，收回二级和三级菜单，并使二级和三级菜单前的“缩回展开”图标由“展开”变为“缩回”；

  其中功能的前4点利用slideToggle()函数+类的添加移除可以实现，这里不再赘述。需要注意的主要是功能的第5点，在相邻级菜单互动的基础上，需要注意一、三级菜单间的互动，实现也较为简单，代码如下：

function StateShow0()    {        $(".二级菜单类名").slideToggle("fast");        if ($("#一级菜单ID").hasClass("glyphicon-plus-sign图标类1"))             {                $("#一级菜单ID").addClass("glyphicon-minus-sign图标类2");                $("#一级菜单ID").removeClass("glyphicon-plus-sign");            }         else             {                $("#一级菜单ID").addClass("glyphicon-plus-sign");                $("#一级菜单ID").removeClass("glyphicon-minus-sign");                $(".二级菜单1类名").css("display","none");                $(".二级菜单2类型").css("display","none");                $("#二级菜单1ID").removeClass("glyphicon-minus-sign");                $("#二级菜单1ID").addClass("glyphicon-plus-sign");                $("#二级菜单2ID").removeClass("glyphicon-minus-sign");                $("#二级菜单2ID").addClass("glyphicon-plus-sign");            }    }