jquery拖拽排序,针对后台列表table进行拖拽排序(Echart不刷新页面,多语言切换下的地图数据重新加载,api请求数据加载
Echart不刷新页面,多语言切换下的地图数据重新加载,api请求数据加载,soketed数据实时加载
echarts图表重新赋值数据,图表显示会存在一部分原来的数据,看起来怪怪的,echarts呈现的数据刷新不完全/echarts画图时tooltip不会更新
- 解决如下
myChart.clear();
在myChart.setOption(option);之前使用这个方法。myChart.clear(); myChart.setOption(option);
可视化项目中经常用到ecahrt,各种异步加载,连接socket,多语言切换等问题,现在汇总一下:
Ecahrt初始化,全局统一init,可以初始化为0,等待后续数据操作
1、如果是api重新请求,数据手动获取这种方式,直接setOption;
2、 如果是socket实时数据传输展示,直接setOption,但是有tab切换等引起找不到dom的宽高,可以监听切换的事件,在正确的index下resize();
3、 如果是地图数据,第一次也是手动加载:
import i18n from '@/assets/i18n' if(i18n.locale == 'zh'){ echarts.registerMap('china'。。。) }else{ echarts.registerMap('china'。。。) }
然后用户更改了语言版本,监测到该事件:
languageChange(val) { switch (val) { case "zh": this.language = "中文"; break; case "en": this.language = "EN"; break; case "cz": this.language = "česky"; break; default: break; } Storage.set("lang", val); this.$i18n.locale = val; if(val == 'zh'){ $.getScript('/static/js/china_zh.js'); }else{ $.getScript('/static/js/china_en.js'); } }
可以使用jq的getScript(),重新加载资源,这样就可以不刷新重新请求,并让echart中数据实现多语言
When I advent at this land the word will be filled by dark,Black area black sheep!
jquery拖拽排序,针对后台列表table进行拖拽排序(超实用!)
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序。
话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js
先上html代码,很简单:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title> </head> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery-ui.min.js"></script> <style> tr{cursor: pointer;} </style> <body> <table id="sort"> <thead> <tr> <th class="index">序号</th> <th>年份</th> <th>标题</th> <th>作者</th> </tr> </thead> <tbody> <tr> <td class="index">1</td> <td>2014</td> <td>这是第1个</td> <td>阿斯蒂芬阿斯蒂芬</td> </tr> <tr> <td class="index">2</td> <td>2015</td> <td>这是第2个</td> <td>阿萨德发射点发岁的</td> </tr> <tr> <td class="index">3</td> <td>2016</td> <td>这是第3个</td> <td>阿萨德发送地方</td> </tr> <tr> <td class="index">4</td> <td>2017</td> <td>这是第4个</td> <td>的说法大赛分</td> </tr> </tbody> </table> </body> </html>
除了要引入jquery.js 和jqueryUI.js外,还需要如下一段代码:
$(document).ready(function(){ var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }, updateIndex = function(e, ui) { $('td.index', ui.item.parent()).each(function (i) { $(this).html(i + 1); }); }; $("#sort tbody").sortable({ helper: fixHelperModified, stop: updateIndex }).disableSelection(); });
这是我发现的比较实用的一个拖动排序,还是比较方便的。