diff options
author | 2017-08-07 11:39:39 +0800 | |
---|---|---|
committer | 2017-08-07 11:39:39 +0800 | |
commit | 21d72c4a80fe2937d0c4ddd20624b27adbcd989b (patch) | |
tree | e5013ee12f74f8452e01cbff16e7b0158bc456cb /common/src/main/webapp/usageguide/browser/templates/table.html | |
parent | f533e73e2ae32e010b16abdcf7985abaf31ab843 (diff) |
Upload the ESR GUI seed code
Issue-ID: AAI-68
Change-Id: Ia50ce0570c2fabecd77199d4e8454f56fe587c4e
Signed-off-by: lizi00164331 <li.zi30@zte.com.cn>
Diffstat (limited to 'common/src/main/webapp/usageguide/browser/templates/table.html')
-rw-r--r-- | common/src/main/webapp/usageguide/browser/templates/table.html | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/common/src/main/webapp/usageguide/browser/templates/table.html b/common/src/main/webapp/usageguide/browser/templates/table.html new file mode 100644 index 0000000..3daa2a5 --- /dev/null +++ b/common/src/main/webapp/usageguide/browser/templates/table.html @@ -0,0 +1,90 @@ +<!--
+
+ Copyright 2016-2017, Huawei Technologies Co., Ltd.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+
+<div class="container col-sm-12 col-md-12 col-lg-12">
+ <h4>{{message}}</h4>
+
+ <div id="tableArea" class="container col-sm-12 col-md-12 col-lg-12" ng-init="init()">
+
+ <h3 class="col-sm-12 col-md-12 col-lg-12">Basic Table<span> (with hover)</span></h3>
+ <div id="basictableArea" class="col-sm-12 col-md-12 col-lg-12"></div>
+
+ <h3 class="col-sm-12 col-md-12 col-lg-12">Stripped Table<span> (Condensed & with border)</span></h3>
+ <div id="strippedtableArea" class="col-sm-12 col-md-12 col-lg-12"></div>
+
+ <h3 class="col-sm-12 col-md-12 col-lg-12">Search Table</h3>
+ <div id="condensedtableArea" class="col-sm-12 col-md-12 col-lg-12">
+ <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+ <tr ng-repeat="siteData in $data">
+ <td title="'Country'" filter="{ countryName: 'text'}" sortable="'countryName'">
+ {{siteData.countryName}}
+ </td>
+ <td title="'Language'" filter="{ type: 'text'}" sortable="'type'">
+ {{siteData.language}}
+ </td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ <div class="col-sm-12 col-md-12 col-lg-12 shortnote">
+ <div class="shortnoteHeader">Usage</div>
+ <div class="shortnoteText">Create a div tag in html file with specific id for example basictableArea,strippedtableArea,condensedtableArea and write a specific function in javascript file to perform your business logic. An sample example as shown below:</div>
+ <br>
+ <div>HTML file:</div>
+ <pre><code><div id="basictableArea"></div></code></pre>
+ <pre><code><div id="strippedtableArea"></div></code></pre>
+ <pre><code><div id="condensedtableArea"></div>
+ <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">
+ <tr ng-repeat="siteData in $data">
+ <td title="'Country'" filter="{ countryName: 'text'}" sortable="'countryName'">{ {siteData.countryName} }</td>
+ <td title="'Language'" filter="{ type: 'text'}" sortable="'type'">{ {siteData.language} }</td>
+ </tr>
+ </table></code></pre>
+ <br>
+ <div>Javascript file:</div>
+ <pre><code>
+
+ var data ={"basic_table_data": {"itemHeader": ["First Name", "Last Name", "Age"],"rowitem": [{"values": ["A", "B","1"]},{"values": ["C", "D", "2"]},{"values": ["E", "F", "3"]}],"striped": false,"border": false,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""},
+ "str_table_data": {"itemHeader": ["First Name","Last Name","Age"],"rowitem": [{"values": ["A","B","1"]},{"values": ["C","D","2"]},{"values": ["E","F","3"]}],"striped": true,"border": true,"hover": false,"condensed": true,"filter": false,"action": "","searchField": ""},"cond_table_data": [{
+ "countryName": "China","language": "Mandrain"},{"countryName": "India","language": "English"},{"countryName": "USA","language": "English"}]};
+
+
+ $scope.init = function() {
+ loadTableData();
+ }
+
+ function loadTableData() {
+
+ var table_tpl = $(modelTemplate).filter('#table').html();
+
+ var html = Mustache.to_html(table_tpl, data.basic_table_data);
+ $('#basictableArea').html(html);
+
+ var html = Mustache.to_html(table_tpl,data.str_table_data);
+ $('#strippedtableArea').html(html);
+
+ $scope.tableParams = new NgTableParams({
+ count: 5, sorting: {language: 'asc'}
+ }, {counts: [5, 10, 20, 50], dataset: data.cond_table_data});
+ }</code></pre>
+
+
+
+ </div>
+ </div>
+</div>
|