zoukankan      html  css  js  c++  java

  • JQuery 插件FlexiGrid 之完全配置与使用

    博客分类：

    jQuery配置管理jsonServlet数据结构 
    自己再做这个的时候.也是找了很多资料..但网上搜索了很多资料. 没有介绍的很全的.
    鄙人就在此献丑一下. 来全面的介绍一下JQuery FlexiGrid插件的配置和实用.
    本人很菜. 各位大拿看了这么菜的文章 就不要拍砖了.. 一笑而过.好吗?谢谢合作.
    首先.去下载FlexGrid http://www.flexigrid.info/
    下载完成后.解压开有__MACOSX和flexigrid两个文件夹
    主要使用flexigrid里面的文件
    flexgrid文件夹下文件如下

    ..
    准备工作完成后
    真正工作开始了
    在MyEclipse下新建Web project..
    把flexigrid包下所有的文件拷贝到WebRoot/下
    新建*.jsp页面
    body体中
    加入
    Jsp代码 复制代码 收藏代码
    1. <table id="flex1" style="display:none"></table>  
    <table id="flex1" style="display:none"></table>

    做完flexigrid控件的显示容器. 没有则不会显示控件
    页面引入控件代码
    Javascript代码 复制代码 收藏代码
    1. <table id="flex1" style="display:none"></table>   
    2.             <input id="hidden" type="hidden" name="hidden" value="null" />   
    3.             <script>   
    4.             $("#flex1").flexigrid   
    5.             (   
    6.             {   
    7.             url: '../ReleaseInfoServlet?hidden=manage',   
    8.             dataType: 'json',   
    9.             colModel : [   
    10.                 {display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center',hide: false},   
    11.                 {display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'center'},   
    12.                 {display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'center'},   
    13.                 {display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'center'},   
    14.             <!--{display: '信息内容', name : 'RICONTENT', width : 100, sortable : true, align: 'center'},-->   
    15.                 {display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'center'},   
    16.                 {display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'center'}                                                                 
    17.                 ],   
    18.             buttons : [   
    19.                 {name: '添加', bclass: 'add', onpress : button},   
    20.                 {name: '删除', bclass: 'delete', onpress : button},   
    21.                 {name: '修改', bclass: 'modify', onpress : button},                  
    22.                 {separator: true}   
    23.                 ],   
    24.             searchitems : [   
    25.                 {display: '信息编号', name : 'RINO', isdefault: true},   
    26.                 {display: '信息标题', name : 'RITITLE'},   
    27.                 {display: '信息类别', name : 'IC.ICNAME'},   
    28.                 {display: '发布作者', name : 'RIAUTHOR'}   
    29.                 ],   
    30.             sortname: "RINO",   
    31.             sortorder: "desc",   
    32.             usepager: true,   
    33.             title: '信息发布管理',   
    34.             useRp: true,   
    35.             rp: 20,   
    36.             showTableToggleBtn: true,   
    37.              780,   
    38.             height: 300   
    39.             }   
    40.             );   
    41.                
    42.             function button(com,grid)   
    43.             {   
    44.                 if (com=='删除')   
    45.                     {   
    46.                         ${"hidden"}.value="delete";   
    47.                         if($('.trSelected',grid).length==0){   
    48.                             alert("请选择要删除的数据");   
    49.                         }else{   
    50.                             if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?'))   
    51.                             {   
    52.                               var  id ="";   
    53.                              for(var i=0;i<$('.trSelected',grid).length;i++){   
    54.                                 if(i==$('.trSelected',grid).length-1){   
    55.                                     id += "id="+$('.trSelected',grid).find("td:first").eq(i).text();   
    56.                                 } else {   
    57.                                     id += "id="+$('.trSelected',grid).find("td:first").eq(i).text()+"&";   
    58.                                 }   
    59.                               }   
    60.                               window.location.href="../ReleaseInfoServlet?hidden="+${"hidden"}.value+"&"+id;   
    61.                           }   
    62.                        }   
    63.                     }   
    64.                 else if (com=='添加')   
    65.                     {   
    66.                         ${"hidden"}.value="add";   
    67.                         window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value;   
    68.                     }   
    69.                 else if (com=='修改')   
    70.                 {   
    71.                     ${"hidden"}.value="modify";   
    72.                     if($(".trSelected").length==1){   
    73.                         window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();   
    74.                     }else if($(".trSelected").length>1){   
    75.                         alert("请选择一个修改,不能同时修改多个");   
    76.                     }else if($(".trSelected").length==0){   
    77.                         alert("请选择一个您要修改的新闻信息")   
    78.                     }   
    79.                 }   
    80.             }    
    <table id="flex1" style="display:none"></table>
			<input id="hidden" type="hidden" name="hidden" value="null" />
			<script>
      		$("#flex1").flexigrid
			(
			{
			url: '../ReleaseInfoServlet?hidden=manage',
			dataType: 'json',
			colModel : [
				{display: '信息编号', name : 'RINO', width : 50, sortable : true, align: 'center',hide: false},
				{display: '信息标题', name : 'RITITLE', width : 250, sortable : true, align: 'center'},
				{display: '信息类别', name : 'IC.ICNAME', width : 100, sortable : true, align: 'center'},
				{display: '信息热点', name : 'RIHOTPOINT', width : 60, sortable : true, align: 'center'},
			<!--{display: '信息内容', name : 'RICONTENT', width : 100, sortable : true, align: 'center'},-->
				{display: '发布日期', name : 'RIDATE', width : 120, sortable : true, align: 'center'},
				{display: '发布作者', name : 'RIAUTHOR', width : 80, sortable : true, align: 'center'}																
				],
			buttons : [
				{name: '添加', bclass: 'add', onpress : button},
				{name: '删除', bclass: 'delete', onpress : button},
				{name: '修改', bclass: 'modify', onpress : button},				
				{separator: true}
				],
			searchitems : [
				{display: '信息编号', name : 'RINO', isdefault: true},
				{display: '信息标题', name : 'RITITLE'},
				{display: '信息类别', name : 'IC.ICNAME'},
				{display: '发布作者', name : 'RIAUTHOR'}
				],
			sortname: "RINO",
			sortorder: "desc",
			usepager: true,
			title: '信息发布管理',
			useRp: true,
			rp: 20,
			showTableToggleBtn: true,
			 780,
			height: 300
			}
			);
			
			function button(com,grid)
			{
				if (com=='删除')
					{
						${"hidden"}.value="delete";
						if($('.trSelected',grid).length==0){
							alert("请选择要删除的数据");
						}else{
							if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?'))
							{
							  var  id ="";
						     for(var i=0;i<$('.trSelected',grid).length;i++){
						     	if(i==$('.trSelected',grid).length-1){
						     		id += "id="+$('.trSelected',grid).find("td:first").eq(i).text();
						     	} else {
						     		id += "id="+$('.trSelected',grid).find("td:first").eq(i).text()+"&";
						        }
						      }
						      window.location.href="../ReleaseInfoServlet?hidden="+${"hidden"}.value+"&"+id;
					      }
					   }
					}
				else if (com=='添加')
					{
						${"hidden"}.value="add";
						window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value;
					}
				else if (com=='修改')
				{
					${"hidden"}.value="modify";
					if($(".trSelected").length==1){
						window.location.href="infoAdd.jsp?hidden="+${"hidden"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();
					}else if($(".trSelected").length>1){
						alert("请选择一个修改,不能同时修改多个");
					}else if($(".trSelected").length==0){
						alert("请选择一个您要修改的新闻信息")
					}
				}
			}

    flexgrid参数介绍:
    Javascript代码 复制代码 收藏代码
    1. height: 200, //flexigrid插件的高度，单位为px   
    2.  ‘auto’, //宽度值，auto表示根据每列的宽度自动计算   
    3. striped: true, //是否显示斑纹效果，默认是奇偶交互的形式   
    4. novstripe: false,   
    5. min 30, //列的最小宽度   
    6. minheight: 80, //列的最小高度   
    7. resizable: true, //是否可伸缩   
    8. url: false, //ajax方式对应的url地址   
    9. method: ‘POST’, // 数据发送方式   
    10. dataType: ‘xml’, // 数据加载的类型   
    11. errormsg: ‘Connection Error’,//错误提升信息   
    12. usepager: false, //是否分页   
    13. nowrap: true, //是否不换行   
    14. page: 1, //默认当前页   
    15. total: 1, //总页面数   
    16. useRp: true, //是否可以动态设置每页显示的结果数   
    17. rp: 15, // 每页默认的结果数   
    18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数   
    19. title: false,//是否包含标题   
    20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式   
    21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息   
    22. query: ”,//搜索查询的条件   
    23. qtype: ”,//搜索查询的类别   
    24. nomsg: ‘No items’,//无结果的提示信息   
    25. minColToggle: 1, //minimum allowed column to be hidden   
    26. showToggleBtn: true, //show or hide column toggle popup   
    27. hideOnSubmit: true,//隐藏提交   
    28. autoload: true,//自动加载   
    29. blockOpacity: 0.5,//透明度设置   
    30. onToggleCol: false,//当在行之间转换时   
    31. onChangeSort: false,//当改变排序时   
    32. onSuccess: false,//成功后执行   
    33. onSubmit: false // 调用自定义的计算函数   
    height: 200, //flexigrid插件的高度，单位为px
 ‘auto’, //宽度值，auto表示根据每列的宽度自动计算
striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
novstripe: false,
min 30, //列的最小宽度
minheight: 80, //列的最小高度
resizable: true, //是否可伸缩
url: false, //ajax方式对应的url地址
method: ‘POST’, // 数据发送方式
dataType: ‘xml’, // 数据加载的类型
errormsg: ‘Connection Error’,//错误提升信息
usepager: false, //是否分页
nowrap: true, //是否不换行
page: 1, //默认当前页
total: 1, //总页面数
useRp: true, //是否可以动态设置每页显示的结果数
rp: 15, // 每页默认的结果数
rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
title: false,//是否包含标题
pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式
procmsg: ‘Processing, please wait …’,//正在处理的提示信息
query: ”,//搜索查询的条件
qtype: ”,//搜索查询的类别
nomsg: ‘No items’,//无结果的提示信息
minColToggle: 1, //minimum allowed column to be hidden
showToggleBtn: true, //show or hide column toggle popup
hideOnSubmit: true,//隐藏提交
autoload: true,//自动加载
blockOpacity: 0.5,//透明度设置
onToggleCol: false,//当在行之间转换时
onChangeSort: false,//当改变排序时
onSuccess: false,//成功后执行
onSubmit: false // 调用自定义的计算函数


    注意:
    Head标签必须要引入
    Jsp代码 复制代码 收藏代码
    1. <link rel="stylesheet" href="css/flexigrid/flexigrid.css"  
    2.             type="text/css"></link>   
    3. <script type="text/javascript" src="lib/jquery/jquery.js"></script>   
    4. <script type="text/javascript" src="js/flexigrid.js"></script>  
    <link rel="stylesheet" href="css/flexigrid/flexigrid.css"
			type="text/css"></link>
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>

    jquery.js、flexigrid.css、flexigrid.js
    三个主要文件
    自己要根据自己的文件路径.去引入cssjs文件
    页面完成启动tomcat测试页面会不会显示控件.
    应该是没有问题的,只是没有数据

    主要的还是后台的操作
    这里由于时间关系只介绍select方法了.
    可以看到flex无刷新的路径是一个servlet.看看servlet做了些什么?
    Java代码 复制代码 收藏代码
    1. response.setContentType("text/html;charset=UTF-8");   
    2. ReleaseInfoDao rid = new ReleaseInfoDao();   
    3. String hidden = request.getParameter("hidden");   
    4. PrintWriter out = response.getWriter();  
    response.setContentType("text/html;charset=UTF-8");
ReleaseInfoDao rid = new ReleaseInfoDao();
String hidden = request.getParameter("hidden");
PrintWriter out = response.getWriter();

    首先接收路径传过来的hidden值.
    因为后面我会根据hidden值做各种操作.所以url重写了一些字段.大家可以不用如此.
    Java代码 复制代码 收藏代码
    1. if(hidden.equals("manage")){   
    2. //          获得当前页数   
    3.             String pageIndex = request.getParameter("page");   
    4. //          获得每页数据最大量   
    5.             String pageSize = request.getParameter("rp");   
    6. //          获得模糊查询文本输入框的值   
    7.             String query = new String(request.getParameter("query").getBytes("ISO8859-1"),"UTF-8");   
    8. //          获得模糊查询条件   
    9.             String qtype = request.getParameter("qtype");   
    10.             if(query==""||("").equals(query)){   
    11.                 Map pageInfo = new HashMap();   
    12.                 pageInfo.put("page", pageIndex);   
    13.                 pageInfo.put("total", rid.getReleaseInfoCount());   
    14. //              数据JSON格式化   
    15.                 String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);   
    16. //              response相关处理   
    17.                 response.setContentType("html/txt");   
    18.                 response.setCharacterEncoding("utf-8");      
    19.                 response.setHeader("Pragma", "no-cache");      
    20.                 response.setHeader("Cache-Control", "no-cache, must-revalidate");      
    21.                 response.setHeader("Pragma", "no-cache");      
    22.                 try {      
    23.                     response.getWriter().write(jsonStr);      
    24.                     response.getWriter().flush();      
    25.                     response.getWriter().close();   
    26.                 } catch (IOException e) {      
    27.                     e.printStackTrace();      
    28.                 }   
    29.             }else{   
    30.                 Map pageInfo = new HashMap();   
    31.                 pageInfo.put("page", pageIndex);   
    32.                 pageInfo.put("total", rid.getReleaseInfoCountLike(qtype, query));   
    33. //              数据JSON格式化   
    34.                 String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfoLike(Integer.parseInt(pageIndex), Integer.parseInt(pageSize), qtype, query), pageInfo);   
    35. //              response相关处理   
    36.                 response.setContentType("html/txt");   
    37.                 response.setCharacterEncoding("utf-8");      
    38.                 response.setHeader("Pragma", "no-cache");      
    39.                 response.setHeader("Cache-Control", "no-cache, must-revalidate");      
    40.                 response.setHeader("Pragma", "no-cache");      
    41.                 try {      
    42.                     response.getWriter().write(jsonStr);      
    43.                     response.getWriter().flush();      
    44.                     response.getWriter().close();   
    45.                 } catch (IOException e) {      
    46.                     e.printStackTrace();      
    47.                 }   
    48.             }   
    49.         }  
    if(hidden.equals("manage")){
//			获得当前页数
			String pageIndex = request.getParameter("page");
//			获得每页数据最大量
			String pageSize = request.getParameter("rp");
//			获得模糊查询文本输入框的值
			String query = new String(request.getParameter("query").getBytes("ISO8859-1"),"UTF-8");
//			获得模糊查询条件
			String qtype = request.getParameter("qtype");
			if(query==""||("").equals(query)){
				Map pageInfo = new HashMap();
				pageInfo.put("page", pageIndex);
				pageInfo.put("total", rid.getReleaseInfoCount());
//				数据JSON格式化
				String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);
//				response相关处理
				response.setContentType("html/txt");
				response.setCharacterEncoding("utf-8");   
		        response.setHeader("Pragma", "no-cache");   
		        response.setHeader("Cache-Control", "no-cache, must-revalidate");   
		        response.setHeader("Pragma", "no-cache");   
		        try {   
		            response.getWriter().write(jsonStr);   
		            response.getWriter().flush();   
		            response.getWriter().close();
		        } catch (IOException e) {   
		            e.printStackTrace();   
		        }
			}else{
				Map pageInfo = new HashMap();
				pageInfo.put("page", pageIndex);
				pageInfo.put("total", rid.getReleaseInfoCountLike(qtype, query));
//				数据JSON格式化
				String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfoLike(Integer.parseInt(pageIndex), Integer.parseInt(pageSize), qtype, query), pageInfo);
