http://www.tivilog.com

                                                                  【大发奔驰宝马注册】Bootstrap table使用方法汇总-Bootstrap教程

                                                                    bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件。而bootstrap是来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,具有简便灵活,快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。

                                                                  推荐教程:Bootstrap图文教程

                                                                    首先交代一下,jquery ,bootstrap ,bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖jquery的,而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的,所以在使用bootstrap-table之前必须引用 jquery 和bootstrap的相关js,css文件。

                                                                    接着说,bootstrap-table的特点:与jquery-ui,jqgrid等表格显示插件而言,bootstrap-table扁平化,轻量级,对于一些轻量级的数据显示,他是绰绰有余,而对父子表等的支持也很好,最主要的是可以与bootstrap的其他标签无缝组合。

                                                                  1、引入js、css

                                                                  <!--css样式--><link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"><link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"><!--js--><script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script><script src="js/bootstrap/bootstrap.min.js"></script><script src="js/bootstrap/bootstrap-table.js"></script><script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

                                                                  2、table数据填充

                                                                    bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据

                                                                  <table data-toggle="table"> <thead> ... </thead></table> ...$('#table').bootstrapTable({ url: 'data.json' });

                                                                    第二种方式较第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。

                                                                  $(function () {  //1.初始化Table var oTable = new TableInit(); oTable.Init();  //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */  });   var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //请求后台的URL(*) method: 'post',  //请求方式(*) toolbar: '#toolbar', //工具按钮,用哪个容器 striped: true,  //是否显示行间隔色 cache: false,  //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true,  //是否显示分页(*) sortable: false,  //是否启用排序 sortOrder: "asc",  //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageNumber:1,  //初始化加载第一页,默认第一页 pageSize: 50,  //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供]选择的每页的行数(*) strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460,  //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "id",  //每一行的唯一标识,一般为主键列 cardView: false,  //是否显示详细视图 detailView: false,  //是否显示父子表 columns: [{  field: 'id',  title: '序号' }, {  field: 'liushuiid',  title: '交易编号' }, {  f)ield: 'orderid',  title: '订单号' }, {  field: 'receivetime',  title: '交易时间' }, {  field: 'price',  title: '金额' }, {  field: 'coin_credit',  title: '投入硬币' }, {  field: 'bill_credit',  title: '投入纸币' }, {  field: 'changes',  title: '找零' }, {  field: 'tradetype',  title: '交易类型' },{  field: 'goodmachineid',  title: '货机号' },{  field: 'inneridname',  title: '货道号' },{  field: 'goodsName',  title: '商品名称' }, {  field: 'changestatus',  title: '支付' },{  field: 'sendstatus',  title: '出货' },] }); };  //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 sdate: $("#stratTime").val(), edate: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return oTableInit; };
                                                                                  

                                                                  郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:研究人员发明机器人镜头,未来可用人眼控制
                                                                  下一篇:没有了