精华内容
下载资源
问答
  • layui 数据表格 动态标题栏

    千次阅读 2020-10-21 17:17:40
    // 元数据标题栏设置 }); // var obj2 = deepClone(data.griddata); hstable(data.griddata,true) //数据 }else { hstable([]) } },true); } // 导出接口数据导出存储表格 function hstable(data) { var table = ...

    效果图

    在这里插入图片描述

    步骤

    1,前端设置url
    2,后端根据传递参数,查询表的元字段数据,传入前端
    3,前端接收数据,遍历循环放入列中

    代码

    前端代码:

        var cols = [];
        function dydatagrid() {
    
            if(!interId){
                dLong.layerInfo("请选择接口!");
                return;
            }
            var postdata={
                interId: interId
            }
            dLong.getJSON("/BaexportController/toList",postdata,function(data){
                if (data.success) {
                    cols = [];// 初始化
                    $.each(data.fielddata,function(index,row){
                        cols.push({field: row.code, title: row.name,sort:'true',align:'center',width: 140});  // 元数据标题栏设置
                    });
                    // var obj2 = deepClone(data.griddata);
                    hstable(data.griddata,true) //数据
                }else {
                    hstable([])
                }
            },true);
        }
        // 导出接口数据导出存储表格
        function hstable(data) {
            var table = layui.table;
            var ins1=table.render({
                elem: '#hstable',
                height: "full-70",
                size: 'sm' ,
                filter:{
                    bottom:false
                },
                totalRow: true ,
                totalRowAll: true ,
                page: true,
                limit:200,
                limits:[15,30,50,100,200,500,1000,2000,5000,10000],
                cols: [[cols]], // 作为一个参数赋予进去
                data: data? data : [],
                // done: function (res, curr, count) {
                //     layui.soulTable.render(this)
                //     var layuitabletotal = $("div[lay-id='hstable']").children(".layui-table-total");
                //     var totalje=layuitabletotal.find("td[data-field='totalincome']").children("div").text();
                //     var allcost=layuitabletotal.find("td[data-field='totalcost']").children("div").text();
                //
                //     var totalincomeone=layuitabletotal.find("td[data-field='totalincomeone']").children("div").text();
                //     var totalcostone=layuitabletotal.find("td[data-field='totalcostone']").children("div").text();
                //     var actualbalanceone=layuitabletotal.find("td[data-field='actualbalanceone']").children("div").text();
                //     var totalincomeoneavg=parseFloat(totalincomeone.replaceAll(",",""))/parseFloat(data.length);
                //     var totalcostoneavg=parseFloat(totalcostone.replaceAll(",",""))/parseFloat(data.length);
                //     var actualbalanceoneavg=parseFloat(actualbalanceone.replaceAll(",",""))/parseFloat(data.length);
                //
                //     var surplusone=parseFloat(totalje.replaceAll(",",""))-parseFloat(allcost.replaceAll(",",""));
                //     var incomeCostRate=parseFloat(allcost.replaceAll(",",""))/parseFloat(totalje.replaceAll(",",""));
                //     layuitabletotal.find("td[data-field='surplusone']").children("div").text(surplusone.toFixed(2))
                //     layuitabletotal.find("td[data-field='incomeCostRate']").children("div").text(incomeCostRate.toFixed(4))
                //
                //     layuitabletotal.find("td[data-field='totalincomeone']").children("div").text("平均数:"+totalincomeoneavg.toFixed(2))
                //     layuitabletotal.find("td[data-field='totalcostone']").children("div").text("平均数:"+totalcostoneavg.toFixed(2))
                //     layuitabletotal.find("td[data-field='actualbalanceone']").children("div").text("平均数:"+actualbalanceoneavg.toFixed(2))
                //
                // }
            });
        }
    
    
     // 定义一个深拷贝函数 使用了对象的引用对象的时候,使用深拷贝处理对象
        function deepClone(obj){
            var result;
            var oClass=isClass(obj);
            if(oClass==="Object"){
                result={};
            }else if(oClass==="Array"){
                result=[];
            }else{
                return obj;
            }
            for(var key in obj){
                var copy=obj[key];
                if(isClass(copy)=="Object"){
                    result[key]=arguments.callee(copy);//递归调用
                }else if(isClass(copy)=="Array"){
                    result[key]=arguments.callee(copy);
                }else{
                    result[key]=obj[key];
                }
            }
            return result;
        }
        //判断对象的数据类型
        function isClass(o){
            if(o===null) return "Null";
            if(o===undefined) return "Undefined";
            return Object.prototype.toString.call(o).slice(8,-1);
        }
    

    后端代码:

      // 导出字段
        @RequestMapping("/toList")
        @ResponseBody
        public Map toexceldataList(@RequestParam HashMap<String,String> paraMap,Model model) {
            try {
                Map<String, Object> returnmap = createResult(true, "保存成功");
                String sql="select name,code from A_field where inter_id='"+paraMap.get("interId")+"'";
                returnmap.put("fielddata",jdbcTemplate.queryForList(sql)); //表元字段数据
                String sqldata="select name,code from A ";
                returnmap.put("griddata",jdbcTemplate.queryForList(sqldata));  //表数据的查询sql
                return returnmap;
            } catch (Exception e) {
                return createResult(false, "保存失败");
            }
        }
    
    展开全文
  • 但这个表格没有想象中的那样简单,刚接到需求就认为这是一个很复杂的一个功能,难倒是太难,很费心。 大致完整效果为这样 动态生成部分为享受社会救助情况及其下的定期定量救助和非定期定量救助以及最后得数据...

    动态生成表格,说白了就是页面拼串。后台组织数据,前台获取拼凑成完成的表格。

    但这个表格没有想象中的那样简单,刚接到需求就认为这是一个很复杂的一个功能,难倒是不太难,很费心。

    大致完整效果为这样

    动态生成部分为享受社会救助情况及其下的定期定量救助和非定期定量救助以及最后得数据。

    首先我通过两步走战略:

    1、获取多选数据(救助类型+type),使用“,”分隔开,创建条件数组,根据数组的长度确定,享受社会救助情况(金额)所跨列的长度。根据条件结尾的type,确定是定期还是非定期救助类型,然后确定定期和非定期分别所占跨列数,然后再根据救助类型的type区分定期和非定期下的数据标题。

    2、通过append()方法向表头中添加固定行和列

    3、通过ajax去后台获取数据

    4、最后将数据添加到tbody中

    其中难点在于后动态数据的组建。我将动态的数据组装到Map<String,List>中传到前台,泛型为前台多选的条件和条件对应的数据集合,前台根据数组长度确定每行显示动态数据的长度,根据type判断数据所属类型,再从map中取出list循环出所有的动态数据。之所有使用三元运算是因为,后台case when判断的数值,传到实体中为乱码。我将case when的判断结果为数字,前台三元运算判断取值。

    总结:写完忽然发现其实很简单,用心去研究,没有解决不了的问题。

    展开全文
  • 选择单元格,点击视图–>点击冻结窗格下的冻结首行,即可冻结标题栏,滑动页面时,标题栏固定不动

    选择单元格,点击视图–>点击冻结窗格下的冻结首行,即可冻结标题栏,滑动页面时,标题栏固定不动。这里写图片描述

    展开全文
  • 固定列表标题栏

    千次阅读 2015-09-28 20:01:43
    当一个列表内容太多时,在上滑过程中,如果固定标题栏,会知道当前这个列表属于哪个分类,所以常见做法是向上滑动过程中,将当前分类的标题栏固定在屏幕最上方。

    当一个列表内容太多时,在上滑过程中,如果不固定标题栏,会不知道当前这个列表属于哪个分类,所以常见做法是向上滑动过程中,将当前分类的标题栏固定在屏幕最上方。拿起你的手机,打开QQ,查看它的联系人分类,就可以体验这种效果。


    这样的一个小小的交互,如何来实现呢?

    1、准备资源

    1)新建一个动态面板,命名为main,内容是随便放些组件,在里面放一个表示列表的一个矩形,带有一个标题栏(见下图的粉色社区动态标题栏),我们要在滑动面板向上到最顶端时固定这个标题栏。


    2)复制一下动态面板里的那个标题栏到外面来,起个名字“隐藏的标题栏”



    复制后的标题栏移到屏幕最上方,并设置为隐藏状态


    2、给动态面板添加事件控制

    在拖动动态面板时,如果动态面板的y值小于-200(刚好是里面的标题栏到达顶部的时候),显示之前隐藏的标题栏,否则就隐藏它


    注意:事件里用到了局部变量,代表当前的组件,所以LVAR1.y就是它的纵坐栏,判断这个位置就行了。


    这就可以了哦,其实还是比较简单的吧,想好思路,实现起来并不复杂。


    在线演示

    展开全文
  • layui动态表格 动态查询数据

    千次阅读 2019-05-22 13:23:33
    layui 表格显示以及 用input查询table表格 ## 首先定义一个文本框和一个搜索 注意搜索按钮里的 data-type="reload" 和input id <div class="layui-form-item"> <div class="layui-inline">...
  • 在做web前端开发时,有时候需要滚动条滚动时上面的标题固定不动。如果一开始在设计阶段html元素的层次结构是对的,通过在不同的节点设置overflow就很容易实现。 但是有时候一开始的层次结构设计的能满足让标题...
  • 当Excel表格中有非常多行/列数据的时候,我们要查看对应标题下的内容,但是当我们想要查看非当前页面数据的时候,就会无法对应标题查看。那么,我们可以用下面的方法去改变这种情况: 以Excel 2016为例 1、如图要...
  • jQuery EasyUI动态添加控件或者ajax加载页面后能自动渲染 解决办法: 使用解析器 Parser(解析器) $.parser.parse();//解析所有页面 $.par...
  • 【WPS】表格设置标题固定滚动

    千次阅读 2019-05-02 11:02:10
    选择开始--冻结窗格--冻结首行 如果想设置多行标题,设置多行固定滚动,则选择多行,选择开始--冻结窗格--冻结窗格 这样,就可以了,即是滚动到最下面,冻结的窗格还是固定滚动 ...
  • 1、标题栏置顶并固定 position:fixed; 定义和用法: position 属性规定元素的定位类型。 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。 可能的值 可能的值描述: absolute 生成绝对...
  • VUE 实现table 动态增加行增加列,且行内属性自定义,行内内容可编辑,标题栏内容可编辑 最终实现效果如下图 源码 增加行 增加列
  • 表头的标题是 N 个,那么就需要分 N + 1 个 td ,前面 N 个 TD 的 width 总和为 100 %,最后 1 个为了给滚动条位置,不然不好与下面 table 对齐。 下面的结果体 table 需要包含在 div 中,设置 td 的长度与上面 td...
  • 这一次我们所要做的就是给内容版块添加标题栏,还有就是给制作信息版块添加链 接。这一篇博文基本就是做这些了,记着和前两篇博文比较效果。  还是老套路,写HTML代码时,一定要注意闭合标签,一定要注意代码的...
  • app的自带的标题栏就消失了,然后我们可能会需要自己定义一个标题栏 通常,我们可以用工具栏组件(Toolbar) 来代替标题栏,工具栏是在v7中新增的 对于工具栏 我们需要太多的设置,只需要背景和宽高就行了,然后我们需要...
  • 爬取动态网站表格内容

    千次阅读 2018-04-30 13:06:59
    重点要关注看.jsp结尾的,首先打开第一个zxcj.jsp,看preview和response都可以,但是preview比较直观,显示的是网页的一些标题、菜单之类的。在我们一顿搜索以后找到了ajax.jsp,仔细一看数字信息对上了,如图,...
  • table.render({ cols: [[ {field:'title', title: '文章标题', width: 200 ,templet: function(d){ return 'ID:'+ d.id +',标题:'+ d.title +'' } } ,{field:'id', title:'ID', width:100} ]] }); 3 方式三:直接...
  • 原因:表头或者标题数据换行,导致高度一致 解决:在表格的done 回调中 done: function (index, layero) { //表头部分 //动态监听表头高度变化,冻结行跟着改变高度 $(".layui-table-header tr").resize...
  • 今天碰到一个很头痛的问题,项目使用的是Layui的前端UI框架,在使用Layui数据表格的时候发现,初次加载头部工具【删除所选班级】按钮功能都正常,但是在搜索 、修改、删除[都会执行一次表格重载获取新的数据] 之后...
  • 注:此文本人是用Windows Live Writer 离线写的,没... 另现求源代码的朋友不好意思了, 这个组件现在是商业软件的一部分, 恕能提供. 动态报表DLL名: DynamicReportBuilder类成员:主框架: 目的:完全实现Excel的丰富
  • tooltip title标题动态改变

    千次阅读 2018-12-08 08:59:41
    tooltip title标题动态改变 使用下面这段代码无法更改显示title $(&quot;#p2&quot;).attr(‘title’,“柜名:1-9#出线柜(G109) 测温点:电缆接点aaa”).tooltip(‘fixTitle’).tooltip(‘show’); ...
  • &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&...lt
  • EasyUI+js实现动态加载导航

    万次阅读 热门讨论 2015-10-18 15:07:53
     小编最近在做项目的时候遇到一个权限控制的功能,就是根据权限的大小来控制导航中的内容,这就遇到了 动态加载导航的功能了,但是根据整个界面的风格需要需要用到EasyUI,在开始的时候没有头绪来解决这个...
  • demo 下载地址: 昨天花了点时间重新学习了...1.demo写完后,发现表格老是有重叠页面,同时表格的位置能能够控制。最后发现原来是: @interface SwwTableViewController : UITableViewUITableViewDelegate, UITableV
  • 表格动态展示与下钻

    千次阅读 2016-09-13 08:37:37
     height: "380",//auto的话表格高度会随着数据的变化而变化  striped: true,  singleSelect : true,  url:'()%>/EstimateGroupManage.do?method=searchBelowOrgRuleScore&nodeId='+nodeId ,  query...
  • TP5 layui 生成动态数据表格

    千次阅读 2019-03-26 15:11:39
    很简单很普通的功能,想解释太多,代码也是拿来即用 控制器: 前台 index.html代码: <div class="header"> <hr> <div class="demoTable" style="display: block;margin:10px 50px 10px 50px...
  • Vue动态控制表格列的显示和隐藏

    千次阅读 2020-07-17 17:37:00
    表头标题是重复的、为了能看到滚动效果 v-if=“lists[0].ispass” 来判断表格列的状态每一列是否显示或隐藏 勾选则展示、取消勾选隐藏、默认勾选 <el-dropdown :hide-on-click="false"> <i class=...
  • 标题样式:[.h1,.h2,.h3], 加深加重:[&lt;mark&gt;&lt;/mark&gt;&lt;strong&gt;&lt;/strong&gt;], 删除线:[&lt;del&gt;&lt;/del&gt;], 下划线:[&lt;ins...
  • 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是知道会有多少个表头列,而这几个表头列还分了好几个子表头。 这个需求在js里用Juicer模板很好做的...
  • //标题栏 cols: [[ { field: 'MeteringName', title: '计量点' }, { field: 'MeteringValue1', title: '1月' }, { field: 'MeteringValue2', title: '2月' }, { field: 'MeteringValue3', title: '3月' }, //...
  • HTML表格和表单

    千次阅读 2014-09-25 22:17:53
    表格 1.表格的作用:  A.页面的布局  B.显示规则有序的数据   2.表格的写法    ...  ...    ... 说明:th只能用于第一行,用于设置列名,居中且加粗。   3.表格的属性(table) width ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,040
精华内容 8,416
关键字:

如何让表格的标题栏不动