我正在使用angular smart-table,我想将一个选定的行传递给bootstrap模式中的声明表

时间:2015-11-02 15:25:01

标签: angularjs

这是SPA上的智能表,大多数其他功能都运行正常。选择行将改变样式,但不会将监视放在行上以进行进一步操作。我还在一个唯一的标识符上使用了一个轨道,但似乎没有任何东西可以用于逻辑上非常简单的东西

    ...
    private RequestQueue rq;   // rq = null (NullPointerException if you use)
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ...
        rq = Volley.newRequestQueue(YourActivity.this);  // rq != null
    }
    ...
    rq.add(request);

这是Bootstrap Modal。它从原始智能表迭代,但它将根据用户如何过滤数据显示所有当前记录

<table st-table="smertAccountTabe" st-pipe="callServer" st-safe-src="Account" class="table table-bordered table-striped select-table" data-click-to-select=" true" 2px outset #ddd;>
<thead>
   <tr>
      <th colspan="3"><input st-search="" class="form-control" placeholder="Global Search" type="text" /></th>
      <th>
         <button type="button" style="width:140px; height:50px" class="btn-info btn-sm" data-toggle="modal" data-target="#myModal1">
         Show Selected Records
         </button>                                     
      </th>
      <th>
         <button type="button" style="width:140px; height:50px; background-color:#337ab7 !important; color: #fefefe!important;"
            class=" btn-sm" ng-click="isAllSelected">
         Selected All Records
         </button>
      </th>
      <th colspan="6">
         Display 
         <select  ng-model="viewby" ng-change="setItemsPerPage(viewby)">
            <option>1</option>
            <option>5</option>
            <option>7</option>
            <option>10</option>
            <option>20</option>
            <option>30</option>
            <option>40</option>
            <option>50</option>
            <option>100</option>
            <option>500</option>
         </select>
         records at a time.
      </th>
   </tr>
</thead>
<tbody>
   <tr>
      <td style="background-color:#337ab7 !important; color: #fefefe!important;">Code</td>
      <td style="background-color:#337ab7 !important; color: #fefefe!important;">Account Name</td>
      <td style="background-color:#337ab7 !important; color: #fefefe!important;">Address</td>
      <td style="background-color:#337ab7 !important; color: #fefefe!important;">City</td>
      <td style="background-color: #337ab7 !important; color: #fefefe!important;">State</td>
      <td style="background-color:#337ab7 !important; color: #fefefe!important;">Zip</td>
      <td style="background-color: #337ab7!important; color: #fefefe!important;">SH</td>
      <td style="background-color: #337ab7 !important; color: #fefefe!important;">CO</td>
      <td style="background-color:#337ab7 !important; color: #fefefe!important;">BT</td>
      <td style="background-color: #337ab7 !important; color: #fefefe!important;">Created</td>
      <td style="background-color: #337ab7 !important; color: #fefefe!important;">Rates</td>
   </tr>
   <tr ng-cloak ng-click="isSelected = !isSelected;"  ng-class="{'rowIsSelected':isSelected}"
      ng-repeat="a in smertAccountTabe track by a.loc_code" ng-show="!acc.isloading">
      <td>{{a.loc_code}}</td>
      <td>{{a.name}}</td>
      <td>{{a.address1}}</td>
      <td>{{a.city}}</td>
      <td>{{a.state_code}}</td>
      <td>{{a.zip}}</td>
      <td>{{a.type_shipper}}</td>
      <td>{{a.type_consignee}}</td>
      <td>{{a.type_billto}}</td>
      <td>{{a.create_date}}</td>
      <td>{{a.rates_tickler}}</td>
   </tr>
</tbody>

如果选择了行,她就是切换行的CSS

<!-- Modal -->
@*This is pop up widow when the "Show Selected Records" is fired*@
<div class="modal fade" id="myModal1" role="dialog" draggable="">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width:1000px">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h3 align="center" class="modal-title">Added Records for New Group</h3>
      <label>Name of New Group:</label>
      <input type="text" class="form-control" id="newGroupName">
   </div>
   <div class="modal-body">
      <p>Some text in the modal.</p>
      <table st-table="selectedRecordsTabe" st-safe-src="Account" class="table table-bordered table-striped">
         <thead>
            <tr>
               <th style="background-color:#337ab7 !important; color: #fefefe!important;">Code</th>
               <th style="background-color:#337ab7 !important; color: #fefefe!important;">Account Name</th>
               <th style="background-color:#337ab7 !important; color: #fefefe!important;">Address</th>
               <th style="background-color:#337ab7 !important; color: #fefefe!important;">City</th>
               <th style="background-color: #337ab7 !important; color: #fefefe!important;">State</th>
               <th style="background-color:#337ab7 !important; color: #fefefe!important;">Zip</th>
               <th style="background-color: #337ab7!important; color: #fefefe!important;">SH</th>
               <th style="background-color: #337ab7 !important; color: #fefefe!important;">CO</th>
               <th style="background-color:#337ab7 !important; color: #fefefe!important;">BT</th>
               <th style="background-color: #337ab7 !important; color: #fefefe!important;">Created</th>
               <th style="background-color: #337ab7 !important; color: #fefefe!important;">Rates</th>
            </tr>
         </thead>
         <tbody>
            <tr ng-if="rowIsSelected ==true " ng-cloak ng-repeat="b in smertAccountTabe">
               <td>{{b.loc_code}}</td>
               <td>{{b.name}}</td>
               <td>{{b.address1}}</td>
               <td>{{b.city}}</td>
               <td>{{b.state_code}}</td>
               <td>{{b.zip}}</td>
               <td>{{b.type_shipper}}</td>
               <td>{{b.type_consignee}}</td>
               <td>{{b.type_billto}}</td>
               <td>{{b.create_date}}</td>
               <td>{{b.rates_tickler}}</td>
            </tr>
         </tbody>
      </table>
   </div>
   <div class="modal-footer">
      <button align="left" type="button" style="width:140px; height:40px;" class="btn-success">
      <span class="glyphicon glyphicon-plus"></span>Create Group
      </button>
      <button type="button" style="width:120px; height:40px;" class="btn-warning" data-dismiss="modal">Close</button>
   </div>
</div>

1 个答案:

答案 0 :(得分:0)

这是索引页面上获取数据的原始表的ng-repeat 来自Ajax调用

<tr ng-cloak st-select-row="a" st-select-mode="multiple" ng-click="selecRowAndEnable()"
ng-repeat=" a in smartAccountTable"> 

这是bootstrap模式中的ng-repeat,用于过滤选定的行。 &#34;帐户&#34;是st-safe-src

<tr ng-repeat="a in Account" ng-if="a.isSelected">

这是用于条纹表更改样式的CSS类 选定的行。

.st-selected:nth-child(odd)>td,
.st-selected:nth-child(even)>td {
background-color: #001A67 !important;
color: #fefefe!important;
}