这是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">×</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>
答案 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;
}