您好,欢迎访问三七文档
当前位置:首页 > 建筑/环境 > 工程监理 > Easyui datagrid动态加载表格数据的方式
webHTML代码!--Easyui引用css文件--linktype=text/csshref=../../../module/Easyui/css/easyui.cssrel=stylesheet/linktype=text/csshref=../../../module/Easyui/css/icon.cssrel=stylesheet/linktype=text/csshref=../../../module/Easyui/css/color.cssrel=stylesheet/!--Easyui引用js文件--scripttype=text/javascriptsrc=../../../module/Easyui/jquery.min.js/scriptscripttype=text/javascriptsrc=../../../module/Easyui/jquery.easyui.min.js/scriptscripttype=text/javascriptsrc=../../../module/Easyui/easyui-lang-zh_CN.js/script!--HTML代码--tableid=tableclass=easyui-datagridstyle=width:99.9%;height:90.8%iconCls=icon-saverownumbers=truepagination=truetheadtr/tr/thead/table/***JS代码*加载EasyUI表格*事件触发先加载列名,异步加载数据*@table表格ID*@params加载数据后台所需参数*/varinit_table=function(table,params){//通过ajax请求生成的新的datagrid的列名$.ajax({url:/data/search/gs/title,//获取列名后台接口type:GET,dataType:'json',data:{table:table},rownumbers:true,//行号pagination:true,//分页控件pageSize:20,pageList:[10,20,30,50,100,150,200,300,500],success:function(data){//获取表头数据成功后,使用easyUi的datagrid去生成表格$('#'+table).datagrid({url:/data/search/gs/data,//获取数据后台接口method:GET,contentType:application/json,columns:data,//外层ajax请求的表头jsonqueryParams:{params},rownumbers:true,//行号pagination:true,//分页控件pageSize:20,pageList:[10,20,30,50,100,150,200,300,500],striped:true,loadMsg:正在努力加载数据,表格渲染中...,onLoadSuccess:function(data){console.log(data);if(data==null){//自定义页面信息加载框msgShow(error,请求数据为空!,'warning');}},});},error:function(e){msgShow(error,请求数据出错!,'error');}});}后台接口代码*获取列名后台接口*需要动态获取列名,首先在数据库建立两个对应表,一个是元数据表存放表的名称和数据库表名,一个是指标列名表,外键关联元数据表,存放对应表的列名。此接口通过查询元数据表得到所要展示的表的ID对应指标表的列名,封装成datagridcolumnJSON对象,外层通过两次List嵌套,返回column对象/***这里新建一个实体类datagridcolumn对象。*Createdbysun'fon2017-09-21.*/publicclassColumn{privateStringfield;//列字段名称privateStringtitle;//列标题文本//privateintwidth;//列的宽度不需要设置默认自适应privateStringalign;//指明如何对齐列数据。可以使用的值有:'left','right','center'publicStringgetField(){returnfield;}publicvoidsetField(Stringfield){this.field=field;}publicStringgetTitle(){returntitle;}publicvoidsetTitle(Stringtitle){this.title=title;}/*publicintgetWidth(){returnwidth;}publicvoidsetWidth(intwidth){this.width=width;}*/publicStringgetAlign(){returnalign;}publicvoidsetAlign(Stringalign){this.align=align;}}/***这里根据实际情况查询数据列名**模块化查询数据表表格字段名称*@paramtable数据表唯一标识mitmid*@returnListListJSON*JSON转换需引用com.alibaba.fastjson.JSON*和com.alibaba.fastjson.JSONObjectjar*/publicListgetTitle(Stringtable){Listtm_list=newArrayList();if(table==){//无参数默认查询第一张表字段名称table=1;}//此方法根据元数据表ID或名称得到对应指标也就是列名//查询sql为select+IDNECODE+,+IDNENAME+from+IDENMETA+where+MITMID+=?(IDENCODE指标表数据库列名,IDNENAME指标表要在前段显示的列名,IDENMATA指标表名,MITMID元数据表在指标表的外键)ListObject[]list=getIdenListByMit(table);if(list.isEmpty()){returnnull;}else{//自定义JSON格式Listcolumn=newArrayList();/***将列名转换为JSONObject格式*arr[0]*/for(Object[]arr:list){Columncolumns=newColumn();//arr[0]为IDENCODE指标表数据库列名columns.setField(arr[0].toString());//arr[1]为IDNENAME指标表显示列名(一般为中文)columns.setTitle(arr[1].toString());//columns.setWidth(width);一般不需要设置widthcolumns.setAlign(center);Stringjsons=JSON.toJSONString(columns);JSONObjectobject=JSON.parseObject(jsons);column.add(object);}tm_list.add(column);}returntm_list;}获取数据接口这是获取数据接口,由于需要查询多张表,并需要在页面指定查询条件,写的比较复杂,只是查询简单数据的同学可以简化此函数/***模块化查询数据*此函数返回EasyUI要求的datagrid数据对象格式*@paramtable元数据表唯一标识*@paramiden条件指标名称(单个)*@paramwhere查询条件,从数据字典获取(如:=,,)*@paramvalue查询阈值*@parampage第几页*@paramrows页面数据量*@returndatagrid数据对象ListJSONJSON转换函数同上需引用jar*/publicJSONObjectgetData(Stringtable,Stringiden,Stringwhere,Stringvalue,Stringpage,Stringrows){//外层封装listListresult=newArrayList();JSONObjectjsonObjects;//data数据封装map,通过map转换JSONObjectMapse_map=newHashMap();//计算分页intpageNumber=Integer.valueOf(page);intsize=Integer.valueOf(rows);intfirst=(pageNumber-1)*size;//默认查询第一个表if(table==){table=1;}//查询数据准备对象//元数据表对象TMicroTablemetatm=getTableByMitmid(table);//元数据数据库表名StringtableCode=tm.getTableName();//得到元数据表对应指标col1,col2,col3......Stringiden_code=getIdenByMit(table,0);//将指标转换为数组方便遍历String[]iden_code_array=iden_code.split(,);//得到查询数据sql(分页)selectskip'first'first'size'iden_codefromtableCode(这是informix数据库语法,oracle或mysql等自行组装分页sql)Stringdata_sql=getDataSql(first,size,tableCode,iden_code);//获取查询数据总数sql此处不必多做解释Stringcount_sql=getDataCountSql(tableCode);ListObject[]list;//计算查询条件where简单查询忽略此处//条件不为空if(value.length()!=0){//阈值不为空if(where.length()!=0||where!=null){intcondition=Integer.valueOf(where);TConditionDictionarydictionary=getMarkByDictionary(condition);data_sql+=where+iden++dictionary.getMark()+'+value+';count_sql+=where+iden++dictionary.getMark()+'+value+';}else{//阈值为空data_sql+=where+iden+isnull;count_sql+=where+iden+isnull;}}//计算count值ListStringcount_list=frDao.query(count_sql);intcount=0;if(count_list.size()0){Stringcount_str=count_list.get(0).toString();//System.out.println(count_str);count=Integer.valueOf(count_str);}elseSystem.out.println(查询总数为空:+count_sql);//计算data数据System.out.println(动态查询数据:+data_sql);list=frDao.query(data_sql);if(list.isEmpty()){System.out.println(查询数据为空!:+data_s
本文标题:Easyui datagrid动态加载表格数据的方式
链接地址:https://www.777doc.com/doc-3995105 .html