//				response相关处理
				response.setContentType("html/txt");
				response.setCharacterEncoding("utf-8");   
		        response.setHeader("Pragma", "no-cache");   
		        response.setHeader("Cache-Control", "no-cache, must-revalidate");   
		        response.setHeader("Pragma", "no-cache");   
		        try {   
		            response.getWriter().write(jsonStr);   
		            response.getWriter().flush();   
		            response.getWriter().close();
		        } catch (IOException e) {   
		            e.printStackTrace();   
		        }
			}
		}

    可以看到许多request.getParameter("***");
    是后去flexigrid控件的一些参数.
    大家可以到flexigrid.js文件里面看到这些参数.
    page//获取当前的页数.
    rp//每页显示多少行数据
    Javascript代码 复制代码 收藏代码
    1. rp: 20,  
    rp: 20,

    query//点击放大镜出现搜索功能,是Input文本框的值
    qtype//是搜索功能后面的select的值
    根据query的操作判断是模糊查询还是全部查询数据.
    Servlet全部代码看完了.
    看看.Dao层的数据层的代码吧.
    主要引用Dao的代码如下
    主要代码1.
    Java代码 复制代码 收藏代码
    1. pageInfo.put("total", rid.getReleaseInfoCount());   
    2. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);  
    pageInfo.put("total", rid.getReleaseInfoCount());
