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上传插件。
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 '车号不能为空';
}
}
},
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved