<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>
相关推荐
EasyUI图表插件Highcharts源码Demo(Java)
主要介绍了jQuery插件HighCharts绘制的基本折线图效果,结合实例形式分析了jQuery基于HighCharts插件绘制图形的具体实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了jQuery插件HighCharts绘制简单2D折线图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>HighCharts ...
EasyUI表格合并,及echarts折线图,导出折线图为图片
包含了highcharts.js、中文插件、导出插件、本地下载的插件。
里面包括jquery easyui基本操作,带中文API,ZTREE,树的加载,以及折线图,不清楚的,可以加我QQ,然后互相交流,谢谢,
利用servlet和json生成easyUI图表
是一些例子,其中使用到了js动态的生成下拉列表,input等技术手段。 使用了easyUI的时间控件及时间格式化方法和Highcharts
easyui.js插件, <script type="text/javascript" src="/js/easyui.js"> <script type="text/javascript" src="/js/easyui-lang-zh_CN.js"></script>
jquery easyui的压缩包,以及easyui的一些拓展插件包,包括Portal(制作图表、列表、球形图等),数据网格视图(DataGrid View),可编辑的数据网格(Editable DataGrid),表格编辑单元格(Cell Editing in ...
jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
easyUI+HighCharts+Aspose.cells+Aspose.word+Aspose.Pdf+WebService等的实例应用,easyui包括异步树加载,嵌套表格等,highcharts包括本地导出图片(仅限jpg)柱状,线状图例等,aspose.word、excel、pdf等使用的...
easyui分页插件,分页插件传递查询参数,和返回之后执行的方法
可以导出highcharts报表,word、pdf都可以,简单的Demo
1.根据json格式获取到数据,easyui样式列表显示 2.饼图根据表格数据动态生成 3.JavaScript中使用echarts插件
支持datagrid扩展,在一条记录下面可以嵌套一个子datagrid,切记要在页面中引入该js
前台使用easyui和jquery,后端使用ssm。dao层使用了mybaties和spring的jdbctemplte。项目中使用poi技术实现excel...使用highcharts来绘制分析图表。项目中还涉及导ftps密文文件服务器的使用。实现了文件的上传与下载。
可以做:用户名验证,包括规定输入的类型:字母或者数字或者特殊户号、密码验证、电话号码格式、指定字符的最小长度和最大长度、输入合法的邮箱格式......