String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);

    rid为ReleaseInfoDao的实例对象(发布信息表)
    首先我们来看getReleaseInfoCount()方法
    Java代码 复制代码 收藏代码
    1. /**  
    2.      * 获得信息表所有的数据量,  
    3.      * 并返回数据个数  
    4.      * @return  
    5.      */  
    6.     public long getReleaseInfoCount(){   
    7.         long count =0l;   
    8.         QueryRunner queryRunner = new QueryRunner();   
    9.         String query = "select count(*) as num from TB_ReleaseInfo";   
    10.         try {   
    11.             Map map = (Map)queryRunner.query(DBConnection.getConnection(), query, new MapHandler());   
    12.             count = Long.parseLong(map.get("num").toString());   
    13.         } catch (SQLException e) {   
    14.             e.printStackTrace();   
    15.         } finally {   
    16.             DBConnection.close();   
    17.         }   
    18.         return count;   
    19.     }  
    /**
	 * 获得信息表所有的数据量,
	 * 并返回数据个数
	 * @return
	 */
	public long getReleaseInfoCount(){
		long count =0l;
		QueryRunner queryRunner = new QueryRunner();
		String query = "select count(*) as num from TB_ReleaseInfo";
		try {
			Map map = (Map)queryRunner.query(DBConnection.getConnection(), query, new MapHandler());
			count = Long.parseLong(map.get("num").toString());
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			DBConnection.close();
		}
		return count;
	}

    主要代码2.
    Java代码 复制代码 收藏代码
    1. String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);  
    String jsonStr = rid.creReleaseInfoJSON(rid.getReleaseInfo(Integer.parseInt(pageIndex), Integer.parseInt(pageSize)), pageInfo);

    这里看到返回的是json格式的数据
    主要Dao层方法为creReleaseInfoJSON();getReleaseInfo(int pageIndex,int pageSize);方法
    getReleaseInfo代码如下
    Java代码 复制代码 收藏代码
    1. /**  
    2.      * 分页查询  
    3.      * @param pageIndex  
    4.      * @param pageSize  
    5.      * @return  
    6.      */  
    7.     public List getReleaseInfo(int pageIndex,int pageSize){   
    8.         List releaseInfoList = new ArrayList();   
    9.         int beginIndex = (pageIndex-1)*pageSize;   
    10.         int endIndex = pageIndex*pageSize;   
    11.         QueryRunner queryRunner = new QueryRunner();   
    12.         String query = "select * from (" +   
    13.                 "select rownum rn,rino,rititle,ritype,icname,rihotpoint,ricontent,ridate,riauthor " +   
    14.                 "from (" +   
    15.                 "select ri.rino,ri.rititle,ri.ritype,ic.icname,ri.rihotpoint,ri.ricontent,ri.ridate,ri.riauthor" +   
    16.                 " from TB_ReleaseInfo ri ,TB_InfoCategroy ic where ri.ritype = ic.icno " +   
    17.                 "order by ri.rino desc) where rownum<=?) where rn>?";   
    18.         try {   
    19.             releaseInfoList = (List)queryRunner.query(DBConnection.getConnection(), query,new Object[]{new Integer(endIndex),new Integer(beginIndex)},new MapListHandler());   
    20.         } catch (SQLException e) {   
    21.             e.printStackTrace();   
    22.         } finally {   
    23.             DBConnection.close();   
    24.         }   
    25.         return releaseInfoList;   
    26.     }  
    /**
	 * 分页查询
	 * @param pageIndex
	 * @param pageSize
	 * @return
	 */
	public List getReleaseInfo(int pageIndex,int pageSize){
		List releaseInfoList = new ArrayList();
		int beginIndex = (pageIndex-1)*pageSize;
		int endIndex = pageIndex*pageSize;
		QueryRunner queryRunner = new QueryRunner();
		String query = "select * from (" +
				"select rownum rn,rino,rititle,ritype,icname,rihotpoint,ricontent,ridate,riauthor " +
				"from (" +
				"select ri.rino,ri.rititle,ri.ritype,ic.icname,ri.rihotpoint,ri.ricontent,ri.ridate,ri.riauthor" +
				" from TB_ReleaseInfo ri ,TB_InfoCategroy ic where ri.ritype = ic.icno " +
				"order by ri.rino desc) where rownum<=?) where rn>?";
		try {
			releaseInfoList = (List)queryRunner.query(DBConnection.getConnection(), query,new Object[]{new Integer(endIndex),new Integer(beginIndex)},new MapListHandler());
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			DBConnection.close();
		}
		return releaseInfoList;
	}

    上述方法的SQL为Oracle的分页查询.MS SQL、MySql等.其他数据库不适用.
    creReleaseInfoJSON代码如下:
    Java代码 复制代码 收藏代码
    1. /**  
    2.      * 数据JSON格式化  
    3.      * @param list  
    4.      * @param pageInfo  
    5.      * @return  
    6.      */  
    7.     public String creReleaseInfoJSON(List list,Map pageInfo){   
    8.         String jsonStr = "";   
    9.         List mapList = new ArrayList();   
    10.         for(int i=0;i<list.size();i++){   
    11.             Map cellMap = new HashMap();   
    12.             cellMap.put("id", ((Map)list.get(i)).get("RINo").toString());   
    13.             cellMap.put("cell", new Object[]{   
    14.                     ((Map)list.get(i)).get("RINo"),   
    15.                     ((Map)list.get(i)).get("RITitle"),   
    16.                     ((Map)list.get(i)).get("ICName"),   
    17.                     ((Map)list.get(i)).get("RIHotpoint"),   
    18.                     ((Map)list.get(i)).get("RIDATE"),   
    19.                     ((Map)list.get(i)).get("RIAuthor")   
    20.             });   
    21.             mapList.add(cellMap);   
    22.         }   
    23.         pageInfo.put("rows", mapList);   
    24.         JSONObject object = new JSONObject(pageInfo);   
    25.         jsonStr = object.toString();   
    26.         return jsonStr;   
    27.     }  
    /**
	 * 数据JSON格式化
	 * @param list
	 * @param pageInfo
	 * @return
	 */
	public String creReleaseInfoJSON(List list,Map pageInfo){
		String jsonStr = "";
		List mapList = new ArrayList();
		for(int i=0;i<list.size();i++){
			Map cellMap = new HashMap();
			cellMap.put("id", ((Map)list.get(i)).get("RINo").toString());
			cellMap.put("cell", new Object[]{
					((Map)list.get(i)).get("RINo"),
					((Map)list.get(i)).get("RITitle"),
					((Map)list.get(i)).get("ICName"),
					((Map)list.get(i)).get("RIHotpoint"),
					((Map)list.get(i)).get("RIDATE"),
					((Map)list.get(i)).get("RIAuthor")
			});
			mapList.add(cellMap);
		}
		pageInfo.put("rows", mapList);
		JSONObject object = new JSONObject(pageInfo);
		jsonStr = object.toString();
		return jsonStr;
	}

    返回的JSON格式的数据:
    Java代码 复制代码 收藏代码
    1. jsonStr{"total":3,"page":"1","rows":[{"id":"8","cell":[8,"啊啊","什么玩意","否","2009-06-24 14:30:11","admin"]},{"id":"7","cell":[7,"来挑心底1","媒体声音","是","2009-06-24 14:29:55","admin"]},{"id":"3","cell":[3,"新茶品","最热新闻","否","2009-06-24 13:55:00","admin"]}]}  
    jsonStr{"total":3,"page":"1","rows":[{"id":"8","cell":[8,"啊啊","什么玩意","否","2009-06-24 14:30:11","admin"]},{"id":"7","cell":[7,"来挑心底1","媒体声音","是","2009-06-24 14:29:55","admin"]},{"id":"3","cell":[3,"新茶品","最热新闻","否","2009-06-24 13:55:00","admin"]}]}

    JSONObject代码在下面的附件里有.
    还有需要解释的地方.
    大家可以看到dao
    并没有
    Connection
    PreparedStatement
    ResultSet
    等对象.
    我操作数据使用的是.
    commons-dbutils-1.1.jar(下面的附件中也包含有.)

    整体的介绍完了.
    可以说比较考验个人读代码的能力.个人细心的能力.

    上述代码.应该是没有问题的.
    因为我测试一点问题没有.
    可能是因为您配置或者书写代码的问题..
    可能会出现这样那样的困难.
    也请不要进行人身攻击.
    在做这个的时候.我也碰到许多问题。
    耐心些。 没有解决不了的问题.

    鄙人写代码很烂. 各位大牛们 就不要拍砖了. 凑活看就行了.

    如果什么问题.
    请到本人博客留言.
    只要是本人会的
    定会尽力解决.

    花费半个点的功夫.整理一下.. 各位笑纳了.
    遗留问题:点击标题.自动排序的问题.. 如果哪位哥们解决了.. 请在本人博客留言.
    十分感谢您的帮助

    Ps: 很感谢 ayeah 同学..
        在此以前. 一直认为是flexgrid. 实际正确的拼写为flexigrid. 十分低级的错误.
        呵呵. 还望各位同学见谅.
    项目源码:请到这里下载JQuery 插件FlexiGrid 之完全配置与使用-续{附Demo+Data}
  • 相关阅读:
    echars柱状图修改每条柱的颜色
    vue打开到新页面，并传递参数
    彻底了解websocket原理
    bind和on的区别
    Vue如何更新子组件
    Vue父子组件生命过程
    使用css3实现动画来开启GPU加速
    前端技术体系
    Vue中的~（静态资源处理）
    垂直居中的办法小结
  • 原文地址：https://www.cnblogs.com/wzh123/p/3398392.html
Copyright © 2011-2022 走看看