Javascripts
JavaScript应用场景
丿潇湘丶书笛
你我所见,不过沧海一粟
展开
-
JS实现一键展开、折叠所有树节点
在数据分析报表中,通常会有结构树展开的分析报表。在结构树节点较多的时候,逐个进行展开、折叠等操作时,会比较繁琐、费时间、费手劲;此处示例通过点击按钮的方式,使用js实现一键展开、折叠所有的树节点(不限制层数)1、设置JS事件在需要事件展开/折叠的单元格/按钮上,添加“超级链接”,分别键入JavaScript事件控制:展开事件:$('.x-treenode-unexpand').trigger('click');折叠事件:$(".x-treenode-expand").原创 2022-03-23 15:20:04 · 3566 阅读 · 1 评论 -
JS实现点击单元格改变所在行颜色(最简代码)
我以前也发布过通过“JS实现点击单元格改变所在行颜色”的博客,不过都是以前初出茅庐的时候写的,代码不够简化。前段时间发现还有其他方式可以实现该效果,而且只需要一行代码,所以再发布一条,供大家参考使用。1、最受青睐功能:① 点击改变行颜色,无论原本有无背景色;② 点击其他行则清除背景,恢复背景色和颜色操作:添加加载结束事件(其他类型报表也通用)://使点击的行变色contentPane.makeHighlight('#FFF4C4','',true);..原创 2022-03-23 11:25:12 · 2372 阅读 · 3 评论 -
JS实现点击单元格后改变当前行背景颜色(冻结行列的填报报表)
在用户希望通过点击单元格后,改变当前整行的背景颜色时,我们可以通过设置报表的加载结束事件,设置相关js事件,实现对应的功能。示例报表为填报报表,且报表中有设置冻结行列。1、界面设计:2、javascripts事件编辑:在报表设置中添加加载结束事件如下:代码如下:$(".frozen-center .x-table td").mousedown(function () { var curRow = $(this).closest("tr"); $('[clicked]')原创 2020-09-24 14:57:23 · 1863 阅读 · 0 评论 -
JS实现复选框全选/全取消功能
在复选框控件的应用中,不乏复选框较多的情况下,需要进行全选/全取消的操作,方便用户进行数据的审批、入库等等,此时我们可以利用单元格或控件,触发js事件,实现复选框的全选/全取消功能,当然,一般我们还是习惯用用复选框来实现全选/全取消的功能。1、报表设计:2、js事件:如图,触发复选框的状态改变事件来进行全选和全取消:代码如下://获取当前复选框控件的状态,true /falsevar flag=this.getValue();//循环遍历每个复选控件for(var i=0原创 2020-09-18 13:51:58 · 756 阅读 · 0 评论 -
JS实现不刷新页面排序数据
在以往的方式中,我们一般是在数据集sql中,就事先定义好按照指定字段排序;或者通过动态参数,刷新页面进行页面数据排序,此时会导致报表再次触发查询,小数据量的话还好,但是当数据量比较大查询比较久时,这个排序的效率是比较鸡肋的,所以我们可以通过使用JavaScript的方式,实现不触发查询不刷新页面的数据排序,效率可观。但是这种JavaScript的实现效果有一定的局限性:1、填报报表;2、排序的表头需要放在第一行;3、不可以有冻结行列。所以大家根据自己的情况进行使用,复杂的报表就只能使用旧方法用动态参数实原创 2020-07-14 17:53:43 · 435 阅读 · 0 评论 -
JS实现报表多文件批量导出和下载(解决浏览器拦截问题)
在报表上线后,用户在导出报表的过程中,系统有一系列报表需要导出,为了减轻用户的工作量,可以在系统中实现一键进行多文件的批量导出,以及自定义导出文件名等。而此时,在下载多文件时,会让浏览器认为是恶意操作,浏览器会自动进行拦截,导致不明情况的操作人员认为下载是失效的,实际上只是被浏览器拦截了而已;而我们,可以通过修改一下文件导出和下载的代码,完成文件导出和下载1、JavaScript事件:在工具栏或报表中,定义一个触发的超链接或JavaScript脚本。代码如下:layer.promp原创 2020-05-20 10:08:19 · 2242 阅读 · 0 评论 -
JS删除复选框选中行
在日常报表制作中,我们会时长遇到一些需要批量操作的功能,例如数据的批量删除,而此时往往跟复选框挂钩;一般是在报表中,我们可以通过复选框的形式进行勾选,然后通过按钮或者超链接触发JavaScript事件,获取复选框选中行,在进行一键删除。接下来,就来讲解一下,如何通过获取复选框,获取选中行数据,进行一键删除行。1、报表设计本报表的应用是用于文件的上传和数据整理入库,此处示例多文件删除功能...原创 2020-04-08 19:35:58 · 3266 阅读 · 0 评论 -
JS实现多样式打开网页
1、新窗口//方法一:window.location="/mmd/RS?bb=f9976214-fd70-4525-b07c-2de9645f1edf";//方法二:window.open("/mmd/RS?bb=f9976214-fd70-4525-b07c-2de9645f1edf"); //方法三:window.open(MR.cjkEncode("/mmd/RS?bb=f9...原创 2020-04-08 19:29:37 · 196 阅读 · 0 评论 -
JS获取复选框选中行数据(适用于批量插入、删除、修改、查询)
在日常报表制作中,我们会时长遇到一些需要批量操作的功能,例如数据的批量删除、批量入库、批量新增、批量修改、批量查询等等,而此时也时长跟复选框挂钩;一般是在报表中,我们可以通过复选框的形式进行勾选,然后通过按钮或者超链接触发JavaScript事件,获取复选框选中行数据,一键删除、入库、修改、查询选中数据。接下来,就来讲解一下,如何通过获取复选框,获取选中行数据,进而进行传参,一键删除、入库、修...原创 2020-04-08 19:13:13 · 3378 阅读 · 2 评论 -
JS获取/赋值参数面板和报表面板的数据
在日常报表开发中,由于前台展现的特殊联动等功能要求,或前后台数据交互显示功能要求,经常需要通过JavaScript来获取单元格或控件中的数据值,对指定单元格或控件进行赋值等等,下面分享一下在报表参数面板、数据展示面板中,如何使用JavaScript进行数据获取和数据赋值。1、参数面板:获取控件值:var data=this.options.form.getWidgetByName("...原创 2020-03-25 18:27:53 · 720 阅读 · 0 评论 -
JS实现报表多文件批量导出和下载
在报表上线后,用户在导出报表的过程中,系统有一系列报表需要导出,为了减轻用户的工作量,可以在系统中实现一键进行多文件的批量导出,以及自定义导出文件名等。1、JavaScript事件:在工具栏或报表中,定义一个触发的超链接或JavaScript脚本。代码如下:layer.prompt( {title:"请输入工程脱敏名称",value:dxname},function(...原创 2020-03-06 12:54:04 · 952 阅读 · 0 评论 -
JS实现自定义文件名导出
在报表上线后,用户在导出报表的过程中,经常有需要修改导出文件名的需求,要么直接定义好了导出的文件为什么名称,要么都需要下载后才能线下进行文件名修改。博主这种用户就提出另一种需求,系统需要实现在用户导出数据的时候,让用户自行定义导出文件名名称,此时我们可以通过js来实现改功能。1、报表设计2、JavaScript事件在工具栏或报表中,定义一个触发的超链接或JavaScript脚本。...原创 2020-03-06 10:54:21 · 1324 阅读 · 0 评论 -
JS实现报表编辑后不显示红角
在报表上线中,当用户修改了控件值,控件所在单元格以及当前控件值会影响到数据的单元格,都会显示红角,会给用户一种不好的体验感,此时可以通过JavaScript事件,实现编辑后不显示红角。1、报表设计2、JavaScript事件在web属性中添加“加载结束”事件:contentPane.on("cellselect", function(td){ $('.dirty'...原创 2020-03-06 10:34:58 · 169 阅读 · 0 评论 -
报表常用JS事件介绍(持续更新)
(个人总结更新)报表常用JS事件介绍:1、 JS事件控制隐藏行:$("#r-1-0").toggle(); //隐藏第二行(由0开始算)$("#r-1-0").hide(); //隐藏第二行$("#r-1-0").show(); //显示第二行toggle()缺省为先false后true的循环;false表示隐藏;true表示显示。2、 JS事件将当前报表生成文件:...原创 2019-06-20 15:43:34 · 685 阅读 · 0 评论 -
JS实现报表隐藏选定行数据(删除行数据)
在报表中,我们一般可以通过删除行按钮,删除某一行的数据,将这一行数据在前端界面上删除,这个是系统自带的;当然我们也可以通过其他多种方式,删除/隐藏界面上的行数据,同时也将对应的数据主键传到后台,在后台数据库也删除对应的记录。通过自定义JS事件,实现动态隐藏行或删除行,使得前端界面的使用体验感非常圆滑,后台数据处理也可以正常进行,将前端和后台的数据记录保持一致,前后台相互打通,保证系统数据...原创 2019-09-04 18:25:37 · 875 阅读 · 0 评论 -
JS设置控件条件性可用/可见(参数面板)
在报表的使用过程中,有一种应用场景:在使用者的做查询条件时,根据下拉框或填写的值,自动显示/隐藏下一个筛选框,例如选了省份和城市之后,再显示区县的筛选框,如下图:1、报表界面设计:其中,“区县”和对应的下拉框,需要预设置为不可见。2、javascript事件编辑在城市下拉框中,设置“编辑后”事件如下:代码如下:var form = this.options.fo...原创 2019-11-27 10:20:16 · 1315 阅读 · 2 评论 -
JS实现点击行改变颜色
在实际项目开发中,有些开发出来的报表的数据量是比较大的,或者是多维度的大数据分析报表,在这个时候,为了观察方便,我们一般会对报表进行底色区分,改变每个隔行的颜色,方便用户对报表数据进行阅读。然而,有些应用场景中,隔行区分颜色不一定能满足阅读的需求,或报表页面中有分模块的颜色区分,此时用隔行颜色差对页面的色彩布局影响不是很好;用户实际应用时,希望的是在用户点击单元格时,改变当前单元格所在行的背景...原创 2019-09-20 15:21:21 · 2383 阅读 · 0 评论 -
JS实现自定义原样导出的文件名
在系统日常运行中,系统默认提供的原样导出,是默认以报表名字为文件名的;但因应用场景的不同,一些报表在导出过程中,需要携带参数定义文件名,或直接自定义导出文件名,减少操作人员导出数据后还需要进行文件名更改的操作。针对以上应用场景,我们可以通过自定义按钮,自定义JS事件,在实现报表导出的基础上,进一步自定义导出的文件名。1、工具栏设计:2、javascripts事件编辑:在自定义按...原创 2019-12-20 10:48:43 · 764 阅读 · 0 评论 -
JS实现导出决策报表中的报表块,并自定义导出文件名
在系统日常运行中,系统默认提供的原样导出,是默认以报表名字为文件名的;但因应用场景的不同,一些报表在导出过程中,需要携带参数定义文件名,或直接自定义导出文件名,减少操作人员导出数据后还需要进行文件名更改的操作。针对以上应用场景,我们可以通过自定义按钮,自定义JS事件,在实现报表导出的基础上,进一步自定义导出的文件名。前面已经有写过一篇在常规报表中的自定义文件名导出,但是常规报表中的导出在决...原创 2019-12-20 11:24:33 · 1612 阅读 · 0 评论 -
JS实现加载后自动展开所有树节点按钮
在分析报表中,树节点按钮的应用有利于让用户了解数据的架构和关系;而在实际的应用场景中,树节点按钮是不自动展开层级的,而有的用户是需要默认展开一层树节点按钮,或默认展开所有树节点按钮,或通过按钮方式,展开和折叠所有树节点按钮,这时候需要设置加载结束时间,完成树节点按钮的展开。1、报表设计具有树节点按钮的分析报表设计如下:2、JavaScript事件编辑(根据需要选择JavaScrip...原创 2020-01-17 15:17:16 · 960 阅读 · 2 评论 -
JS设置单/复选框控件内数据间隔
在报表开发中,为了界面美观合理,布局宽敞的报表,需要设置单/复选框控件内数据的间隔;此时可以通过JS事件,设置控件的初始化事件,改变控件内数据的间隔大小。1、JavaScript事件:在对应控件中,添加初始化事件,JavaScript代码如下:$('.mr-group-span').css("margin-left","40px")2、效果图:根据报表布局情况,可以自...原创 2020-01-17 15:36:23 · 549 阅读 · 0 评论 -
JS实现填写后自动移出光标,解决控件值刷新不及时(实用性更强,适用于所有控件、大小型填报表)
之前发过一篇博客,也是解决报表中控件值刷新不及时的问题,经过后续的项目需求和项目实施,博主终于又发现另一种方法,可以在点击按钮时,移出光标,快速获取控件值,同样也达到了解决控件值刷新不及时的效果。移出光标,意味着不管界面上有多少个控件,都可以不用在各个控件上单独写JS,只需要在按钮上(或超链接)添加一个点击的JS事件,即可一次性搞定,避免重复开发,报表更容易维护,提高开发效率,实用性更强。...原创 2019-04-24 22:54:54 · 494 阅读 · 0 评论 -
JS控制下拉框数据联动和隐藏/显示
在查询查询页面中,有时候并不会把所有查询项都直接显示出来,而是①根据使用者的选项内容,联动下一个下拉框中应供选择的选项;②根据使用者使用的选项细化深度,提供下一个深度查询数据查询的选项;③根据使用者的权限,限制/开发更底层数据的查询权限。如下图:对于这种需求场景,我们可以通过新建下拉框数据集,设置各个下拉框数据集之间的关系,设置下拉框的编辑后JS事件,实现下拉框数据之间的联动,实现定义的条...原创 2019-04-04 22:58:04 · 2659 阅读 · 0 评论 -
JS实现填写后自动移出光标,解决控件值刷新不及时
在报表的使用过程中,使用者在控件中输入数据后,点击其他按钮用来获取控件值进行传参、钻取或者运算时,经常不能马上获取道对应的值,需要点击两次才能获取到控件值,或者需要在点击按钮前,先点一下其他位置以移开光标,此时才能获取到控件值,这是因为报表不能及时识别到当前控件中已编辑结束,导致报表不能马上刷新控件值。如下图:在解决上述问题时,我也有搜索过相关的案例,然而并不能解决我的问题,网上大部分都是...原创 2019-01-03 16:00:46 · 1086 阅读 · 0 评论 -
JS中获取控件数据/行号/列号,各控件变量名梳理
前面分享了在报表中需要获取控件所在行号,以用来获取所在行上的数据信息的业务需求,在前面分享的是用按钮控件用来获取当前所在行的,当实际应用中,我们还有可能用到其他多种控件,如:文本控件、数字控件、密码控件、下拉框控件、下拉复选框控件、单选复选框控件、复选框组控件、日期控件、文件控件、下拉树控件等等多种控件,前面分享的按钮控件是通过 $btn 来获取按钮控件所在行的,其他控件用的就会有所不一样了,下面...原创 2019-01-03 15:00:24 · 1009 阅读 · 0 评论 -
JS获取行号/列号,获取指定行/列数据
在报表的使用过程中,有时候需要获取将某行或某列上的单个、一些、所有数据,并将数据传给接口进行处理,并将处理后的结果赋值到页面中。如下图:在报表制作过程中,因为数据往往都是通过数据集中的字段扩展出来的,在javascript获取数据时,如果使用公式去取某个单元格中的数据,都是拿到一整个字段数组,不能根据触发获取值事件的所在行/列来获取指定值,更不能实现在指定位置赋值处理后的数据;此时需要用j...原创 2019-01-02 16:51:05 · 9031 阅读 · 4 评论 -
JS实时获取和赋值单元格/控件数据
在报表的使用过程中,报表平台往往集成了其他多种平台,实际应用中,经常需要把页面/控件中的数据传输给后台,后台把数据传给一些接口做多次处理,再将处理后的结果赋值到指定位置。如下图:对于这种情况,一般可以用自带的公式,如=A1,诸如此方式获取某单元格上的数据;而这种方式只能读取到页面初始化时的数据,当页面数据用javascripts改动时,公式不能获取到改动后的数据,在使用数据集字段数据时也会...原创 2019-01-02 16:16:00 · 3084 阅读 · 0 评论 -
JS自定义隐藏/显示sheet页面
在报表的使用过程中,有一种特殊需求:针对某个多sheet页面的报表,需要针对不同的用户,隐藏/显示不同的sheet页面,从而达到权限控制的效果,同时,需要将这种功能实现可视化,由使用者来控制不同用户的权限和更新权限,不由开发人员默认设置。在常规的报表制作中,一般都是根据业务上的使用规定,开发时就已经做好了多个页面,事先设置好不同用户具有什么权限,可以查看什么页面了;此处因为使用者需要自己根据业...原创 2019-01-02 14:09:56 · 2767 阅读 · 0 评论 -
JS设置控件条件性可用/可见(报表面板)
在报表的使用过程中,有一种应用场景:在使用者的填写页面中,填写框B需要根据填写框A中是否有输入值才显示/隐藏,例如登录界面中,必须先输入账号,才可以输入密码,都是同样的应用场景。如下图:在报表制作过程中,为了达到控件之间实时进行相互沟通的项目,需要将“主导权”赋予填写框A,在填写框A中设置“编辑后”的javascript事件,根据使用者在填写框A中是否已输入值,来控制填写框B是否可用/可用...原创 2019-01-02 11:05:32 · 1099 阅读 · 0 评论 -
JS获取复选框选中个数
在报表的使用过程中,有一种需求情况:当使用者勾选了某些复选框之后,需要在指定位置显示已选中的个数。如下图:在报表制作过程中,因为没有公式可以获取到根据使用者的勾选情况,计算出复选框的选中个数,所以这里需要在复选框中添加“状态改变”的javascript事件,用于自动获取使用者复选框的选中个数,并赋值到指定单元格中。如下:1、报表界面设计:2、javascript事件编辑...原创 2019-01-02 10:09:17 · 4028 阅读 · 4 评论