表格

作者: 有你相伴一生 | 来源:发表于2018-11-13 08:59 被阅读0次
  1. html5表格标签
  2. 表格
  3. 2019-01-09第三天
  4. 2015年11月5日
  5. 2018-11-28
  6. 第5单元 个性月历
  7. 零基础Web前端开发(5)
  8. html基础
  9. HTML基础
  10. 2-12. 表格标签中的其他标签
  11. $(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; 
    }; 
    

    相关文章

    表格 格式: 表格标签: ————定义表格 ———— 定义表格标题。 ———— 定义表格的表头。 ———— ...

  12. 表格

    基本表格 带边框表格 鼠标悬停表格 条纹状表格 紧缩型表格 ...

  13. 2019-01-09第三天

    表格 有表格线 没有表格线? 水平表格和垂直表格如何设计出来的?

  14. 2015年11月5日

    表格标签:table 表格thead 表格头tbody 表格主体tfoot 表格尾tr 表格行th 元素定义表头t...

  15. 2018-11-28

    表格 表格 长表格 表格的布局 完善clearfix 表单 模拟后台服务器 表格

  16. 第5单元 个性月历

    创建表格 输入表格 调整与修必表格 美化表格

  17. 零基础Web前端开发(5)

    HTML表格概述 表格的基本结构 表格的基本标签有标签 (表格), 标签(表格行), 标签(表格单元格)。 标签和...

  18. html基础

    HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...

  19. HTML基础

    HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...

  20. 2-12. 表格标签中的其他标签

    | | 定义表格 || | 定义表格标题。 || | 定义表格的表头。 || | 定义表格的行。 ...

  21. 网友评论

        本文标题:表格

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