<body>
<div class="easyui-tabs" style="width: auto; height: 470px">
<div title="Tab01" style="padding: 10px">
<div id="container"></div>
</div>
<div title="Tab02" style="padding: 10px">
<h2>Row Editing in DataGrid</h2>
<p>Click the row to start editing.</p>
<div style="margin: 20px 0;"></div>
<table id="dg" class="easyui-datagrid"
title="Row Editing in DataGrid" style="width: 700px; height: auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: $.sxThx.contextPath + '/UserAction.do?method=getEmailInfoList',
method: 'get',
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'keyid',width:80">Item ID</th>
<%-- <th
data-options="field:'productid',width:100,
formatter:function(value,row){
return row.productname;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'productname',
method:'get',
url:'products.json',
required:true
}
}">Product</th>--%>
<th
data-options="field:'email_mail',width:80,align:'right',editor:'validatebox'">List
Price</th>
<th
data-options="field:'email_tel',width:80,align:'right',editor:{type:'numberbox'}">Unit
Cost</th>
<th data-options="field:'email_user_name',width:250,editor:'validatebox'">Attribute</th>
<%--<th
data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>--%>
</tr>
</thead>
</table>
<div id="tb" style="height: auto">
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-remove',plain:true"
onclick="removeit()">Remove</a> <a href="javascript:void(0)"
class="easyui-linkbutton"
data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton"
data-options="iconCls:'icon-search',plain:true"
onclick="getChanges()">GetChanges</a>
</div>
</div>
<div title="Tab03" style="padding: 10px">
<div>
<label for="keyword">year:</label>
<select id="year" class="easyui-combobox" name="dept" style="width:100px;">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<a href="javascript:void(0);"onclick="statisticByYear();"class="button button-rounded button-flat-primary">
<i class="test-icon-search icon-padding-right5"></i>query</a><br>
</div>
<div id="highchartsLine" >
</div>
</div>
<div title="Tab04" style="padding: 10px">
<div>
<label for="keyword">year:</label>
<select id="years" class="easyui-combobox" name="dept" style="width:100px;">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select><br>
<label for="keyword">funcName1:</label>
<input id="FuncName1" name="FuncName" class="easyui-combobox" data-options="editable: false, valueField:'CODEVALUE', textField:'CODENAME', data: [{CODENAME: 'admin',CODEVALUE: '0'},{CODENAME: 'hujing',CODEVALUE: '1'},{CODENAME: 'huyangzh',CODEVALUE: '2',selected:true}]" style="width:150px;"/>
<label for="keyword">funcName2:</label>
<input id="FuncName2" name="FuncName" class="easyui-combobox" data-options="editable: false, valueField:'CODEVALUE', textField:'CODENAME', data: [{CODENAME: 'admin',CODEVALUE: '0'},{CODENAME: 'hujing',CODEVALUE: '1'},{CODENAME: 'huyangzh',CODEVALUE: '2',selected:true}]" style="width:150px;"/>
<label for="keyword">funcName3:</label>
<input id="FuncName3" name="FuncName" class="easyui-combobox" data-options="editable: false, valueField:'CODEVALUE', textField:'CODENAME', data: [{CODENAME: 'admin',CODEVALUE: '0'},{CODENAME: 'hujing',CODEVALUE: '1'},{CODENAME: 'huyangzh',CODEVALUE: '2',selected:true}]" style="width:150px;"/><br>
<a href="javascript:void(0);" onclick="highchartsColumn();" class="button button-rounded button-flat-primary">
<i class="test-icon-search icon-padding-right5"></i>query</a>
<a href="javascript:void(0);" onclick="clearForm();" class="button button-rounded button-flat-primary">
<i class="test-icon-search icon-padding-right5"></i>clear</a><br>
</div>
<div id="highchartsColumn" style="">
</div>
</div>
</div>
<script type="text/javascript"
src="<%=request.getContextPath()%>/common/plugins/jquery.iframe.post.form/jquery.iframe.post.form.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/pages/demo/demoStatistic.js"></script>
</body>
10
$(function (){
//饼图
statisticFuncType();
});
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
/*var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});
var productname = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['productname'] = productname;*/
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function append(){
if (endEditing()){
$('#dg').datagrid('appendRow',{status:'P'});
editIndex = $('#dg').datagrid('getRows').length;
alert(editIndex);
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
// 饼图 --------------------
function statisticFuncType () {
$.ajax({
async : false,
type : 'POST',
url : $.test.contextPath + "/DemoAction.do?method=statisticFuncName",
dataType : 'json',
success : function(data) {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1,//null,//设置边框
plotShadow: false
},
title: {
text: 'Pic'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',//类型饼图
name: 'Browser share',//鼠标移动到饼图时显示的名字
data: [
['路径导航', data.路径导航],
['位置描述', data.位置描述],
['地址匹配', data.地址匹配],
{ name:'空间计算',
y:data.空间计算,
sliced: true,
selected: true
}
]
}]
});
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});
};
//折线图-------------------------------------
function statisticByYear() {
var year = $("#year").combobox("getValue");
$.ajax({
async : false,
type : 'POST',
url : $.test.contextPath + "/DemoAction.do?method=statisticByYears",
data : "year="+year,
dataType : 'json',
success : function(data) {
$('#highchartsLine').highcharts({
title: {
text: '登录折线图',
x: -20 //center
},
subtitle: {
text: data.title,
x: -20
},
xAxis: {
categories: data.name,
title:{
text: '月份(月)'
}
},
yAxis: {
title: {
text: '登录 (次)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '次'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
/* point: {
events: {
click: function () {
var month = this.category;
//window.location.href= $.test.contextPath + "/DemoAction.do?method=beginStatisticByMonth&year="+year+"&month="+month;
}
}
},*/
name: 'admin登录',
data: data.value
},{
name: 'hujing登录',
data: data.value2
}]
});
}
});
};
//柱状图 ----------------------------------------
function highchartsColumn(){
var year = $("#years").combobox("getValue");
var funcName1 = $("#FuncName1").combobox("getText");
var funcName2 = $("#FuncName2").combobox("getText");
var funcName3 = $("#FuncName3").combobox("getText");
var params = {"years" : year, "funcName1" : funcName1, "funcName2" : funcName2, "funcName3" : funcName3};
$.ajax({
async : false,
type : 'POST',
url : $.test.contextPath + "/DemoAction.do?method=statisticByFuncName",
data : params,
dataType : 'json',
success : function(data) {
$('#highchartsColumn').highcharts({
chart: {
type: 'column'
},
title: {
text: data.title
},
subtitle: {
text: data.subTitle
},
xAxis: {
categories: data.name
},
yAxis: {
min: 0,
title: {
text: data.text
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: data.name1,
data: data.value1
}, {
name: data.name2,
data: data.value2
}, {
name: data.name3,
data: data.value3
}]
});
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
function init(){
$('#FuncName1').combobox({
url: $.test.contextPath + "/LogAction.do?method=getFuncName",
valueField: 'Value',
textField: 'Text',
onChange: function(newValue, oldValue) {
}
});
}
/**
* 清空查询条件
*/
function clearForm() {
$("#FuncName1").combobox("setValue", '');
$("#FuncName2").combobox("setValue", '');
$("#FuncName3").combobox("setValue", '');
}
10
public class DemoAction extends DispatchAction{
private DemoDao demoDao;
public DemoDao getDemoDao() {
return demoDao;
}
public void setDemoDao(DemoDao demoDao) {
this.demoDao = demoDao;
}
public ActionForward begin(ActionMapping mapping, ActionForm form,HttpServletRequest request,
HttpServletResponse response) throws Exception {
return mapping.findForward("begin");
}
/**
* 饼状图
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws IOException
* @throws Exception
*/
public ActionForward statisticFuncName(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception{
String[] funcNames = {"路径导航","位置描述","地址匹配","空间计算"};
JSONObject jo = new JSONObject();
int num = 0;
for(int i = 0; i < funcNames.length; i++){
num = demoDao.getPicTypeData(funcNames[i]);
jo.put(funcNames[i], num);
}
RiaUtils.writeJsonText2Page(jo.toString(), response);
return null;
}
/**
* 折线图
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward statisticByYears(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response) throws Exception{
String year = request.getParameter("year");
String beginTime = null;
String beginTime2 = null;
String endTime = null;
String endTime2 = null;
Date firstTime = null;
Date firstTime2 = null;
String funcName = "登录";
LogStatisticFilter lsf = new LogStatisticFilter();
String openTime = year+"/01/01 00:00:00";
SimpleDateFormat formatter = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
JSONObject json = new JSONObject();
int[] num = new int[12];
int[] num2 = new int[12];
String[] name = {"01", "02", "03", "04", "05", "06","07", "08", "09", "10", "11", "12"};
for(int i = 0; i<12; i++){
firstTime = formatter.parse(openTime);
beginTime = openTime;
Calendar calendar = Calendar.getInstance();
calendar.setTime(firstTime);
calendar.add(calendar.MONTH, 1);
openTime = formatter.format(calendar.getTime());
endTime = openTime;
lsf.setBeginTime(formatter.parse(beginTime));
lsf.setEndTime(formatter.parse(endTime));
lsf.setFunctionName(funcName);
lsf.setRoleName("admin");
num[i] = demoDao.statisticByYears(lsf);
}
json.put("title", year+"年");
json.put("name", name);
json.put("value", num);
String openTime2 = year+"/01/01 00:00:00";
for(int i = 0; i<12; i++){
firstTime2 = formatter.parse(openTime2);
beginTime2 = openTime2;
Calendar calendar = Calendar.getInstance();
calendar.setTime(firstTime2);
calendar.add(calendar.MONTH, 1);
openTime2 = formatter.format(calendar.getTime());
endTime2 = openTime2;
lsf.setBeginTime(formatter.parse(beginTime2));
lsf.setEndTime(formatter.parse(endTime2));
lsf.setFunctionName(funcName);
lsf.setRoleName("hujing");
num2[i] = demoDao.statisticByYears(lsf);
}
json.put("title", year+"年");
json.put("name", name);
json.put("value2", num2);
RiaUtils.writeJsonText2Page(json.toString(), response);
return null;
}
/**
* 柱形图
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward statisticByFuncName(ActionMapping mapping, ActionForm form, HttpServletRequest request,
HttpServletResponse response)throws Exception{
String funcName1 = request.getParameter("funcName1");
String funcName2 = request.getParameter("funcName2");
String funcName3 = request.getParameter("funcName3");
String year = request.getParameter("years");
String beginTime = null;
String endTime = null;
Date firstTime = null;
String openTime = year+"/01/01 00:00:00";
SimpleDateFormat formatter = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
LogStatisticFilter lsf = new LogStatisticFilter();
int[] value1 = new int[12];
int[] value2 = new int[12];
int[] value3 = new int[12];
String[] name = {"Jan","Feb","Mar","Apr","May","Jun","July","Aug","Sept","Oct","Nov","Dec"};
for(int i = 0; i<12; i++){
firstTime = formatter.parse(openTime);
beginTime = openTime;
Calendar calendar = Calendar.getInstance();
calendar.setTime(firstTime);
calendar.add(calendar.MONTH, 1);
openTime = formatter.format(calendar.getTime());
endTime = openTime;
lsf.setBeginTime(formatter.parse(beginTime));
lsf.setEndTime(formatter.parse(endTime));
if(funcName1 != null){
lsf.setFunctionName(funcName1);
lsf.setRoleName(funcName1);
value1[i] = demoDao.statisticByFuncName(lsf);
}
if(funcName2 != null){
lsf.setFunctionName(funcName2);
lsf.setRoleName(funcName2);
value2[i] = demoDao.statisticByFuncName(lsf);
}
if(funcName3 != null){
lsf.setFunctionName(funcName3);
lsf.setRoleName(funcName3);
value3[i] = demoDao.statisticByFuncName(lsf);
}
}
JSONObject jo = new JSONObject();
jo.put("value1", value1);
jo.put("value2", value2);
jo.put("value3", value3);
jo.put("name1", funcName1);
jo.put("name2", funcName2);
jo.put("name3", funcName3);
jo.put("title", "用户登录柱形图");
jo.put("subTitle", year);
jo.put("text", "次");
jo.put("name", name);
RiaUtils.writeJsonText2Page(jo.toString(), response);
return null;
}
}
10
@Override
public int getPicTypeData(String funcName) {
return (Integer) sqlSession.selectOne("com.demo.T_BUSINES_LOG.statisticFnucName", funcName);
}
@Override
public int statisticByYears(LogStatisticFilter statisticfilter) {
return (Integer)sqlSession.selectOne("com.demo.T_BUSINES_LOG.statisticByYears" , statisticfilter);
}
10
<select id="statisticFnucName" parameterType="String" resultType="java.lang.Integer">
select count(*)
from T_BU_LOG T
where T.SE_TYPE=#{funcName}
</select>
<select id="statisticByYears" parameterType="com.demo.LogStatisticFilter" resultType="java.lang.Integer">
SELECT COUNT(1)
FROM T_OPE_LOG T
WHERE 1 = 1
<![CDATA[AND T.OPERATION_TIME > #{beginTime}
AND T.OPE_DATE < #{endTime}
AND T.USER_NAME = #{roleName}]]>
</select>
相关推荐
Highcharts是一款功能强大的JavaScript图表库，它用于在Web页面上绘制交互式的柱状图、折线图、饼图等各种图表。在Java开发中，我们通常会结合EasyUI框架来使用Highcharts，因为EasyUI提供了丰富的组件和易于使用的...
在Web开发中，我们可以利用各种图表库，如ECharts、Highcharts等，结合JavaScript和CSS实现折线图的绘制。例如，如果你已经掌握了jQuery和EasyUI，那么可以进一步学习如何使用这些图表库与EasyUI集成，为你的应用...
而Echarts是一款由百度开发的开源数据可视化库，它支持各种图表类型，如折线图、柱状图、饼图等，为数据分析和展示提供了强大的支持。 在"EasyUI表格合并"这一主题中，我们主要讨论的是如何使用EasyUI的datagrid...
主要介绍了jQuery插件HighCharts绘制的基本折线图效果,结合实例形式分析了jQuery基于HighCharts插件绘制图形的具体实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种类型的交互式图表，包括折线图、柱状图、饼图、散点图等，为数据可视化提供了强大的支持。本压缩包资源主要包含以下几个核心...
本文实例讲述了jQuery插件HighCharts绘制简单2D折线图效果。分享给大家供大家参考，具体如下： 1、实例代码： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>HighCharts ...
这是一款强大的JavaScript图表库，用于在Web页面上生成各种动态、交互的统计图表，如折线图、柱状图、饼图、散点图等。`Highcharts`支持大量的自定义选项，可以灵活地调整颜色、样式、数据标签等，使得数据可视化...
"使用easyui表格数据动态生成饼图"的主题涉及到前端开发中的几个关键点：EasyUI框架、数据处理以及JavaScript图表库ECharts。下面我们将深入探讨这些知识点。 首先，EasyUI是一个基于jQuery的UI库，它提供了一系列...
EasyUI是一个基于jQuery的UI库，提供了丰富的组件，包括表格、表单、树形菜单、对话框等，以及各种图表。在本案例中，我们将使用EasyUI的图表组件来显示从Servlet通过JSON获取的数据。 步骤如下： 1. **数据准备**...
jquery easyui的压缩包，以及easyui的一些拓展插件包，包括Portal（制作图表、列表、球形图等），数据网格视图（DataGrid View），可编辑的数据网格（Editable DataGrid），表格编辑单元格（Cell Editing in ...
easyui.js插件， <script type="text/javascript" src="/js/easyui.js"> <script type="text/javascript" src="/js/easyui-lang-zh_CN.js"></script>
7. **插件扩展**：除了内置组件，jQuery EasyUI 还允许开发人员创建自定义插件，以满足特定项目的需求。社区也提供了许多第三方插件，增强了框架的功能。 8. **版本更新与维护**：jQuery EasyUI 持续更新，修复已知...
easyUI+HighCharts+Aspose.cells+Aspose.word+Aspose.Pdf+WebService等的实例应用，easyui包括异步树加载，嵌套表格等，highcharts包括本地导出图片（仅限jpg）柱状，线状图例等，aspose.word、excel、pdf等使用的...
easyui分页插件，分页插件传递查询参数，和返回之后执行的方法
在“easyui 树形结构样例”中，我们主要探讨的是如何使用EasyUI实现一个可操作的树形结构，特别是在下拉框中展示的数据结构。这种树形结构在很多业务场景中都很常见，如组织结构管理、文件目录浏览等。 首先，我们...
EasyUI提供了一系列预先封装的组件，如表格、下拉菜单、对话框、树形控件等，大大减少了开发时间和复杂性。 在EasyUI中，每个组件都有其特定的属性、方法和事件，这些是理解和使用EasyUI的关键知识点。 1. **属性*...
可以导出highcharts报表，word、pdf都可以，简单的Demo
支持datagrid扩展，在一条记录下面可以嵌套一个子datagrid，切记要在页面中引入该js
前台使用easyui和jquery，后端使用ssm。dao层使用了mybaties和spring的jdbctemplte。项目中使用poi技术实现excel...使用highcharts来绘制分析图表。项目中还涉及导ftps密文文件服务器的使用。实现了文件的上传与下载。