bootstrap table选项卡(Bootstrap-Table10分钟入门怎么学和用)(1)

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:"路径"。路径。

例如通过服务器路由到达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上传插件。

bootstrap table选项卡(Bootstrap-Table10分钟入门怎么学和用)(2)

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 '车号不能为空'; } } },

,