当使用Angular JS中的拖放ui-tree时,表宽度正在缩小

时间:2016-07-16 04:56:52

标签: javascript html css angularjs

我正在尝试使用Angular JS ui tree为表创建拖放。

这是表格:

拖放工作正常,但我的桌子宽度正在缩小,拖动时高度正如图所示:

这是我的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>

我不知道我哪里错了。请帮我。 提前谢谢。

1 个答案:

答案 0 :(得分:1)

要获得预期结果,请在col宽度

中添加引号

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