2017-10-19 5 views
-1

私は組織のリストを含むテーブルを持っています - Tabelizerプラグインを使用することで、レベルに基づいてテーブルを折りたたむことができます - 私の4番目のレベルに折りたたみ可能なイメージが含まれていないことを除けば...誰もこれの前にこれを使っていて、なぜこれをやっているのか考えていますか?このプラグインへTabelizerプラグインがレベル4で折りたたみ可能な画像を表示していない - MVCを使用

リンク:ここhttp://www.jqueryscript.net/table/jQuery-Plugin-To-Create-Multilevel-Collapsible-Table-Rows-Tabelizer.html

がレベルで構成され、私のテーブルである:ここでは

enter image description here

は、(代わりにレベル0を使用してのレベルをダウンループ私のコードで、私は彼のレベルが0ではなく1から始まるように1を追加してください):

<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="[email protected](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

誰もが前にこのプラグインを使用し、および/または同じことを経験しましたか?私が提供するdidntのCSSクラスで、私は問題を考え出し、それは私が最後にそれが(後肢見通し、その非常に論理的で、今にもかかわらず)であることが予想場所にあった

答えて

0

...

(それは大きすぎると私はそれが重要ではないと思った...私は間違っていた) - 何らかの理由で私の第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%} 
関連する問題