模型方案参数更改 对比栏入选模型方案 图表效果对比 已不在项目中使用

<script type="text/javascript">
    function createHighcharts() {
        $('#container').highcharts({
            title: {
                text: '一级标题'
            },
            subtitle: {
                text: '二级标题11'
            },
            xAxis: {
                categories: ['2012', '2013']
            },
            yAxis: {
                title: {
                    text: 'Y轴单位 '
                },
                plotLines: [{
                    value: 0,
                    width: 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:'   ',width:150,type:'ro',align:'center',sort:'na'},
            {label:'A',width:150,type:'ed',align:'center',sort:'na'}, 
            {label:'B',width:150,type:'ed',align:'center',sort:'na'},
            {label:'C',width: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 οnmοuseοver='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="width:600px; height:150px;background-color:white"></div>
            
        <div id="planDiv" style="width:600px; height:40px;"></div>
        <div id="container" style="min-width: 600px; height: 150px; margin: 0 auto"></div>
        <div id="dd" style="width:600px; height:100px;background-color:white"></div>
    </div>
</body>
</html>

需要的文件可以到对应官网下载。

 

转载于:https://www.cnblogs.com/spp0152/p/3628549.html