bootstrap框架学习

一、表格 

$(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;  };