表格

作者: 有你相伴一生 | 来源:发表于2018-11-13 08:59 被阅读0次
    $(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; 
    }; 
    

    相关文章

      网友评论

          本文标题:表格

          本文链接:https://www.haomeiwen.com/subject/gyhkfqtx.html