Tabelizer插件未在级别4上显示可折叠图像 - 使用MVC

时间：2017-10-19 09:25:18

标签： javascript jquery html css

我有一个包含组织列表的表 - 通过使用Tabelizer插件，它允许我根据级别使我的表可折叠 - 它工作完美，除了我的第4级不包含可折叠图像。 ..之前有没有人使用过这个，并且知道为什么会这样做？

此插件的链接：http://www.jqueryscript.net/table/jQuery-Plugin-To-Create-Multilevel-Collapsible-Table-Rows-Tabelizer.html

这是我的表格，其中包含以下级别：

enter image description here

这是我的代码循环关闭级别（而不是使用级别0，我只是添加1，以便他的级别从1开始而不是0）：

<table id="table1" class="controller table table-condensed table-bordered table-hover">
                            <tr data-level="header" class="header" style="background-color: #00b8ce; color: white;">
                                <th>
                                    @Html.DisplayNameFor(model => model.Name)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.ParentOrganisationId)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.DepartmentId)
                                </th>
                                <th></th>
                            </tr>
                            @{

                                foreach (var item in Model)
                                {
                                    <tr data-level="@item.DepartmentLevel" id="level_@(item.DepartmentLevel + "_" + item.OrganisationId)">
                                        <td class="data">
                                            @{
                                                var options = new AjaxOptions()
                                                {
                                                    HttpMethod = "Get",
                                                    InsertionMode = InsertionMode.ReplaceWith,
                                                    UpdateTargetId = "listofOrganisation"
                                                };
                                            }

                                            @Ajax.ActionLink(item.Name, "EditOrganisation", new { id = item.OrganisationId }, options)
                                        </td>
                                        <td class="data">
                                            @if (item.ParentOrganisationId != null)
                                            {

                                                @Html.DisplayFor(x => x.FirstOrDefault(xc => xc.OrganisationId == item.ParentOrganisationId.Value).Name)
                                            }
                                        </td>
                                        <td class="data">
                                            @Html.DisplayFor(x => x.FirstOrDefault(d => d.Departments.DepartmentId == item.DepartmentId).Departments.Name)
                                        </td>
                                        <td class="text-center">
                                            <button type="submit" onclick="deleteOrganisation('@item.OrganisationId')" class="btn btn-xs btn-danger text-center">
                                                <span class="glyphicon glyphicon-trash"></span>&nbsp;
                                            </button>
                                        </td>
                                    </tr>


                                                }
                            }
                        </table>

下图显示了设置，但以黄色突出显示的区域显示缺少的可折叠图像。

enter image description here

任何人在使用此插件之前和/或经历过同样的事情？

1 个答案:

答案 0 :(得分：0)

我想出了这个问题，它出现在我最后的预料之中（尽管现在处于后视状态，但非常合乎逻辑）......

在css类中（我没有提供，因为它太大了，我认为它并不重要......我错了） - 似乎由于某种原因我的第4级扩展器（这是图像）被隐藏了。我在tabelizer.min.css文件中添加了以下行，它起作用了：

table.controller .l4 .expander{display:inline;}

这个插件很棒，我必须承认！但是 - 它表示“多级”，这是真的，但不是涉及CSS方面的事情。因此，如果您想要添加更多级别，就像我需要的那样，您需要修改CSS文件以适应其他级别的样式。

所以这是我的CSS文件代码，因为任何人都有同样的问题，需要快速复制和粘贴，我想我现在会提供：

