欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap Table使用整理(一)

 更新時間:2017年06月09日 09:58:06   作者:天馬3798  
基于 Bootstrap 的 jQuery 表格插件,通過簡單的設(shè)置,就可以擁有強大的單選、多選、排序、分頁,以及編輯、導(dǎo)出、過濾(擴展)等等的功能

相關(guān)閱讀:

Bootstrap Table使用整理(二)  http://www.dbjr.com.cn/article/115791.htm

Bootstrap Table使用整理(三)  http://www.dbjr.com.cn/article/115795.htm

Bootstrap Table使用整理(四)之工具欄 http://www.dbjr.com.cn/article/115798.htm

Bootstrap Table使用整理(五)之分頁組合查詢 http://www.dbjr.com.cn/article/115785.htm

一、Bootstrap Table相關(guān)整理

基于 Bootstrap 的 jQuery 表格插件,通過簡單的設(shè)置,就可以擁有強大的單選、多選、排序、分頁,以及編輯、導(dǎo)出、過濾(擴展)等等的功能。

1.官網(wǎng)地址:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/    Git源代碼地址:https://github.com/wenzhixin/bootstrap-table

基礎(chǔ)簡介:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

使用示例:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/

API文檔:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

Bootstrap Table的有點使用簡單,美觀整潔,支持CardView等特點

二、簡單使用實例

基礎(chǔ)引用

<link href="~/lib/bootstrap-table/dist/bootstrap-table.css" rel="external nofollow" rel="stylesheet" /> 
<script src="~/lib/bootstrap-table/dist/bootstrap-table.js"></script> 
<script src="~/lib/bootstrap-table/src/locale/bootstrap-table-zh-CN.js"></script> 

1.data-toggle="table"  無需JavaScript啟用bootstrap table

<p>通過Data屬性的方式,無需編寫JavaScript啟用bootstrap table, 設(shè)置 data-toggle="table" 即可</p> 
<div class="alert alert-danger"> 
 <p>1.這種方式不太常用,因為分頁不方便</p> 
</div> 
<table data-toggle="table"> 
 <thead> 
  <tr> 
   <th>Item ID</th> 
   <th>Item Name</th> 
   <th>Item Price</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>Item 1</td> 
   <td>$1</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>Item 2</td> 
   <td>$2</td> 
  </tr> 
 </tbody> 
</table> 

2.使用data-url指定遠(yuǎn)程數(shù)據(jù),特別說明,在使用遠(yuǎn)程數(shù)據(jù)的時候,在ajax請求期間,表格內(nèi)容顯示加載中...,

<p>可以通過設(shè)置遠(yuǎn)程url 如:data-url="data1.json" ,自動加載遠(yuǎn)程數(shù)據(jù)</p> 
<div class="alert alert-danger"> 
 <p>1.這種方式對于分頁不太方便</p> 
 <p>2.BootstrapTable 對于字段中為空,自動替換成'-'</p> 
</div> 
<table data-toggle="table" data-url="@Url.Action("GetStudent","DataOne")"> 
 <thead> 
  <tr> 
   <th data-field="sno">編號</th> 
   <th data-field="sname">姓名</th> 
   <th data-field="ssex">性別</th> 
   <th data-field="sbirthday">生日</th> 
   <th data-field="class">課程編號</th> 
  </tr> 
 </thead> 
</table> 

3.data-classes 屬性指定表格的樣式,

特別說明:表頭和屬性的指定方式有兩種,一種DOM中定義,一種在Js的參數(shù)中定義

<table id="table1" 
  data-classes="table table-hover table-condensed"></table> 
[javascript] view plain copy print?
//data-classes 可以設(shè)置樣式 
/* 
* table-condensed 設(shè)置內(nèi)容框濃縮 
*/ 
$('#table1').bootstrapTable({ 
 columns: [ 
  { field: 'sno', title: '學(xué)生編號' }, 
  { field: 'sname', title: '學(xué)生姓名' }, 
  { field: 'ssex', title: '性別' }, 
  { field: 'sbirthday', title: '生日' }, 
  { field: 'class', title: '課程編號' }, 
 ], 
 url:'@Url.Action("GetStudent","DataOne")' 
}); 

table-condensed 表格緊湊樣式顯示如下:

以上所述是小編給大家介紹的Bootstrap Table使用整理(一),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Javascript公共腳本庫系列(一): 彈出層腳本

    Javascript公共腳本庫系列(一): 彈出層腳本

    本篇文章講解彈出浮動層的javascript函數(shù), 以及函數(shù)的原理和使用注意事項.
    2011-02-02
  • JS實現(xiàn)的簡潔二級導(dǎo)航菜單雛形效果

    JS實現(xiàn)的簡潔二級導(dǎo)航菜單雛形效果

    這篇文章主要介紹了JS實現(xiàn)的簡潔二級導(dǎo)航菜單雛形效果,通過簡單的JavaScript響應(yīng)鼠標(biāo)事件遍歷頁面元素實現(xiàn)二級導(dǎo)航菜單切換的效果,非常簡單實用,需要的朋友可以參考下
    2015-10-10
  • JavaScript實現(xiàn)簡易加法計算器

    JavaScript實現(xiàn)簡易加法計算器

    這篇文章主要介紹了JavaScript實現(xiàn)簡易加法計算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-03-03
  • NodeJS Express框架中處理404頁面一個方式

    NodeJS Express框架中處理404頁面一個方式

    這篇文章主要介紹了NodeJS Express框架中處理404頁面一個方式,原理就是把404路由放在最后匹配,也就是路由中沒有定義的全部轉(zhuǎn)到404頁面,需要的朋友可以參考下
    2014-05-05
  • 使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解

    使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解

    這篇文章主要介紹了使用純前端JavaScript實現(xiàn)Excel導(dǎo)入導(dǎo)出方法過程詳解,文章通過示例代碼和圖文解析介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08
  • 微信中一些常用的js方法匯總

    微信中一些常用的js方法匯總

    本文給大家匯總了一下在我們?nèi)粘i_發(fā)微信項目的過程中,經(jīng)常需要用到的一些js方法,都是些使用頻率很高,而且非常簡單的方法,這里推薦給大家。
    2015-03-03
  • JS實現(xiàn)鍵值對遍歷json數(shù)組功能示例

    JS實現(xiàn)鍵值對遍歷json數(shù)組功能示例

    這篇文章主要介紹了JS實現(xiàn)鍵值對遍歷json數(shù)組功能,結(jié)合實例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下
    2018-05-05
  • JavaScript可迭代對象詳細(xì)介紹

    JavaScript可迭代對象詳細(xì)介紹

    ES6中引入了迭代器與可迭代對象的概念,并且提供了對可迭代對象的相關(guān)支持,如for...of循環(huán),Map(iterable)構(gòu)造器,展開語法...等。讓我們對數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡化
    2022-06-06
  • JS解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題

    JS解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題

    下面小編就為大家?guī)硪黄狫S解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 基于javascript實現(xiàn)最簡單的選項卡切換效果

    基于javascript實現(xiàn)最簡單的選項卡切換效果

    這篇文章主要介紹了基于javascript實現(xiàn)最簡單的選項卡切換效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-05-05

最新評論