关于bootstrap table 在页面进行假数据增删改，不通过后台数据库操作

最新推荐文章于 2022-04-20 22:30:53 发布

原创最新推荐文章于 2022-04-20 22:30:53 发布 · 1.1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #bootstrap #html #web

java 同时被 3 个专栏收录

17 篇文章

订阅专栏

14 篇文章

订阅专栏

web

6 篇文章

订阅专栏

前端页面

<html>

<head>

</head>

<body>

</body>

</html>

js块

$(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(){
               $('#tb_assets').bootstrapTable({
                   //url: '../../assets/get', //请求后台的URL（*）
                   //method : 'get', //请求方式（*）
                   toolbar : '#toolbar', //工具按钮用哪个容器
                   showFooter: true, //表格脚部，用来计算统计总和
                   classes: "table-no-bordered", //表格无边框
                   striped : true, //是否显示行间隔色
                   cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                   pagination : true, //是否显示分页（*）
                   sortable : false, //是否启用排序
                   sortOrder : "asc", //排序方式
                   queryParams : oTableInit.queryParams,//传递参数（*）
                   sidePagination : "client", //分页方式：client客户端分页，server服务端分页（*）
                   pageNumber : 1, //初始化加载第一页，默认第一页
                   pageSize : 10, //每页的记录行数（*）
                   pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
                   search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                   strictSearch : true,
                   showColumns : false, //是否显示所有的列
                   showRefresh : false, //是否显示刷新按钮
                   minimumCountColumns : 2, //最少允许的列数
                   clickToSelect : true, //是否启用点击选中行
                   height : 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                   uniqueId : "ID", //每一行的唯一标识，一般为主键列
                   showToggle : false, //是否显示详细视图和列表视图的切换按钮
                   cardView : false, //是否显示详细视图
                   detailView : false, //是否显示父子表
                   columns : [ {
                       checkbox : true,
                   }, {
                       field : 'ID',
                       title : 'id',
                       visible : true
                   }, {
                       field : 'assetsType',
                       title : '类型',
                       align: 'center',
                        valign: 'middle',
                        footerFormatter : function(){
                           return 'total'
                        }
                   }, {
                       field : 'assetsAmt',
                       title : '价值',
                       align: 'center',
                        valign: 'middle'
                   }, {
                       field : 'coefficient',
                       title : '系数',
                       align: 'center',
                        valign: 'middle'
                   }, {
                       field : 'valueAmt',
                       title : '最终价值',
                       align: 'center',
                        valign: 'middle',
                        footerFormatter : function(data){   //返回认定该列的总和
                           field = this.field;
                                return data.reduce(function(sum, row) {
                                    return sum + (+row[field]);
                                }, 0);
                        }
                        }]
               /*,此处是给表格初始一个数据，是假数据，新增后不再存在
                   data:[{
                       assetsType:"活期存款",
                       assetsAmt:"9000",
                       coefficient:"90",
                       valueAmt:"8100",
                   }]*/
               });
           };

           //得到查询的参数
           oTableInit.queryParams = function(params) {
               var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                   limit : params.limit, //页面大小
                   offset : params.offset, //页码
                   departmentname : $("#txt_search_departmentname").val(),
                   statu : $("#txt_search_statu").val()
               };
               return temp;
           };
           return oTableInit;
       };

       var ButtonInit = function() {
           var oInit = new Object();
           var postdata = {};

           oInit.Init = function() {
               //初始化页面上面的按钮事件
           };

           return oInit;
       };