专业编程基础技术教程

网站首页 > 基础教程 正文

Bootstrap-Table10分钟入门,怎么学和用?(二)

ccvgpt 2024-07-21 17:35:12 基础教程 7 ℃



Bootstrap-Table10分钟入门,怎么学和用?(二)


接上一篇。上回简单介绍了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上传插件。



举例工作中开发物流分车程序的代码,代码定义两列“序号”、"车号"


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

          }

                    }

                },

Tags:

最近发表
标签列表