转自:http:[email protected]/blog/static/89053109201042633457665/
?
现在我们项目要用到extgrid插件、jgcharts与ssh框架结合，经过几天研究终于成功，现将过程及实现写入下面。
准备工作：下载extgrid插件、jgcharts插件，这里我用到的extgrid插件为ext-3.2.1，经过精简得如下目录结构：
?
其中图片自己从css中找出来用，以上只有extgrid-revise.js为自己写，其他在ext-3.2.1插件找。
至于jgcharts插件，网上下载个jia包放入工程下即可
将准备好的插件放入工程webRoot下，下面我们正式工作：
第一步：准备好ssh框架，这里框架主要是用到为前台提供json，我先写action? ，代码如下：
@ParentPackage("json-default")
@Results (", name = "json"),
???? @Result(name="success",type="chain",location="ext_grid")})
public class ExtGridAction extends ActionSupport{
????? private List<Flexigrid> flexigridList;????//后台需要的list集合
????? @Autowired
????? private FlexigridService flexigridService;??? //自动注入Service
????? @Override
????? public String execute() {
??????????? return "list";
????? }
????? /**
??????? * 前台ajax要调用的方法
?????? */
?????? public String?findData(){
???????????? flexigridList = flexigridService.findAll();
???????????? return "json";
????????}
????? //为节省篇幅，set与get方法在此就不写了?
}
至此后台就不需要什么工作了，马上进行前台js编写
?
第二步：在写js之前写一个jsp，如下：
1、jsp中分别引用??ext-all.css、PanelResizer.css、grid-examples.css、ext-base.js、ext-all.js、ProgressBarPager.js、PanelResizer.js、PagingMemoryProxy.js 、jgcharts.js，这些css与js除jgcharts.js做图js外在上面图中都有，除此还要引用jquery-1.3.2.js，自己写的js如下：extgrid_revise.js、lmChart.js、poptu.js 。?????
除引用以上js外，还要在页面中写如下结构：
?<head>
??? <script type="text/javascript">
???????? //先创建个chart类,参数含义在lmchart.js中
????????? var lmChart = new LmChart("产品-媒体类型月报",300,800);
????????? //为chart类添加列
????????? lmChart.addColumn("id","ID");
????????? lmChart.addColumn("name","名称");
??????????lmChart.addColumn("sort","类别");
????????? lmChart.addColumn("hotSpot","热点");
????????//lmChart.addColumn("publishDate","发布日期");
????????? lmChart.addColumn("content","内容");???? //此处重要,生成报表调用的方法,参数含义在extgrid_revise.js中
????? revise("ext_grid/ext_grid!findData","flexigridList",lmChart,"grid-example");
??? </script>
? </head>
? <body>
<!--????下面是extgrid附着span???? -->
???<span id="grid-example"></span>
???<br>
???<input type="button" value="柱状图形" onclick="column();">
???<input type="button" value="饼状图形" onclick="pie();">
???<input type="button" value="趋势图形" onclick="tide();">
? ???<br>
<!--???下面是jgcharts附着span????-->
???<span id="bar1"></span>
? </body>
</html>
第二步：首先定义chart类，即写lmChart.js，其完整代码如下：
?/**
? * 定义 LmChart 对象
? * @param name 对象名,即图表名
? * @param height 图表高
? * @param width 图表宽
? */
?function LmChart(name,height,width)
?{
???? this._name = name;??//图表名
???? this._height = height; //图表高
?????this._width = width;?//图表宽
??? ?this._Columns = new Object(); //列对象数组数组
??? ?this._indexes=new Array();//列对象顺序数组
?}
?
?/**
? * 为对象添加一列
? * @param id? 列的id名
? * @param name? 列名
? * @param value? 列值
? */
?LmChart.prototype.addColumn = function(id,name)
?{
?????? this._Columns[id] = new LmColumn(id,name);
???????this._indexes[this._indexes.length]=id;
?????? indColShow[indColShow.length] = id;
?}
?/**
? * 隐藏一列
? * @param name? 列的名字
? */
?LmChart.prototype.hideColumn = function(name)
?{
?????? var bool = false;
?????? $.each(this._indexes,function(k,v){
????????????? if(v==name){
??????????????????? bool = true;
?????????????? }
??????? });
??????? if(bool){
?????????????? var _num? = this._indexes.length;
?????????????? //从indexes里面删除一个,后面的前移.
?????????????? for(var i=0;i<parseInt(_num);i++){
?????????????????????? if(this._indexes[i] == name){
???????????????????????????? for(var j=i;j<parseInt(_num);j++){
??????????????????????????????????? this._indexes[j] = this._indexes[j+1];
?????????????? ????????????? }
???????????????????????? }
???????? ??????? }
???????????????? if(_num>0){
???????????????????????? this._indexes.pop();?//将数组中最后的元素删除
????????????????? }
?????????? }
?}
?
?var indColShow = new Array();//保存交换位置后的列顺序
?
?/**
? * 根据列名将隐藏的一列显示
? * @param name? 列的名字
? */
?LmChart.prototype.showColumn = function(name)
?{
????????var bool = true;
??????? $.each(this._indexes,function(k,v){
??????????? ?if(v==name){
?????????????????? bool = false;
????????????? }
????????? });
????????? if(bool){
??????????????? var aa = new Array();
??????????????? var _ind = this._indexes;
??????????????? //根据this._Columns列顺序,向indexes里面添加一个新列,后面的后移.
??????????????? $.each(indColShow,function(key,val){
???????????????????????? $.each(_ind,function(kk,vv){
???????????????????????????????? if(val==vv||val==name){
?????????????????????????????????????????? var bo = true;
?????????????????????????????????????????? $.each(aa,function(va){
??????????????????????????????????????????????????? if(this==val) bo=false;
??????????????????????????????????????????? });
??????????????????????????????????????????? if(bo) aa[aa.length] = val;
????????????????????????????????? ?}
?????????????????????????? });
????????????????? });
????????????????? this._indexes = aa;
???????? ?}
?}
?
?/**
? * 交换列
? * @param newColumn? 新列
? */
?LmChart.prototype.changeIndex = function(newColumn,newOrder)
?{
????????? this._indexes = newColumn;
????????? indColShow = newOrder;
?}
?//输出结果（测试用）
?LmChart.prototype.output = function()
?{
??//根据_indexes,将一个个node输出去.
??$.each(this._indexes,function(key,val){
???alert(key);
???alert(val);
??});
?}
?
?/**
? * 列对象
? * @param id? 列id
? * @param name? 列名
? */
?function LmColumn(id,name){
?????? this._id = id;
?????? this._name = name;
???????this._values = new Object();
?}
?/**
? * 添加列数组
? * @param {} val
? */
?LmColumn.prototype.setValues=function(val){
??????? this._values = val;
?}
?第三部、写extgrid_revise.js 重要的js，主要在这里实现与extgrid结合，完全代码如下：
var _obj;//全局变量? 存放LmChart 对象
/**
?*??主要js函数
?* @param _url? ajax访问的url地址
?* @param _list 返回的list集合名
?* @param _lmChart LmChart 对象
?* @param _render 将此列表赋予的div 的id名
?*/
function revise(_url,_list,_lmChart,_render){
?
?? _obj = _lmChart;
?? //因为我没有截获ext取json的方法,我自己用ajax重新调用了一下获取json,来为图表传值
?? acquisitionJSON(_url,_list,_lmChart);
?
?? Ext.onReady(function(){??? //重要的ext方法
?????? ?// 创建数据源
??????? var store = new Ext.data.Store({??????
?????????????????? proxy: new Ext.data.HttpProxy({??????
???????????????????????? ,?????? //前台传过来的url
???????????????????????? method: 'GET'?????
?????????????????? }),?
?????????????????? reader: new Ext.data.JsonReader({
??????? ???????????????? root: _list,????//前台传过来的list集合名
?????????????????????????id: 'id'?????
?????????????????? },jsonMappingData(_lmChart))??????//动态取的数据映射
?????????? });
?????????? var column = new Ext.grid.ColumnModel(columnModelByJSON(_lmChart));???? //动态取的列值
?????????? column.defaultSortable = true;???????
?????????? // 创建表格
?????????? var grid = new Ext.grid.GridPanel({??????
???????????????????? height:_lmChart._height,???? //表格高度
?????????????????????width:_lmChart._width,??????? //表格宽度
???????????????????? title:_lmChart._name,???????? //表格名称
???????????????????? store: store,???????? //表格数据源
?????????????????????cm: column,????? //表格列
???????????????????? stateEvents:['hiddenchange'],
?????????????????????view:new MyGridView(_lmChart),
???????????????????? listeners:{ 'beforerender':function(grid){????? //监听事件
??????????????????????????? grid.on('hiddenchange',function(cm,columnIndex,hidden){??
??????????????????????????????????? showOrHiddenColumn(_lmChart,cm,columnIndex,hidden);? //调用显示隐藏函数
??????????????????????????? },this);??
??????????????????????????? //托管事件??
??????????????????????????? grid.relayEvents(grid.getColumnModel(),['hiddenchange']);??
????????????????????? }??}??
???????????? ?});???????
????????????? store.load();//初始化数据
????????????? grid.render(_render);??????//??将表格放到前台span上
??? });
}
MyGridView=Ext.extend(Ext.grid.GridView,{??? //定义自己的grid视图
??????? renderHeaders : function(){
???????????????? var c = this.cm, h = this.templates, e = h.hcell, b = [], j = {}, a = c
????.?????????????????????? getColumnCount(), g = a - 1;
???????????????? var index = new Array();???? //自定义数组,存放当前有多少列
???????????????? for (var d = 0; d < a; d++) {
?????????????????????? index[index.length] = c.getColumnId(d);//将当前列存入数组
?????????????????????? j.id = c.getColumnId(d);
?????????????????????? j.value = c.getColumnHeader(d) || "";
????????????????????? ?j.style = this.getColumnStyle(d, true);
?????????????????????? j.tooltip = this.getColumnTooltip(d);
????????????????????? ?j.css = d === 0 ? "x-grid3-cell-first " : (d == g
??????????????????????????????????? ? "x-grid3-cell-last "
?????????????????????? ?: "");
?????????????????????? ?if (c.config[d].align == "right") {
???????????????????????????????? j.istyle = "padding-right:16px"
??????????????????????? } else {
????????????????????????????????delete j.istyle
??????????????????????? }
??????????????????????????????? b[b.length] = e.apply(j)
???????????????? ?}
??
???????????????? reviseColumnOrder(index);//修改列顺序
??
??????????????? ?return h.header.apply({
???????????????????????????? cells : b.join(""),
???????????????????????????? tstyle : "width:" + this.getTotalWidth() + ";"
???????????????? })
??????????}
});
/**
?* json映射表中字符数据
?* @param {} _lmCha
?* @return {}
?*/
function jsonMappingData(_lmCha){
???????? var _jr="[";
???????? $.each(_lmCha._indexes,function(k,v){
????????????????? _jr += "{name: '"+v+"', mapping: '"+v+"'},";
????????? });
??????? ?if(_jr.length>1){
??????????????????_jr = _jr.substring(0,_jr.length-1);
??????? ?}
??????? ?_jr+="]";
?????????return eval("("+_jr+")");???? //将字符串转换为json,重要
}
/**
?* 根据json创建表格结构
?* @param {} _lmCha
?* @return {}
?*/
function columnModelByJSON(_lmCha){
????????? var _jr="[";
????????? var _aa = new Array();
????????? var i = 0;
????????? $.each(_lmCha._indexes,function(k,v){
???????????????? var _arr = new Array();
???????????????? _arr[0] = v;
??????????????? $.each(_lmCha._Columns[v],function(key,val){
??????????????????????? ?if(key=='_name') _arr[1]=val;
??????????????? });
?????????????? _aa[i] = _arr;
??????????????? i++;
?????????? });
????????? var _wid =? parseInt(_lmCha._width-25)/i;
????????? if(_aa.length>1){
????????????????var j = 0;
??????????????? $.each(_aa,function(kk,vv){
?????????????????????? var va = vv;
?????????????????????? if(j==0)
???????????????????????????? _jr += "{id:'"+va[0]+"',header: '"+va[1]+"', width: "+_wid+", sortable: true, dataIndex: '"+va[0]+"'},";
????????????????????? else
???????????????????????????? _jr += "{header: '"+va[1]+"', width: "+_wid+", sortable: true, dataIndex: '"+va[0]+"'},";
??????????????? });
??????????? }
??????????? if(_jr.length>1){
???????????????? _jr = _jr.substring(0,_jr.length-1);
??????????? }
??????????? _jr+="]";
??????????? ?return eval("("+_jr+")");??? //将字符串转换为json,重要
}
/**
?* 显示或隐藏列
?* @param? _lmChart LmChart 对象
?* @param? cm
?* @param? columnIndex
?* @param? hidden? false显示 true隐藏
?*/
function showOrHiddenColumn(_lmChart,cm,columnIndex,hidden){
????????? if(hidden){
??????????????? lmChart.hideColumn(cm.getDataIndex(columnIndex));? //隐藏列
????????? }
????????? if(!hidden){
??????????????? lmChart.showColumn(cm.getDataIndex(columnIndex)); //将隐藏的列显示
????????? }
??????????jgChartDisposeLmChart(_lmChart);?? //调用生成图表函数
}
/**
?* 修改列的顺序
?* @param {} newOrder? 新顺序
?*/
function reviseColumnOrder(newOrder){
??????? var _order = new Array();
??????? $.each(newOrder,function(k,v){
?????????????? $.each(_obj._indexes,function(kk,vv){
????????????????????? if(v==vv) _order[_order.length]=v;?
?????????????? });
?????????});
???????? _obj.changeIndex(_order,newOrder);?? //调用调整列顺序函数
?????????jgChartDisposeLmChart(_obj);//调用生成图表函数
}
/**
?* 自己获取JSON，用来生成图表
?* @param _url? ajax访问的url地址
?* @param _list 返回的list集合名
?* @param _lmChart LmChart 对象
?*/
function acquisitionJSON(_url,_list,_lmChart){
???????? jQuery.ajax({
????????????? type:"POST",
???????????? ?url:_url,
????????????? dataType:"json",?
??????????????global:false,
????????????? success: function(_json){?
??????????????????????var _jsonList;
????????????????????? $.each(_json,function(k,v){
???????????????????????????? var kk = k+"";
?????????????????????????????if(kk==_list){
?????????????????????????????????? _jsonList = v;
?????????????????????????????}
????????????????????? });
????????????????????? sealColumnByJSON(_jsonList,_lmChart);
????????????????????? jgChartDisposeLmChart(_lmChart);?? //调用生成图表函数
?????????????? }?
????????}); ?
}
/**
?* 用取得的json封装列数组
?* @param _jsonList
?* @param _lmChart
?*/
function sealColumnByJSON(_jsonList,_lmChart){
??????? var lmcol = _lmChart._Columns;
????????$.each(lmcol,function(k,v){
??????????????? var _colArray = new Array();
?????????????? ?$.each(_jsonList,function(kj,vj){
?????????????????????? $.each(vj,function(kvk,vjv){
???????????????????????????? if(k==kvk){
??????????????????????????????????? _colArray[_colArray.length] = parseInt(vjv);
???????????????????????????? }
??????????????????????? });
???????????????? });
???????????????? $.each(v,function(kk,vv){
??????????????????????? if(k==vv){
????????????????????????????? _lmChart._Columns[k].setValues(_colArray);
??????????????????????? }
???????????????? ?});
?????????? });
}
?/** ? ?
最后写poptu.js图表js，完整代码如下:
?var columns=new Array();
?var lmCha;
?var savePic =null;
?function jgChartDisposeLmChart(_lmChart){?????//生成图表的主要方法
????????? var cols=new Array();
????????? $.each(_lmChart._indexes,function(k,v){
???????????????? $.each(_lmChart._Columns,function(kk,vv){
??????????????????????? if(v==kk){
?????????????????????????????? cols[cols.length] = vv;
??????????????????????? }
????????????????? });
????????????});
??????????? columns = cols;
????????????lmCha = _lmChart;
??????????? if(savePic == "column"){????
????????????????? column();
??????????? }else if(savePic == "pie"){
??????????????????pie();
????????????}else if(savePic == "tide"){
????????????????? tide();
? ????????? }else{
????????????????? column();
??????????? }
?}
? * 柱状图数据数组对象
? */
?function outputColumnDataArray()
?{?
??????? var data=new Array();
????????var sum = 0;
??????? for(var i=0;i<columns.length;i++){
?????????????? var column= columns[i];
?????????????? for(var j = 0; j<column._values.length ; j++){
????????????????????? sum += column._values[j];
?????????????? }
?????????????? data[i]=sum;
?????????????? sum = 0;
?????????}
???????? return data;
?}
??
?/**
? * 获取图形分布的名称
? */
??function outputNameArray(){
????????? var name = new Array();
????????? for(var i=0;i<columns.length;i++){
???????????????? var column= columns[i];
?????????????????name[i] = column._name;
????????? }
?? ?????? return name;
??}
?
?/**
? * 趋势图数据数组对象
? */
?function outputTideDataArray(){
??????????? var len = columns.length;
????????????var subLen=columns[0]._values.length;
????????????var data = new Array(subLen);
??????????? for(var i = 0 ; i < subLen ; i++){
?????????????????? data[i] = new Array(len);
??????????? }
??????????? for(var i = 0 ; i < subLen ; i++){
????????????????????for(var j = 0 ; j < len ; j++){
????????????????????????? data[i][j]? =? columns[j]._values[i];
??????????????????? }
???????????? }
???????????? return data;
?}
?
??function column(){???? //柱状图
????????? $("#bar1").html("");
????????? var d = outputColumnDataArray();
??????????var n = outputNameArray();
??????????var api = new jGCharts.Api();
???????? ?var i=0;
????????? $.each(lmCha._indexes,function(k,v){?? ?i++;?? });
??????????var _wid =? parseInt(lmCha._width-100)/i;
??????????jQuery('<img>').attr('src', api.make({
??????????????? data :? [d],
????????????????size : lmCha._width+"x"+lmCha._height, //default 300x200 (width x height) - maximum size 300,000 pixels
??????????????? bar_width : parseInt(_wid/2),//default 20? 条形宽度
????????????????bar_spacing : parseInt(_wid/2), //default 1 条形间距
??????????????? grid : true, //default false 网格
??????????????? title :lmCha._name, //default false 图表标题
??????????????? title_color : '000000', //标题颜色
??????????????? title_size? : 20 , //default 10?
????????????????legend : n, //default none? - 图例
??????????????? axis_labels : ['统计'] //X轴显示文本
??????????? ?})).appendTo("#bar1");?
???????????? savePic = "column";
??}
??function pie(){???? //饼图
???????????$("#bar1").html("");
?????????? var n = outputNameArray();
?????????? var d = outputColumnDataArray();
???????????var api = new jGCharts.Api();
?????????? jQuery('<img>').attr('src', api.make({
?????????????????? data :? d,
???????????????????type : "p3",
?????????????????? size : lmCha._width+"x"+lmCha._height, //default 300x200 (width x height) - maximum size 300,000 pixels
?????????????????? title : lmCha._name, //default false 图表标题
?????????????????? title_color : '000000', //标题颜色
?????????????????? title_size? : 20 , //default 10?
???????????????????axis_labels : n //X轴显示文本
???????????? })).appendTo("#bar1");?
???????????? savePic = "pie";
??}
??function tide(){???? //趋势图
?????????? $("#bar1").html("");
?? ??????? var d =? outputTideDataArray();
?????????? var n = outputNameArray();
?????????? var api = new jGCharts.Api();?
???????????jQuery('<img>').attr('src', api.make({
????????????????? data : d ,
????????????????? type : "lc",
????????????????? grid : true, //default false 网格
??????????????????size : lmCha._width+"x"+lmCha._height, //default 300x200 (width x height) - maximum size 300,000 pixels
???????????????? ?title :lmCha._name, //default false 图表标题?
??????????????????title_color : '000000', //标题颜色
????????????????? title_size? : 20 , //default 10
???????????????? ?legend : n,
????????????????? axis_labels : ['周一', '周二', '周三','周四','周五','周六','周日'] //X轴显示文本
?????????????})).appendTo("#bar1");?
???????????? savePic = "tide";
??}
至此大功告成,现将效果图发布一张,供参考: