bootstrap框架学习

使用Bootstrap Table实现任务列表
本文介绍如何利用Bootstrap Table插件构建一个动态的任务列表界面,包括分页、排序及响应式设计等功能,并通过实例展示了如何配置参数以实现特定需求。
一、表格 
$(function(){ 

/*$.ajaxSetup({ 
  async: false 
    });
*/ 

//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_data').bootstrapTable({ 
  url:
 '/publish/getProjectList',            //请求后台的URL(*) 
  method: 'get',//请求方式(*) 
  dataType: 'json',                           
  toolbar:
 '#toolbar',                       //工具按钮用哪个容器 
  striped:false,                            //是否显示行间隔色 
  cache:false,                              //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) 
  pagination:true,                          //是否显示分页(*) 
  showPaginationSwitch:false,               //是否显示分页数 
  sortable:false,                           //是否启用排序 
  sortOrder: "asc",//排序方式 
  queryParams: oTableInit.queryParams,//传递参数(*) 
  queryParamsType: '',//如果要在oTableInit.queryParams方法获取pageNumber和pageSize的值,需要将此值设置为空字符串(*) 
  sidePagination: 'server',//分页方式:client客户端分页,server服务端分页(*) 
  pageNumber: 1,//初始化加载第一页,默认第一页 
  pageSize: 10,//每页的记录行数(*) 
  pageList: [10, 20, 30],//可供选择的每页的行数(*) 
  search:false,                             //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 
  strictSearch:true,                        
  showColumns:
true,                         //是否显示所有的列 
  showRefresh:true,                         //是否显示刷新按钮 

  minimumCountColumns: 2,//最少允许的列数 

 clickToSelect:true,                       //是否启用点击选中行 
  singleSelect:true
  height: $(window).height()
-140,            //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 
  uniqueId: "ID",//每一行的唯一标识,一般为主键列 
  showToggle:true,                          //是否显示详细视图和列表视图的切换按钮 
  cardView:false,                           //是否显示详细视图 
  detailView:false,                         //是否显示父子表 
  paginationPreText: "上一页"
  paginationNextText:
 "下一页"
  columns: [{ 
  checkbox:
true 
  }, { 
  field:
 'index'
  width:
 35
  formatter :
function(value, row, index) { 
// 在源代码中加入getPage方法 
var page = $('#tb_data').bootstrapTable("getPage"); 
return page.pageSize * (page.pageNumber - 1) + index + 1
                } 
  }, { 
  field:
 'id'
  title:
 '任务ID'
  align:
 'center' 
  }, { 
  field:
 'description'
  title:
 '描述'
  align:
 'center' 
  }, { 
  field:
 'statusName'
  title:
 '状态'
  align:
 'center' 
  }, { 
  field:
 'releaseDate'
  title:
 '发布时间'
  align:
 'center' 
  }, { 
  field:
 'gmtCreate'
  title:
 '创建时间'
  align:
 'center' 
  }, { 
  field:
 'creatorCn'
  title:
 '创建人'
  align:
 'center' 
  }, { 
  field:
 'releaseTime'
// title: '发布日期', 
  visible:false 
  }, { 
  field:
 'descriptionCheck'
// title: '描述类型', 
  visible:false 
            }], 
  onDblClickRow:
function(row, $element){ 
var url = '/publish/intoProjectInfoPage?projectId='+row.id; 
  window.open(url); 
            }, 
  onClickRow:
function(row, $element, field){ 
if(row.statusName!='待审核' && row.statusName!='准备提测'){ 
                    $(
'#deleteBtn').prop("disabled", true); 
                }
else
                    $(
'#deleteBtn').prop("disabled", false);  
                }              }          });      }; 
//得到查询的参数 
  oTableInit.queryParams =function(params) { 
//特别说明: 
 //如果queryParamsType=limit,params包含{limit, offset, search, sort, order} 
//如果queryParamsType!=limit,params包含{pageSize, pageNumber, searchText, sortName, sortOrder} 

var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 
  pageSize: params.pageSize,//页面大小 
  pageNumber: params.pageNumber//页码 
        };  return temp;      }; 
return oTableInit; 
}; 

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

  oInit.Init
 = function () { 

//初始化页面上面的按钮事件 
  $('#saveProjectBtn').click(function(){ 

        }); 

     $(
'#addBtn').click(function(){ 

     }); 

// 编辑任务按钮点击事件 
  $('#editBtn').click(function(){ 

    }); 

// 删除任务按钮点击事件 
  $('#deleteBtn').click(function(){ 
var arr = $('#tb_data').bootstrapTable('getSelections'); 
if(arr.length>0){ 
  confirmMessage(
'确定删除此任务吗?', deleteTask); 
         }
else
  alertMessage(
"请选择一条数据");  
         }      });  

 };
return oInit;  };  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值