图表转换

Js

// 图表转换方法：用于切换图与表。
    var init = false;
    function toggle(){
        if ($("#container").is(":hidden")) {
            $("#container").show();
            $("#refshbtn").show();
            $("#prm_div").show();
            $("#report_ui").hide();
            $("#tb").hide();
            updateChartData();
            f();
        }else {
            $("#container").hide();
            $("#refshbtn").hide();
            $("#prm_div").hide();
            $("#report_ui").show();
            $("#tb").show();
            if (!init) {
                $('#tt').datagrid({view:myview,rownumbers:true,
                    singleSelect:true,
                    toolbar: '#tb',
                    onClickRow: onClickRow});
                init = true;
            }
            $("#tt").datagrid('resize', {
                width: $(document.body)[0].clientWidth
            });
            f();
        }
    }
   // 更新图表数据方法：  把编辑表之后的数据更新到图上。
    function updateChartData() {
        var series = $('#${divId}').highcharts().series;
        var data = $("#tt").datagrid("getData").rows;
        <s:iterator var="item" value="#request.chartsVO.series" status="status">
            var id = '${item.id}';
            var dataAry = new Array();
            for (var j = 0; j < data.length; j++) {
                var childAry = new Array();
                <s:if test="%{#request.chartsVO.xaxisVO.xaxisType == 'datetime'}">
                if(data[j][id]==""){
                    childAry.push(parseInt(data[j].RQ), null);
                }else{
                    childAry.push(parseInt(data[j].RQ), parseFloat(data[j][id]));
                }
                    
                </s:if>
                <s:if test="%{#request.chartsVO.xaxisVO.xaxisType == 'category'}">
                if(data[j][id]==""){
                    childAry.push(data[j].RQ,null);
                }else{
                    childAry.push(data[j].RQ, parseFloat(data[j][id]));
                }
                </s:if>
                dataAry.push(childAry);
            }
            series[${status.index}].setData(dataAry, true);
        </s:iterator>
        $('#${divId}').highcharts().reflow();
    }
    //指标参数选择,刷新曲线图的方法。
    function checkDateToBack(){
        
            if($(".btn1").filter(":checked").length==0){
                alert("指标参数不能为空，请勾选！");
            }else{
                $("#cx").attr("action","${pageContext.request.contextPath}/iwell.disposition.monitor_1.0/show_charts.action?jh=${chartsVO.jh }&wellType=${chartsVO.wellType }&queryCategory=${chartsVO.queryCategory }&begRq=${begRq}&endRq=${endRq}");
                $("#cx").submit();
            }
    }
    //结束编辑。
    var editIndex = undefined;
    function endEditing(){
        if (editIndex == undefined){return true}
        if ($('#tt').datagrid('validateRow', editIndex)){
            
            $('#tt').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    //编辑方法,点击一行对表数据进行编辑。
    function onClickRow(index){
        if (editIndex != index){
            if (endEditing()){
                $('#tt').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#tt').datagrid('selectRow', editIndex);
            }
        }
    }
    //保存.对表编辑后的数据保存
    function accept(){
        if (endEditing()){
            $('#tt').datagrid('acceptChanges');
        }
    }
    //撤销
    function reject(){
        $('#tt').datagrid('rejectChanges');
        editIndex = undefined;
    }
    function f() {
        parent.window.setWinHeight(parent.window.document.getElementById("frame_${queryCategory}"));
    }
    var win_height, interval, cnt = 0;
    function dif() {
        var cur_height = document.body.offsetHeight;
        if (cur_height != win_height || cnt > 10) {
            clearInterval(interval);
            f();
        }
        cnt++;
    }
    var myview = $.extend({},$.fn.datagrid.defaults.view,{
        onBeforeRender:function(target){
            win_height = document.body.offsetHeight;
            interval = setInterval("dif()",1000);
        }
    });
  </script>

 

<!--图表转换按钮、 指标参数栏、 绘制曲线图的容器 -->
	<div align="left">
	<span><a href="javascript:checkDateToBack();void(0);" id="refshbtn" class="fmbutton">刷新曲线图</a></span>
	<span><a href="javascript:void(0);" id="ss" class="fmbutton" onclick="toggle()">图表转换</a></span>
	</div>
	<div id="prm_div" style="font-size: 12px;" align="left">
		<form id="cx"  method="post">
			<s:iterator var="item" value="#request.optionPrm" status="status">
				<span><input class="btn1" type="checkbox" name="checkPrm" onclick="checkDateToBack()" style="margin: 3px 1px 0px 3px;" value="${item.id }" ${item.checked } />${item.text }</span>
			</s:iterator>
		</form>
	</div>
	<div id="container" style="min-width: 300px; height: ${divHeight}px; margin: 0 auto"></div>
	<!-- 表 -->
	<div id="tb" style="height:auto; display:none;">
	 <a href="javascript:void(0);" class="easyui-linkbutton"  data-options="iconCls:'icon-save',plain:true" onclick="accept()">确定</a>
	 <a href="javascript:void(0);" class="easyui-linkbutton"  data-options="iconCls:'icon-undo',plain:true" onclick="reject()">撤销</a>
	 <s:if test='#request.queryCategory=="R"'>
	 <a href="javascript:void(0);" class="easyui-linkbutton"  data-options="iconCls:'icon-redo',plain:true" onclick="exportExcel('${pageContext.request.contextPath}','tt','${jh}井的日度曲线.xls')">导出Excel</a>
	 </s:if>
	 <s:else>
	 <a href="javascript:void(0);" class="easyui-linkbutton"  data-options="iconCls:'icon-redo',plain:true" onclick="exportExcel('${pageContext.request.contextPath}','tt','${jh}井的月度曲线.xls')">导出Excel</a>
	 </s:else>
	</div>
	<div id="report_ui"  style="width：100%; height:auto; margin: 0 auto; display:none;">
	     <table id="tt" style="width：100%;height:auto;">
	     </table>
	</div>