使最后一行无法排序

时间:2016-09-04 13:42:47

标签: javascript jquery angularjs jquery-ui

我的角度项目中有可排序的表行,但排序行也包含query-ui代码元素,现在我不想使最后一行无法排序。

HTML

public class PagingOptions {

  private int mPage;

  private int mLimit;

  public PagingOptions(int page, int limit)
  {
    mPage = page;
    mLimit = limit;
  }

  public int getPage() {
    return mPage;
  }

  public void setPage(int mPage) {
    this.mPage = mPage;
  }

  public int getLimit() {
    return mLimit;
  }

  public void setLimit(int mLimit) {
    this.mLimit = mLimit;
  }
} 

控制器

<div ng:controller="controller">
    <table style="width:auto;" class="table table-bordered">
        <thead>
            <tr>
                <th>Index</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody ui:sortable ng:model="list">
            <tr ng:repeat="item in list" class="item" style="cursor: move;">
                <td>{{$index}}</td>
                <td>{{item}}</td>
            </tr>
            <tr>
                <td>Non Sortable</td>
                <td>Non Sortable</td>
            </tr>
        </tbody>{{list}}
        <hr>
</div>

这是工作JsFiddle:http://jsfiddle.net/valor_/fc7oftkn/

那么如何使最后一行不可排序?如果您需要任何其他信息,请告诉我,我会提供。提前谢谢

1 个答案:

答案 0 :(得分:1)

只需将它们移至<tfoot>,如下所示。

<table style="width:auto;" class="table table-bordered">
  <thead>
    <tr>
      <th>Index</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody ui:sortable ng:model="list">
    <tr ng:repeat="item in list" class="item" style="cursor: move;">
      <td>{{$index}}</td>
      <td>{{item}}</td>
    </tr>

  </tbody>{{list}}
  <tfoot>
    <tr>
      <td>Non Sortable</td>
      <td>Non Sortable</td>
    </tr>
  </tfoot>
</table>