Bootstrap-Table文檔

接上一篇。上回簡單介紹了BootstrapTable的常用函數，這回主要介紹屬性設置。

<link href="*.CSS"><!--CSS 引用bootstrap.min.css和bootstrap-table.min.css--> <script src="*.js"><!--JS包引用， jquery.min.js，bootstrap.min.js，bootstrap-table.min.js--> <table id="ID"></table> <!--HTML代碼--> $("#ID").bootstrapTable({鍵:值,鍵:值,鍵:值,鍵:值……}）//bootstrapTable函數

以上簡寫成“骨架”。分三步用，

1.引用，

注意點：js的引用順序，js包裡面可以理解為從上到下的程序集，BootstrapTable以Jquery為基礎的，所以一定以Jquery引用為先，接着是bootsrtap.js,最後是Bootstrap-Table.js。

2.HTML标簽

注意點：一般寫在Table标簽裡，數據放到哪個Table呢，這裡用的Jquery獲取DOM id為ID的對象。當然也可以使用類選擇器，最好是唯一，建議用id選擇器标識。

3.使用函數

這裡舉例的是其中一個最最常用的bootstrapTable({...})，以Ajax形式取數據的函數。

屬性Url:"路徑"。路徑。

• 可以是本地JSON文件，
• 可以是預定義的JSON數據，
• 也可以是路由到後端（後台）取數據的方法，

例如通過服務器路由到達MVC中的Controller裡的GetData(string id)

屬性queryParams，可選參數，如剛才所說GetData方法中的id

queryParams：function(){return id:"123"}//這裡是一個function

也可以直接寫{id:"123"}

屬性columns:定是各列數據。是JSON格式[{},{},{}……]

定義每一列以這樣的形式{鍵:值}，

常用的有：

{field:"後台返回JSON數據或對象的屬性名",

title:"顯示在表格上的列名",

}

以上定義列中還會有一些可選屬性formatter、editable，如editable需要另外引入相應的js文件。

Bootstrap-table的入門分享到這裡，認為遠遠不止這些，動手才是入門的正式開始，一起加油吧！

建議看看文檔例子。

謝謝閱讀。下回繼續分享Bootstrap File Input上傳插件。

fileinput上傳插件

舉例工作中開發物流分車程序的代碼，代碼定義兩列“序号”、"車号"

{ width: 30, field: '序号', title: '序号', formatter: function (value, row, index) { return index 1; } }, { width: 50, field: "TruckNo", title: "車号", editable: { type: 'text', title: '新車号', validate: function (v) { if (!v) return '車号不能為空'; } } },

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!