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