zoukankan      html  css  js  c++  java
  • TERSUS笔记114-表格分页操作

    学习视频

    1.基本操作

    general.less样式(fenyelan)

    @footer-height: 42px;
    @page-padding: 10px;
    @page-background: white;
    @page-header-background: black;
    @page-header-color: white;
    @page-header-font-size:16px;
    html,body,#tersus.content
    {
        height:100%;
        position:relative;
        overflow:hidden;
    }
    *:not(input)
    {
        .box-sizing(border-box);
    }
    
    //===============================================
    //更新时间:20210628
    //===============================================
    //底部版权技术栏
    .banquan{
        height:25px;
        text-align:center;
        position:absolute;
        bottom:1px;
        width:100%;
        >div{
            margin-top:3px;
        }
    }
    
    //底部分页
    .fenyelan{
        height:25px;
        text-align:center;
        position:absolute;
        bottom:25px;
        width:100%;
        background-color:#c8e5f1;
        border-bottom:1px solid #aaa;
        >div{
        display:inline-block;
        font-weight:bold;
        margin-top:-4px;
        }
        >div:nth-child(3){
        margin-right:15px;
        }
        >div:nth-child(4){
            cursor:pointer; //小手光标
            //鼠标划过样式定义
            &:hover{
                font-weight:600; //字体加粗
                color:darken(blue,5%); //字体颜色
                text-decoration:underline; //下划线
            }
        }
        >div:nth-child(5){
            margin-right:15px;
            margin-left:3px;
            cursor:pointer; //小手光标
            //鼠标划过样式定义
            &:hover{
                font-weight:600; //字体加粗
                color:darken(blue,5%); //字体颜色
                text-decoration:underline; //下划线
            }
        }
        >div:nth-child(7){
            >input{
            width:48px;
            height:10px;
            margin-top:7px;
            }
        }
        >div:nth-child(8){
            margin-right:15px;
        }    
    }
    
    //按钮栏样式(查询全部 增加用户 标题 删除用户)-标准
    .anniulan-neirongqu{
    //  1.整个按钮栏样式(查询全部 增加用户 标题 删除用户)
         height:35px;
         width:100%;
         border:1px solid #aaa;
         font-size:16px;
         font-weight:bold;
         background-color:#c8e5f1;
         //按钮栏中的div样式,平均分成3个。
        >div{
            width:33%;
            float:left;
        }
    //  2.左侧按钮组样式(第一个div)
        >div:nth-child(1){
            //第一个div中按钮
            >button{              //第一个div中按钮
                margin-top:-8px;
            }
            >input{               //第一个div中输入框
                margin-top:1px;
            }
        }
    //  3.中间标题字样式(第二个div)      
        >div:nth-child(2){
            font-size:18px;
            font-weight:bold;
            text-align:center;
            line-height:35px;
        }
    //  4.右侧按钮靠右(删除)
        >button{
            float:right;
            margin-top:1px;
        }
    }
    
    //引用软件例子中的弹窗最上面蓝色背景设置(直接在窗口html.style中设置无效)
    .dialog{
       background-color:#1e9fff;
       font-weight:bold;
       font-size:20px;
       padding-top:6px;
       padding-left:10px;
       border:1px solid #aaa;
    }
    
    //=================================================
    //以下样式类定义是专为框架设计添加的,CSS样式请参考以下资源,只供查询参考,不建议深度学习,需要定义对象时,直接搜索引擎中搜用什么标签即可,如“CSS 字符靠左显示”,按我们视频中的演示随用随学,学习20个左右常用的即可:
    // https://www.w3school.com.cn/css/index.asp
    // https://www.runoob.com/css/css-tutorial.html
    // https://www.runoob.com/css/css-tutorial.html
    // 颜色取色网站:https://www.webfx.com/web-design/color-picker/
    // 简单取色网站:https://flatuicolors.com/
    
    //系统页-左侧菜单栏的样式
    .caidanlan{
        width:150px;                       //宽度
        float:left;                        //靠左侧浮动显示
        overflow:auto;                     //内部显示内容超过宽度高度后,自动显示上下和左右滚动条
        background-color:#444;             //背景色
    }
    
    //系统页-左侧菜单栏-模块名称行样式
    .mokuaiming{
        height:40px;                  //高度
        background-color:#555;        //背景色
    //    border-bottom:1px solid #aaa; //下边框线,备注后不生效
        color:#f7f7f7;                //背景色
          >span{                      //下一级的"行内标签"对象(tag属性为span的对象)
          margin-top:10px;                     //外边距-距上距离
          font-size:15px;                      //字符大小
          margin-left:10px;                    //外边距-距左距离
          font-weight:bold;                    //字符粗体显示
          }
          >div:nth-child(2){          //下一级的第一个"块标签"对象(tag属性为div的对象)
          float:left;                          //靠左侧浮动显示
          margin: 11px 10px 0 15px;            //外边距-上右下左的距离
          font-size:16px;                      //内部文字字符大小
          }
          >div:last-child{           //下一级的最后一个"块标签"对象(tag属性为div的对象)
          float:right;                         //靠右侧浮动显示
          margin-right:10px;                   //外边距-距右距离
          margin-top:-15px;                    //外边距-距上距离
          }
    }
    
    //系统页-左侧菜单栏-模块名称行-鼠标划过时的样式
    .mokuaiming:hover{
        background-color:#1e9fff;          //背景色
        cursor:pointer;                    //鼠标样式(普通的鼠标箭头变为小手形状图标)
        color:#fff;                        //内部字符颜色
          >div:first-child{          //下一级的第一个"块标签"对象(tag属性为div的对象)
          background-color:#487eb0;            //背景色
          margin-right:1px;                    //外边距-距右距离
          width:8px;                           //宽度
          height:100%;                         //高度
          float:left;                          //靠左侧浮动显示
          }
          >div:nth-child(2){         //下一级的第二个"块标签"对象(tag属性为div的对象)
          float:left;                          //靠左侧浮动显示
          margin: 11px 10px 0 15px;            //外边距-上右下左的距离
          font-size:16px;                      //内部文字字符大小
          }
    }
    
    //系统页-左侧菜单栏-菜单名称行-显示样式
    .caidanming{
        height:40px;                       //高度
        background-color:#333;             //背景色
    //    border-bottom:1px solid #aaa;      //下边框线,备注后不生效
        color:#f7f7f7;                     //内部字符颜色
            &.active, &.in, &.out {        //显示时淡入淡出显示
                display: block;            //定义为一个块级元素,方便进一步定义其他样式
            }
            &.fade.in,                     //淡入显示的样式
            {
                .transition(0.2s linear opacity);   //渐变效果,时长为0.2秒,透明到不透明
                .opacity(0);                        //从完全透明开始变化
            }
            &.fade.in.end,           //淡入效果结束
            {
                .opacity(100);                      //完全不透明
            }
            >span{                   //下一级的"行内标签"对象(tag属性为span的对象)
            margin-top:10px;                        //外边距-距上距离
            font-size:15px;                         //字符大小
            font-weight:normal;                     //字符加粗显示
            margin-left:30px;                       //外边距-距左距离
            }
            >div{                    //下一级的"块标签"对象(tag属性为div的对象)
            float:left;                             //靠左侧浮动显示
            margin: 11px 10px 0 20px;               //外边距-上右下左的距离
            font-size:16px;                         //内部文字字符大小
            }
    }
    
    //系统页-左侧菜单栏-菜单名称行-鼠标划过时的样式
    .caidanming:hover{
        background-color:#1e9fff;        //背景色
        cursor:pointer;                  //鼠标样式(普通的鼠标箭头变为小手形状图标)
        color:#ffffff;                   //内部字符颜色
    }
    
    //系统页-左侧菜单栏-菜单名称行-选中后的样式
    .caidanxuanzhong{
        background-color:#1e9fff;        //背景色
        color:#fff;                      //内部字符颜色
    }
    
    //系统页-右侧页面区的样式
    .yemianqu{
        width:100%-150px;                //宽度
    //    float:left;                      //靠左侧浮动显示
        overflow:auto;                   //内部显示内容超过宽度高度后,自动显示上下和左右滚动条
    //    padding:5px;                     //内边距
    }
    
    //系统页-右侧页面区-内容页面的样式
    .neirongyemian{
        width:100%;                      //宽度
        height:100%;                     //高度
        overflow:auto;                   //内部显示内容超过宽度高度后,自动显示上下和左右滚动条
        background-color:#fff;           //背景色
            &.active, &.in {         //显示时淡入淡出显示
                display: block;                     //定义为一个块级元素,方便进一步定义其他样式
            }
            &.fade.in                //淡入显示的样式
            {
                .transition(0.8s linear opacity);   //渐变效果,时长为0.8秒,透明到不透明
                .opacity(0);                        //从完全透明开始变化
            }
            &.fade.in.end            //淡入效果结束
            {
                .opacity(100);                      //完全不透明
            }
    }
    
    //系统页-右页面区-内容页面-上部按钮栏(固定位置,下面内容不会跟着滚动)
    //上部按钮栏中分三块的样式
    //1.左侧显示块或按钮组
    //2.中间标题
    //3.右侧按钮或按钮组
    .anniulan{
    //  1.整个按钮栏样式(查询全部 增加用户 标题 删除用户)
         height:35px;
         width:100%;
         border-bottom:1px solid #aaa;
         font-size:16px;
         font-weight:bold;
         background-color:#c8e5f1;
         //按钮栏中的div样式,平均分成3个。
        >div{
            width:33%;
            float:left;
            }
    //  2.左侧按钮组样式(第一个div)
        >div:nth-child(1){
            //第一个div中按钮
            >button{
                margin-top:2px;
                }
            }
    //  3.中间标题字样式(第二个div)      
        >div:nth-child(2){
            font-size:18px;
            font-weight:bold;
            text-align:center;
            line-height:35px;
            }
    //  4.右侧按钮靠右
        >button{
            float:right;
            }
    }
    
    //内容页面-上部只有一个页面标题的按钮栏样式(密码管理)
    .anniulan-yigebiaoti{
        font-size:18px;                    //内部字符大小
        font-weight:bold;                  //内部字符加粗显示
        text-align:center;                 //内部字符居中显示
        height:35px;                       //高度
        width:100%;                        //宽度 
        line-height:35px;                  //行高,通过这个设计一行字符上下居中
        border-bottom:1px solid #aaa;      //下边框线
        background-color:#c8e5f1;
    }
    
    //系统页-右侧页面选项卡
    .xuanxiangka{
        width:100%-150px;                //宽度
    //    float:left;                      //靠左侧浮动显示
        overflow:hidden;                 //内部显示内容超过宽度高度后,不显示滚动条,多出内容隐藏不显示
        margin:0px;                      //外边距-上右下左的距离
        background-color:#dfe6e9;        //背景色
    }
    
    //系统页-右侧页面选项卡-各选项卡
    .yemianxuanxiangka{
        width:110px;                     //宽度
        height:35px;                     //高度
        float:left;                      //靠左侧浮动显示
        background-color:#f0f0f0;        //背景色
    //    -webkit-border-top-left-radius: 15px;        //上部左侧边框圆角大小
    //    -webkit-border-top-right-radius: 15px;       //上部右侧边框圆角大小
        padding:8px 5px 0 5px;           //内边距-上右下左的距离
        color:#666;                      //内部字符颜色
        >span{                   //下一级的"行内标签"对象(tag属性为span的对象)
            width:85%;                             //宽度
            overflow:hidden;                       //内部显示内容超过宽度高度后,不显示滚动条,多出内容隐藏不显示
            float:left;                            //靠左侧浮动显示
            cursor:pointer;                        //鼠标样式(普通的鼠标箭头变为小手形状图标)
            }
        >div{                    //下一级的"块标签"对象(tag属性为div的对象)
            float:right;                           //靠右侧浮动显示
            margin-top:2px;                        //外边距-距上距离
            color:#d5d5d5;                         //内部字符颜色
            }
    }
    
    //系统页-右侧页面选项卡-各选项卡--鼠标划过时的样式
    .yemianxuanxiangka:hover{
        background-color:#d3d3d3;        //背景色
        cursor:pointer;                  //鼠标样式(普通的鼠标箭头变为小手形状图标)
        color:#fff;                      //内部字符颜色
        >div{                    //下一级的"块标签"对象(tag属性为div的对象)
            color:#f6921d;                  //内部字符颜色(叉图标)
            }
    }
    
    //系统页-右侧页面选项卡-各选项卡--选中后的样式
    .yemianxuanxiangkaxuanzhong{
        width:110px;                     //宽度
        height:35px;                     //高度
        float:left;                      //靠左侧浮动显示
        background-color:#c8e5f1;        //背景色
    //    -webkit-border-top-left-radius: 15px;        //上部左侧边框圆角大小
    //    -webkit-border-top-right-radius: 15px;       //上部右侧边框圆角大小
        padding:8px 5px 0 5px;           //内边距-上右下左的距离
        color:#222;                      //内部字符颜色
        >span{                   //下一级的"行内标签"对象(tag属性为span的对象)
            width:80px;                              //宽度
            overflow:hidden;                         //内部显示内容超过宽度高度后,不显示滚动条,多出内容隐藏不显示
            float:left;                              //靠左侧浮动显示
            }
        >div{                    //下一级的"块标签"对象(tag属性为div的对象)
            float:right;                             //靠右侧浮动显示
            margin-top:2px;                          //外边距-距上距离
            color:#f6921d;                           //内部字符颜色(叉图标)
            }
    }
    
    //系统页-右侧页面选项卡-右侧当前显示模块页面的样式
    .dangqianweizhi{
        float:right;                     //靠右侧浮动显示
        margin:5px 15px 0 0;             //外边距-上右下左的距离
        >div{                    //下一级的"块标签"对象(tag属性为div的对象)
            font-size:10px;                           //内部字符颜色
            margin:0 5px;                             //外边距-上下和左右的距离
            color:#487eb0;                            //内部字符颜色
            }
    }
    20210630

    2.在查询按钮的处理,“共几数”和“共几数”取值

    3.在"0201KSNRQYangShi"中预处理(打开页面就显示客商列表)

    4.“下一页”逻辑处理(在预处理的基础上处理逻辑,先有"下一页"操作后,才有"上一页"的操作,所以先做"下一页"的逻辑)

    个人理解:就是对第一次预载输入查询出的数据基础上(查询条件是id is not null ),进行二次条件查询限制输出显示.

     二次查询条件:

      1.Last元件,(获取当前显示页的最后一条记录)

      2.<Start From>,(传入当前页的最后一条记录)

      3.<Backward>,(翻页的方向,Yes输出最后一组N个符合要求的记录(向前翻),No输出结果为第一组N个记录(向后翻))

      4.<Offset>.(查询结果中的前面多少个记录跳过不输出(偏移数)),

      说明(没有理解到什么意思):<Offset>和<Start From>可以同时使用,此时由<Start From>指定的记录开始,跳过<Offset>值数量的记录后再输出.

    5.“上一页”逻辑处理

    6.输入页数逻辑处理(计算"输入页数"就是计算偏移的值后再显示):<On Change>

    输入页数大于1就是输入页数+1=需要显示的页数,然后*每页显示的条数=跳转偏移的条数.

    7.末页设置

    主要算偏移记录的条数<Offset>:用来设定将查询结果中的前面多少个记录跳过不输出。
    分页整数页的总条数(不显示的条数)=总共页数-1(最后一页)*每页显示数量

    8.首页

      

  • 相关阅读:
    redis API使用说明
    javascript (js)判断手机号码中国移动、中国联通、中国电信
    Spring MVC 框架搭建及详解
    Oracle 树操作(select…start with…connect by…prior)
    工作流开发总结
    jQuery 关于ScrollableGridPlugin.js(固定表头)插件的逐步解析
    关于@RequestBody关键字
    linux中的目录的作用
    接口和抽象类的区别
    jdbc操作和开启事务
  • 原文地址:https://www.cnblogs.com/djtang/p/14929460.html
Copyright © 2011-2022 走看看