<script type="text/javascript">
function createHighcharts() {
$('#container').highcharts({
title: {
text: '一级标题'
},
subtitle: {
text: '二级标题11'
},
xAxis: {
categories: ['2012', '2013']
},
yAxis: {
title: {
text: 'Y轴单位 '
},
plotLines: [{
value: 0,
1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '单位'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
line: {
dataLabels: {
enabled: false
},
//鼠标指向图表点显示 图表点数据信息,默认显示
enableMouseTracking: true
}
},
//导出
exporting:{
enabled: false
},
//设置打印按钮为中文
lang:{ //这个是修改是上面 打印 下载的提升为汉字,如果在highcharts.js里面修改 简直累死
exportButtonTitle:'导出',
printButtonTitle:'打印',
downloadJPEG:"下载JPEG 图片",
downloadPDF:"下载PDF文档",
downloadPNG:"下载PNG 图片",
downloadSVG:"下载SVG 矢量图",
},
series: [{
name: '自定义方案1',
data: [13,12]
}, {
name: '自定义方案2',
data: [16,28]
}]
});
}
/*
*使用dhtmlx加载参数列表
*/
var xgridObj = {
parent:'listGrid',
image_path:'../dhtmlx/imgs/',
skin:'light',
columns:[
{label:' ',150,type:'ro',align:'center',sort:'na'},
{label:'A',150,type:'ed',align:'center',sort:'na'},
{label:'B',150,type:'ed',align:'center',sort:'na'},
{label:'C',150,type:'ed',align:'center',sort:'na'},
]};
//声明变量
var listGrid;
//拼接json字符串
var jsonStr = {rows:[
{id:'lv2012',data:['2012','1','8','4']},
{id:'lv2013',data:['2013','3','4','9']}
]};
/*
*构建dhtmlxgrid
*/
function buildXGrid(){
listGrid = new dhtmlXGridObject(xgridObj);
listGrid.attachEvent("onEditCell", doOnCellEdit);
var str = "{rows:[{id:'lv2012',data:['2012','1','8','4']},{id:'lv2013',data:['2013','3','4','9']}]}";
var j = eval('(' + str + ')');
listGrid.parse(j,"json");
}
/*
*鼠标滑进去就触碰事件
*/
var planComGrid ;
function mouseoverByPlanCom(id){
var strValue = $("input[id="+id+"]").val();
strValue = "{"+strValue.substr(strValue.indexOf(",")+1);
var jsonObjNewPlan = eval('(' + strValue + ')');
xgridObj.parent="dd";
xgridObj.columns[1].type='ro';
xgridObj.columns[2].type='ro';
xgridObj.columns[3].type='ro';
planComGrid = new dhtmlXGridObject(xgridObj);
planComGrid.parse(jsonObjNewPlan,"json");
}
function doOnCellEdit(stage, rowId, cellInd) {
if (stage == 0) {
//alert("进入stage0");
//protocolIt("User starting cell editing: row id is" + rowId + ", cell index is " + cellInd);
} else if (stage == 1) {
//alert("进入stage1");
//protocolIt("Cell editor opened");
//获取单元格值
var cellValue = listGrid.cells(rowId,cellInd).getValue();
$("#cellValue").val(cellValue);
} else if (stage == 2) {
//alert("进入stage2");
var stage2CellValue = listGrid.cells(rowId,cellInd).getValue();
var cellValue = $("#cellValue").val();
if(cellValue!=stage2CellValue){
$("#isCellEdit").val("1"); //0代表没有更改,1代表更改过
}
$("#cellValue").val("");
//protocolIt("Cell editor closed");
}
//重新赋空值
return true;
}
//添加方案
function addPlanFn(){
//0代表没有更改
if($("#isCellEdit").val()=="0"){
//alert("方案数据没有更改过,无须保存方案!");
layer.msg('方案数据没有更改过,无须保存方案!', 2, -1);
return false;
}
layer.prompt({type:0,title:'请输入方案名称'}, function(val){
splitJsonByPlan(val);
})
}
var planIndex = 1 ;
//拼接方案成json字符串
function splitJsonByPlan(val){
$("#isCellEdit").val("0");
//获取dhtmlxgrid单元格数据,组装成json格式
var jsonStrByPlan = "{planName:'"+val+"',rows:[";
listGrid.forEachRow(function(id){
var idStr = "{id:'"+id+"',";
var dataStr = "data:[";
for (var i=0; i<listGrid.getColumnCount(); i++){
dataStr = dataStr + "'" +listGrid.cells(id,i).getValue()+"',";
}
dataStr = dataStr.substr(0,dataStr.length-1)+"]}";
jsonStrByPlan = jsonStrByPlan + idStr + dataStr + ",";
})
jsonStrByPlan = jsonStrByPlan.substr(0,jsonStrByPlan.length-1) + "]}";
$("#planDiv").append("<dl class='hasPlan'><dd><span class='planIndexClass_"+planIndex+"'><span onmouseover='mouseoverByPlanCom(this.id)' id='jsonCheckbox_"+planIndex+"'>"+val+"</span> <input type='checkbox' planIndex='planIndexClass_"+planIndex+"' value=""+jsonStrByPlan+"" id='jsonCheckbox_"+planIndex+"' name='jsonCheckbox_"+planIndex+"'/></span></dd></dl>");
//$("span[id^='jsonCheckbox']").addClass("btn");
planIndex++;
}
//询问是否删除所选方案
function confirmDelPlanFn(){
$.layer({
shade : [0], //不显示遮罩
area : ['auto','auto'],
dialog : {
msg:'您确定删除所选模型方案吗?',
btns : 2,
type : 4,
btn : ['确定','取消'],
yes : function(){
delPlan();
layer.msg('成功删除!',2,1);
},
no : function(){
}
}
});
}
function delPlan(){
//获取所选复选框
$("input[id^='jsonCheckbox']").each(function (){
if(this.checked==true){
var id = this.id;
var planIndex = $("input[id="+id+"]").attr('planIndex');
$("span[class="+planIndex+"]").parent().parent().remove();
}
})
}
function openPlanCom(){
//加载层
$.layer({
type : 1,
title : "方案对比显示",
closeBtn : [0,true],
border : [0],
shadeClose : true,
offset : ['50', '20'],
move : ['.xubox_title' , true],
moveType: 1,
area : ['650px','auto'],
page : {dom : '#listGridLayer'}
});
}
</script>
//以上javascript 代码是分别基于 dhtml 和 highcharts 以及 jquery 1.8.2版本 。我本来想做的一个功能就是 用dhtml展示某个模型方案列表对应参数列表,用户更改模型方案个别参数,会重新保存这个模型方案。可以选中比对两个方案,比对用 图表来展示效果。这样更为直观。
这里就是页面的美观性很纠结。还有模型比对功能。做的难看。 只是功能性展示而已。 这个方案是自己在初期想到而写的,现在已经不用在方案中,只是觉得可惜 就记录下来。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LayerDIV</title>
<script type="text/javascript" src="../common/nui/jquery/jquery-1.8.1.min.js"></script>
<link href="../common/js/dhtmlx/dhtmlx/dhtmlxgrid_skins.css" rel="STYLESHEET" type="text/css"/>
<link href="../common/js/dhtmlx/dhtmlxgrid.css" rel="STYLESHEET" type="text/css"/>
<script src="../common/js/dhtmlx/dhtmlxcommon.js"></script>
<script src="../common/js/dhtmlx/dhtmlxgrid.js"></script>
<script src="../common/js/dhtmlx/dhtmlxgridcell.js"></script>
<script src="../common/js/layer/layer.js"></script>
<script src="../common/js/layer/layer.ext.js"></script>
<script type="text/javascript" src="../common/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="../common/js/highcharts/exporting.js"></script>
</head>
<body onload="buildXGrid()">
<!-- 隐藏值,用来判断是否更改过方案值 -->
<input type="hidden" id="isCellEdit" name="isCellEdit" value="0"/>
<input type="hidden" id="cellValue" name="cellValue" value=""/>
<span>方案名称:</span>
<select id="modelNameSel">
<option value="1">测试模型方案1</option>
<option value="2">测试模型方案2</option>
<option value="3">测试模型方案3</option>
<option value="4">测试模型方案4</option>
</select>
<span style="margin-left: 10px;">
<a href="#" class="btn" onclick="addPlanFn()">添加</a>
<a href="#" class="btn" onclick="confirmDelPlanFn()">删除</a>
<a href="#" class="btn" onclick="createHighcharts()">计算</a>
<a href="#" class="btn" onclick="planCompare()">加入对比</a></span>
<div id="listGridLayer" style="background-color:white">
<div id="listGrid" style="600px; height:150px;background-color:white"></div>
<div id="planDiv" style="600px; height:40px;"></div>
<div id="container" style="min- 600px; height: 150px; margin: 0 auto"></div>
<div id="dd" style="600px; height:100px;background-color:white"></div>
</div>
</body>
</html>
需要的文件可以到对应官网下载。