两三个月前第一次开发的时候，不想今天便出现了一些小问题，回想起来由于时间比较赶，确实不够健壮，不够美观，体验稍差，整体如下：
重点1：根据筛选条件动态生成图表
重点2：根据提示框，联动下面的easyui表格进行实时更新显示
其他遇到其他相关小问题和解决 注意事项：
1：combobox当要选择输入内容时，聚焦便清空内容，
2：求出checked里面值，选择使用prop 特性，在最新版本jquery里做过说明，它返回false或true
而attr则返回undefined或是checked，
3：子窗体调用父窗体中其他子窗体方法和获取相关元素值
4：单选按钮，偏上，原生的输入控件，和easyui控件，风格不一致
5：重中之重：养成较好的编码习惯，一定要先判断再使用，无论是集合是否为空，还是元素本身是否为空，无论前端还是后台
直接导致图表卡顿，甚至页面假死
重新看了原来写的脚本后，问题得到解决，有图有真相
ps:多说一句，此图用faststone进行录屏，在https://cloudconvert.com/wmv-to-gif上将录好文件wmv格式在线转为gif，个人认为：未来趋势绝对是bs模式大行其道，甚至是向在线操作系统这种模式发展，唯一的限制便是网速，和浏览器功能，以及安全，不管怎么说，因为不用安装，使用简单，真的太方便了。
总结：主要是因为全局条件逻辑判断不是特别清晰，和null值未做任何处理
详细见下文：
重点1：根据筛选条件动态生成图表
思路：根据传入参数，生成图表需要的几条重要数据结构 ，
var _legend = [],
_xAxis = [],
_series = [];
function addProfitCompare(flag1, flag2, data, type, flag0) {
var fundCodeList = $("#fundCodeStr").attr("value");
var funds = fundCodeList.split(',');
//console.log(funds);
//console.log(flag1);
var h = $(window.parent.parent.document).find("#nav").height();
var adjust = $(window.parent.parent).width() >= 1020 ? (92 + 94) : (120 + 94);
var calH = (h - adjust);
$("#profit").css('height', (calH - 158) + 'px');
var myChart = echarts.init(document.getElementById('profit'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
//grid: {
// right: '5%'
//},
formatter: function (params) {
//console.log(params[0].name);
$("#dgCompare").datagrid('loadData', []);
var filter = [];
//val是一个某一个对象，类似lambda中xx概念
//filter = data.filter(function (val) { return params[0].name == val.fsrq });
filter = $(data).filter(function (val) { return params[0].name == this.fsrq });
//兼容ie考虑，不支持filter原生方法，转为jquery
//根据时间抽出对应数组后，顺序乱了，需要根据funds顺序排序一下，同时funds里面是带有引号
var filter_ = [];
for (var i = 0; i < funds.length; i++) {
for (var ii = 0; ii < filter.length; ii++) {
//console.log( filter[ii].jjdm + "-" +funds[i].substring(1,7));
//console.log(params[i].seriesName);
if (data[i].基金简称 == filter[ii].基金简称) {
filter_.push(filter[ii]);
}
}
}
//console.log(filter_);
filter = filter_;
for (var i = 0; i < filter.length; i++) {
//console.log(filter[i].基金代码);
$('#dgCompare').datagrid('insertRow', {
row: {
基金代码: filter[i].基金代码,
基金简称: filter[i].基金简称,
基金类型: filter[i].基金类型,
fsrq: filter[i].fsrq,
dwjz: filter[i].dwjz,
benjin: filter[i].benjin,
DTshizhi: filter[i].DTshizhi,
DTshouyi: filter[i].DTshouyi,
DTshouyilv: filter[i].DTshouyilv,
shizhi: filter[i].shizhi,
shouyi: filter[i].shouyi,
shouyilv: filter[i].shouyilv,
dapanshouyilv: filter[i].dapanshouyilv
}
});
}
//另外单独写一个，必须写上一个return,否则是空白的
var res = '';
//console.log(params);
for (var i = 0; i < params.length; i++) {
var param = params[i];
//var style = 'color: ' + param.color;
res += param.marker;
res += '<span style="">' + param.seriesName + '：' + param.value + '</span>';
res += '<br />';
}
return res;
}
},
legend: {
data: []
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: []
};
var _legend = [],
_xAxis = [],
_series = [];
switch (type) {
case "default":
for (var i = 0, len = funds.length; i < len; i++) {
_legend.push({ name: data[i].基金简称, icon: 'bar' });
//根据基金名称分组
//var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row = { name: data[i].基金简称, type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
if (i == 0) {
_xAxis.push(group[x].fsrq);
}
flag0 ? row.data.push(group[x].DTshouyilv != null ? group[x].DTshouyilv.toFixed(2) : 0) : row.data.push(group[x].DTshizhi != null ? group[x].DTshizhi.toFixed(2) : 0);
}
_series.push(row);
}
if (flag1) {
for (var i = 0, len = funds.length; i < len; i++) {
_legend.push({ name: data[i].基金简称 + "一次性买入", icon: 'bar' });
//根据基金名称分组
//var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row2 = { name: data[i].基金简称 + '一次性买入', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
if (i == 0) {
// _xAxis.push(group[x].fsrq);
}
flag0 ? row2.data.push(group[x].shouyilv != null ? group[x].shouyilv.toFixed(2) : 0) : row2.data.push(group[x].shizhi != null ? group[x].shizhi.toFixed(2) : 0);
}
_series.push(row2);
}
}
if (flag2 &&flag0) {
_legend.push({ name: "上证指数走势", icon: 'bar' });
//var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
row3.data.push(group[x].dapanshouyilv != null ? group[x].dapanshouyilv : 0);
}
_series.push(row3);
}
break;
case "zichan":
for (var i = 0, len = funds.length; i < len; i++) {
_legend.push({ name: data[i].基金简称+"定投", icon: 'bar' });
//根据基金名称分组
//var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row = { name: data[i].基金简称 + "定投", type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
if (i == 0) {
_xAxis.push(group[x].fsrq);
}
row.data.push(group[x].DTshizhi!=null?group[x].DTshizhi.toFixed(2):0);
}
_series.push(row);
}
if (flag1) {
for (var i = 0, len = funds.length; i < len; i++) {
_legend.push({ name: data[i].基金简称 + "一次性买入", icon: 'bar' });
//根据基金名称分组
//var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
var row2 = { name: data[i].基金简称 + "一次性买入", type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
row2.data.push(group[x].shizhi!=null?group[x].shizhi.toFixed(2):0);
}
_series.push(row2);
}
}
break;
case "oneAndZou":
for (var i = 0, len = funds.length; i < len; i++) {
_legend.push({ name: data[i].基金简称 + "定投", icon: 'bar' });
_legend.push({ name: data[i].基金简称 + "一次性买入", icon: 'bar' });
//根据基金名称分组
//var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row = { name: data[i].基金简称 + '定投', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
if (i == 0) {
_xAxis.push(group[x].fsrq);
}
flag0 ? row.data.push(group[x].DTshouyilv != null ? group[x].DTshouyilv.toFixed(2) : 0) : row.data.push(group[x].DTshizhi != null ? group[x].DTshizhi.toFixed(2) : 0);
}
var row2 = { name: data[i].基金简称 + '一次性买入', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
if (i == 0) {
// _xAxis.push(group[x].fsrq);
}
flag0 ? row2.data.push(group[x].shouyilv != null ? group[x].shouyilv.toFixed(2) : 0) : row2.data.push(group[x].shizhi != null ? group[x].shizhi.toFixed(2) : 0);
}
_series.push(row);
_series.push(row2);
}
_legend.push({ name: "上证指数走势", icon: 'bar' });
//var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
row3.data.push(group[x].dapanshouyilv != null ? group[x].dapanshouyilv : 0);
}
_series.push(row3);
break;
case "oneAnd":
for (var i = 0, len = funds.length; i < len; i++) {
_legend.push({ name: data[i].基金简称+"定投", icon: 'bar' });
_legend.push({ name: data[i].基金简称+"一次性买入", icon: 'bar' });
//根据基金名称分组
//var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row = { name: data[i].基金简称+'定投', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
if (i == 0) {
_xAxis.push(group[x].fsrq);
}
flag0 ? row.data.push(group[x].DTshouyilv != null ? group[x].DTshouyilv.toFixed(2) : 0) : row.data.push(group[x].DTshizhi!=null?group[x].DTshizhi.toFixed(2):0);
}
var row2 = { name: data[i].基金简称+'一次性买入', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
if (i == 0) {
// _xAxis.push(group[x].fsrq);
}
flag0 ? row2.data.push(group[x].shouyilv != null ? group[x].shouyilv.toFixed(2) : 0) : row2.data.push(group[x].shizhi!=null?group[x].shizhi.toFixed(2):0);
}
_series.push(row);
_series.push(row2);
if (flag2 && flag0) {
_legend.push({ name: "上证指数走势", icon: 'bar' });
//var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
row3.data.push(group[x].dapanshouyilv!=null?group[x].dapanshouyilv:0);
}
_series.push(row3);
}
}
break;
case "AndZou":
for (var i = 0, len = funds.length; i < len; i++) {
_legend.push({ name: data[i].基金简称 + "定投", icon: 'bar' });
//根据基金名称分组
//var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row = { name: data[i].基金简称 + '定投', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
if (i == 0) {
_xAxis.push(group[x].fsrq);
}
row.data.push(group[x].DTshouyilv!=null?group[x].DTshouyilv.toFixed(2):0);
}
_series.push(row);
if (flag1)
{
_legend.push({ name: data[i].基金简称 + "一次性买入", icon: 'bar' });
//var group = data.filter(function (val) { return val.基金简称 == data[i].基金简称 });
var row2 = { name: data[i].基金简称 + '一次性买入', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
if (i == 0) {
// _xAxis.push(group[x].fsrq);
}
row2.data.push(group[x].shouyilv!=null?group[x].shouyilv.toFixed(2):0);
}
_series.push(row2);
}
}
_legend.push({ name: "上证指数走势", icon: 'bar' });
//var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
row3.data.push(group[x].dapanshouyilv!=null?group[x].dapanshouyilv:0);
}
_series.push(row3);
break;
}
option.legend.data = _legend;
option.xAxis.data = _xAxis;
option.series = _series;
myChart.setOption(option, true);
//图形放大缩小
window.onresize = function () {
var h = $(window.parent.parent.document).find("#nav").height();
var adjust = $(window.parent.parent).width() >= 1020 ? (92 + 94) : (120 + 94);
var calH = (h - adjust);
$("#profit").css('height', (calH - 158) + 'px');
myChart.resize();
//myChart.setOption(option);
};
//鼠标移动，联动数据格子里面的数据，跟着移动
//myChart.on('hover', function (params) {
//console.log(params.name);
//console.log('1');
//});
}重点2：根据提示框，联动下面的easyui表格进行实时更新显示
formatter: function (params) {
//console.log(params[0].name);
$("#dgCompare").datagrid('loadData', []);
var filter = [];
//val是一个某一个对象，类似lambda中xx概念
//filter = data.filter(function (val) { return params[0].name == val.fsrq });
filter = $(data).filter(function (val) { return params[0].name == this.fsrq });
//兼容ie考虑，不支持filter原生方法，转为jquery
//根据时间抽出对应数组后，顺序乱了，需要根据funds顺序排序一下，同时funds里面是带有引号
var filter_ = [];
for (var i = 0; i < funds.length; i++) {
for (var ii = 0; ii < filter.length; ii++) {
//console.log( filter[ii].jjdm + "-" +funds[i].substring(1,7));
//console.log(params[i].seriesName);
if (data[i].基金简称 == filter[ii].基金简称) {
filter_.push(filter[ii]);
}
}
}
//console.log(filter_);
filter = filter_;
for (var i = 0; i < filter.length; i++) {
//console.log(filter[i].基金代码);
$('#dgCompare').datagrid('insertRow', {
row: {
基金代码: filter[i].基金代码,
基金简称: filter[i].基金简称,
基金类型: filter[i].基金类型,
fsrq: filter[i].fsrq,
dwjz: filter[i].dwjz,
benjin: filter[i].benjin,
DTshizhi: filter[i].DTshizhi,
DTshouyi: filter[i].DTshouyi,
DTshouyilv: filter[i].DTshouyilv,
shizhi: filter[i].shizhi,
shouyi: filter[i].shouyi,
shouyilv: filter[i].shouyilv,
dapanshouyilv: filter[i].dapanshouyilv
}
});
}
//另外单独写一个，必须写上一个return,否则是空白的
var res = '';
//console.log(params);
for (var i = 0; i < params.length; i++) {
var param = params[i];
//var style = 'color: ' + param.color;
res += param.marker;
res += '<span style="">' + param.seriesName + '：' + param.value + '</span>';
res += '<br />';
}
return res;
}
},其他遇到其他相关小问题和解决 注意事项：
1：combobox当要选择输入内容时，聚焦便清空内容，
如下要写在onLoadSuccess里面，否则没有效果
$('#textFilter').combobox({
mode: 'remote',
url: '/Service/EasyUiService.ashx?Method=AutoComplete_JJBJ',
valueField: 'val',
textField: 'txt',
onLoadSuccess: function () {
$('#textFilter').next('.combo').find('input').focus(function () {
$('#textFilter').combobox('clear');//清空选中项
//$('#textFilter').combobox('loadData', {});//清空option选项
});
}
});
2：求出checked里面值，选择使用prop 特性，在最新版本jquery里做过说明，它返回false或true
而attr则返回undefined或是checked，
$('input[type=checkbox][name=AddOne]').eq(0).click(function () {
//flag1 = !flag1;
//console.log($(this).prop("checked"));
flag1 = $(this).prop("checked");
flag2 = $('input[type=checkbox][name=AddOne]').eq(1).prop("checked");
var b33 = $('input[type=radio][name=quxian]:checked').val() == 0 ? true : false;
//假如是b3为false，那么b2相当于为false
if (b33 == false) {
flag2 = false;
}
flag1 ? addProfitCompare(flag1, flag2, data, 'oneAnd', b33) : addProfitCompare(flag1, flag2, data, 'default', b33);
});
3：子窗体调用父窗体中其他子窗体方法和获取相关元素值
$(parent.frames["jjdtIframe"].frames["jjdtpage"].document)
ps:衍生一下，想起一个知识点，关于$和parent.$区别，是本页面里的$对象还是，父页面中$对象
任何知识一到了实际应用，就会变得复杂，要想学习战争， 最好是在战争中学习战争，编写代码也一样，最好的学习，便是
在开发实践中学习，
推荐使用给这些iframe定义name=“” 通过如下方式调用，很方便
$(parent.frames["jjdtIframe"].frames["jjdtpage"].document).find("#fundCodeStr").html($("#fundCodeStr").html());
$(parent.frames["jjdtIframe"].frames["jjdtpage"].document).find("#showdate").html(time_start);
$("#fundCodeStr").attr("value", fundCodeList);
$(parent.frames["jjdtIframe"].frames["jjdtpage"].document).find("#fundCodeStr").attr("value", $("#fundCodeStr").attr("value"));
parent.frames["jjdtIframe"].frames["jjdtpage"].parentReloadByIframe(data);
//parent.frames["jjdtIframe"].$('#dialog', parent.frames["jjdtIframe"].document).window('close');
//parent.frames["jjdtIframe"].$('#dialog1', parent.frames["jjdtIframe"].document).window('close');
parent.$('#dialog', parent.document).window('close');
4：单选按钮，偏上，原生的输入控件，和easyui控件，风格不一致解决css样式表copy一份如下：
：not(:first-child);和：not(first-type-p);伪选择器是有区别的
select{
height:26px;
border-radius:6px;
border: #95B8E7 1px solid !important;
}
input[type=text] {
height:22px;
border-radius:6px;
border: #95B8E7 1px solid !important;
}
#_easyui_textbox_input1 {
border: none !important;
}
input:focus,select:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
input[type='radio']:focus,input[type='checkbox']:focus{
outline: none;
border-color: #9ecaed;
/*box-shadow: 0 0 10px #9ecaed;*/
}
input[type='radio'],input[type='checkbox']:nth-child(-n+3){
height:15px;
vertical-align:bottom;
margin-bottom:-1px;
margin-top:-1px;
/*margin-left:-3px;*/
}
input[type='checkbox']{
height:15px;
vertical-align:bottom;
margin-bottom:5px;
margin-top:-1px;
/*margin-left:-3px;*/
}
.toolspan {
height:28px;
line-height:28px;
}
.Wdate {
border: #95B8E7 1px solid !important;
border-radius:6px;
height: 26px;
margin-top:-5px;
}5：重中之重：养成较好的编码习惯，一定要先判断再使用，无论是集合是否为空，还是元素本身是否为空，无论前端还是后台
直接导致图表卡顿，甚至页面假死
_legend.push({ name: "上证指数走势", icon: 'bar' });
//var group = data.filter(function (val) { return val.基金简称 == data[0].基金简称 });
var group = $(data).filter(function (val) { return this.基金简称 == data[i].基金简称 });
var row3 = { name: '上证指数走势', type: 'line', smooth: true, data: [] };
for (var x = 0, l = group.length; x < l; x++) {
row3.data.push(group[x].dapanshouyilv != null ? group[x].dapanshouyilv : 0);
}
_series.push(row3);
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，喜欢可以关注哦，谢谢大家对我的支持!