2016-07-16 71 views
0

我正在尝试使用Angular JS ui树为表创建拖放操作。使用Angular JS拖放UI树时表格宽度会缩小

下面是表:

拖放工作正常,但我的表格宽度萎缩,同时拖动如图所示高度incresing:

这里是我的HTML代码:

<div style="width: 31%; float: left; margin-right: 12px;"> 

    <table data-ui-tree="treeOptions" id="tree-root" class="smallTable"> 
    <col width=10> 
     <col width=30> 
     <col width=100> 
      <col width=20> 
      <tr class="heading"> 
       <th colspan="4">Test</th> 

      </tr> 
      <tr class="columnsHeading"> 
       <th></th> 
       <th>Col1</th> 
       <th>Col2</th> 
       <th><span class="glyphicon glyphicon-plus-sign" ng-click="showNewtestRow()" style="color: #428bca; padding-left: 10px;"></span></th> 
      </tr> 
      <tbody ui-tree-nodes ng-model="tests"> 
       <tr ng-repeat="test in tests" ui-tree-node> 
       <td><span class="glyphicon glyphicon-resize-vertical" ui-tree-handle></span> </td> 
       <td calss="smallTableColumn1" data-ng-hide="test.isEditable">{{test.testId}}</td> 
       <td calss="smallTableColumn2" data-ng-hide="test.isEditable">{{test.testName}}</td> 
       <td><span class="glyphicon glyphicon-edit" ng-click="showEdittestRow(test)" data-ng-hide="test.isEditable" style="color: rgb(66, 139, 202);"></span> <span class="glyphicon glyphicon-trash" ng-click="showtestConfirm(test)" data-ng-hide="test.isEditable" 
        style="color: rgb(66, 139, 202);"></span> <span data-ng-show="test.isEditable" class="glyphicon glyphicon-floppy-save" ng-click="updatetest(test)" style="color: rgb(66, 139, 202);"></span> <span data-ng-show="test.isEditable" class="glyphicon glyphicon-remove-sign" 
        ng-click="cancelEdittestRow(test)" style="color: red;"></span></td> 
       </tr> 
      </tbody> 
    </table> 
</div> 

我不知道我出错的地方。请帮帮我。 在此先感谢。

+0

Shruthi,我看到山坳宽度语法错误,应该是山坳宽度=“10”,引号失踪。希望这对你有用:) –

+0

@Naga Sai A,我也一样。但它不工作。仍然是同样的问题。 –

+0

尝试添加用于表格的CSS作为表格{layout:fixed} –

回答

1

实现你预期的结果,添加引号山坳宽度

  <table data-ui-tree="treeOptions" id="tree-root" class="smallTable"> 
       <col width="10"> 
       <col width="30"> 
       <col width="100"> 
       <col width="20">