table.controller{border-collapse:collapse;padding:0;font:14px/24px Roboto,sans-serif}
table.controller .control{font:14px 'Open Sans'}
table.controller td{padding:0;border:0 solid red}
table.controller .line{position:relative;height:24px;width:15px;float:left}
table.controller .line .vert{width:1px;height:100%}
table.controller .line .horz{position:absolute;top:50%;width:10px;height:1px}
table.controller .line.level1 .horz,table.controller .line.level1 .vert{background-color:#FF2A02}
table.controller .line.level2 .horz,table.controller .line.level2 .vert{background-color:#2BC6CC}
table.controller .line.level3 .horz,table.controller .line.level3 .vert{background-color:#098EE7}
table.controller .line.level4 .horz,table.controller .line.level4 .vert{background-color:#ff6a00}
table.controller .line.level5 .horz,table.controller .line.level5 .vert{background-color:#4cff00}
table.controller .line.level6 .horz,table.controller .line.level6 .vert{background-color:#ff00dc}
table.controller tr.hidden{display:none}
table.controller .expander{margin-right:10px}
table.controller .l1 .control{width:10px;min-height:100%}
table.controller .l2 .control{width:30px;min-height:100%}
table.controller .l3 .control{width:60px;min-height:100%}
table.controller .l4 .control{width:90px;min-height:100%}
table.controller .l5 .control{width:120px;min-height:100%}
table.controller .l6 .control{width:150px;min-height:100%}
table.controller .l7 .control{width:180px;min-height:100%}
table.controller .l1.contracted .control .line.level1,
table.controller .l2.contracted .control .line.level2,
table.controller .l3.contracted .control .line.level3,
table.controller .l4.contracted .control .line.level4,
table.controller .l5.contracted .control .line.level5,
table.controller .l6.contracted .control .line.level6,
table.controller .l7 .expander{display:none}
table.controller .l4 .expander{display:inline;}
table.controller .label{margin-right:30px}
table.controller td.data{text-align:center;min-width:90px}
table.controller .control,table.controller .expander,table.controller .label{float:left}
table.controller .contracted .expander{width:10px;height:20px;background-position:0 5px;background-repeat:no-repeat;background-size:10px 10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAABMUlEQVQ4ja2VPUvDUBSG3zctBAMOuuvm5Ogg+iN0spOLKAgdHNss6T00HdwCXXXSQcGlf0E3waHYRX9GQFMRLsfBBuJHaJLm2c7Hfc653OESGYwxNyQ3rLVHYRhOUAEnG5DcVNWtRqPxKCInCwtTVHVJVS9EZOT7/srCwox433XdcRAEO7UIZ6w7jvPQ6/W6AFiHEACaJM+NMSMRWa1DmLIHYCwiu3UJoaprqnov3/w5X1o4o6mqBsBtp9NZ/lGoKAQAqOqB53mfAA7TXNUNszi5QVlI3iVJcprNVboyyXcAbRG5+l0rLSQ5AdASkZf/6mWFwziO/SiKpnkNRYVvqtru9/vX8xqLCJ+tta3BYPBaZPK8Vx6S3C4qA3I2JDkFcCYil0VFecInkh/W2uOqX8AXLgNp5aJbT/cAAAAASUVORK5CYII=)}
table.controller .expanded .expander{width:10px;height:20px;background-position:0 5px;background-repeat:no-repeat;background-size:10px 10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRTRGQzMxRDlGQzExMUUzODBEOEVDQTdCODg2NDBDNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRTRGQzMxRTlGQzExMUUzODBEOEVDQTdCODg2NDBDNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVFNEZDMzFCOUZDMTExRTM4MEQ4RUNBN0I4ODY0MEM1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVFNEZDMzFDOUZDMTExRTM4MEQ4RUNBN0I4ODY0MEM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+I8q8PAAAAQxJREFUeNpi/P//PwM1ARMDlQHVDWRpbGycB6RNqGEYMPiusgBpHSBDlxoGMjIy/mL6+/dvMpDxnQqGfQealcjU3Nx8GcjPo4ID80BmMcJ49fX1E8k1GOi6jQ0NDQEosQwULAdSl8gw79GPHz8SMZIN0IYfwDAIAzK/kGDYn3///kV0dHS8x5oOW1pabgJjPIuEZFIDDLfjKN7HppDI8NwETMOgcPtPMKd8+vSpAhiml/FEwmMgTkQ3DKeB/f39oHQZBtT0FVu4AXEEMMzfkZSXgRpuAKksLK5rBcodI6twAGpcBDRgNZJhIHYT3sKBUEx++/YtmYuLC+TNf0B2ZldX1z+8iXzkFbAAAQYATlZraA/C4aUAAAAASUVORK5CYII=)}
table.controller .childless .expander,table.controller .control .line.level1 .horz{display:none}
table.controller .l1-first .control .line.level1 .horz{display:block}
table.controller .l1-last .control .line.level1 .horz{display:block;width:10px;height:1px}
table.controller .l1-first .control .line.level1 .vert{bottom:0;position:absolute;width:1px;height:50%}
table.controller .l1-last .control .line.level1 .vert{width:1px;height:50%}
table.controller .control .line.level2 .horz{display:none}
table.controller .l2-first .control .line.level2 .horz{display:block}
table.controller .l2-last .control .line.level2 .horz{display:block;width:10px;height:1px}
table.controller .l2-first .control .line.level2 .vert{bottom:0;position:absolute;width:1px;height:50%}
table.controller .l2-last .control .line.level2 .vert{width:1px;height:50%}
table.controller .control .line.level3 .horz{display:none}
table.controller .l3-first .control .line.level3 .horz{display:block}
table.controller .l3-last .control .line.level3 .horz{display:block;width:10px;height:1px}
table.controller .l3-first .control .line.level3 .vert{bottom:0;position:absolute;width:1px;height:50%}
table.controller .l3-last .control .line.level3 .vert{width:1px;height:50%}
table.controller .control .line.level4 .horz{display:none}
table.controller .l4-first .control .line.level4 .horz{display:block}
table.controller .l4-last .control .line.level4 .horz{display:block;width:10px;height:1px}
table.controller .l4-first .control .line.level4 .vert{bottom:0;position:absolute;width:1px;height:50%}
table.controller .l4-last .control .line.level4 .vert{width:1px;height:50%}
table.controller .control .line.level5 .horz{display:none}
table.controller .l5-first .control .line.level5 .horz{display:block}
table.controller .l5-last .control .line.level5 .horz{display:block;width:10px;height:1px}
table.controller .l5-first .control .line.level5 .vert{bottom:0;position:absolute;width:1px;height:50%}
table.controller .l5-last .control .line.level5 .vert{width:1px;height:50%}
table.controller .control .line.level6 .horz{display:none}
table.controller .l6-first .control .line.level6 .horz{display:block}
table.controller .l6-last .control .line.level6 .horz{display:block;width:10px;height:1px}
table.controller .l6-first .control .line.level6 .vert{bottom:0;position:absolute;width:1px;height:50%}
table.controller .l6-last .control .line.level6 .vert{width:1px;height:50%}
相关问题
最新问题