前端获取列表型数据的方法！前后端代码都有！

最新推荐文章于 2024-05-09 03:42:19 发布

你的阿旭啊

最新推荐文章于 2024-05-09 03:42:19 发布

阅读量2.3k

点赞数

分类专栏：方法文章标签： java javascript jquery

本文链接：https://blog.csdn.net/yx1151903456/article/details/106471420

版权

方法专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端需要的是列表性数据。
如下图
在这里插入图片描述
以下是前端的代码

 <div class="eight_table">
                <table id="qy_corpfxy_list">
                    <tbody>
                    <tr>
                        <th>行号</th>
                        <th>企业名称</th>
                        <th>单位数量</th>
                        <th>安全生产天数</th>
                        <th>系统使用得分</th>
                        <th>事故事件</th>
                        <th>
                            <span class="yinhuan">隐患</span>
                            <span class="zdqb">重大/全部</span>
                        </th>
                        <th>整改率</th>
                        <th>
                            <span class="yinhuan">风险源</span>
                            <span class="zdqb">较大以上/全部</span>
                        </th>
                        <th>
                            <span class="yinhuan">高风险作业</span>
                            <span class="zdqb">当前/全部</span>
                        </th>
                        <th>违章</th>
                        <th>
                            <span class="yinhuan">安全投入</span>
                            <span class="zdqb">已投入/计划</span>
                        </th>
                        <th>特种设备</th>
                        <th>特种人员</th>
                        <th>培训完成率</th>
                        <th>当前项目</th>
                    </tr>

                    </tbody></table>
                <div class="sjkb_list_bottom">
                    <ul id="qy_corpfxy_list_fy">
                        <li>&lt;</li>
                        <li class="curs">1</li>
                        <li>&gt;</li>
                    </ul>

                </div>
            </div>

以下是前端调用的初始化方法

此处的param可以是空的，因为在后端做了处理
function getQYCorpsFxyList(param){
        $.ajax({
            url:'<%=request.getContextPath()%>/dsjkb/dsjkbweb/getGsxxtjListInCorp',
            dataType:'json',
            type:'post',
            data:{json:param},
            success:function(data) {
                var pageBean = JSON.parse(data.msg);
                var dataList=pageBean.rows;
                var html='<tr><th>行号</th><th>企业名称</th><th>单位数量</th><th>安全生产天数</th><th>系统使用得分</th><th>事故事件</th>'+
                    '<th><span  class="yinhuan">隐患</span><span  class="zdqb">重大/全部</span></th><th>整改率</th><th><span  class="yinhuan">风险源</span><span  class="zdqb">较大以上/全部</span>' +
                    '</th><th><span  class="yinhuan">高风险作业</span><span  class="zdqb">当前/全部</span>' +
                    '</th><th>违章</th><th><span  class="yinhuan">安全投入</span><span  class="zdqb">已投入/计划</span>' +
                    '</th><th>特种设备</th><th>特种人员</th><th>培训完成率</th><th>当前项目</th></tr>';
                qy_corpids=[];
                for(var i=0;i<dataList.length;i++){
                    var corp_id =dataList[i].CORPS+'';
                    qy_corpids.push(corp_id);
                    var IS_BB=dataList[i].IS_BB;
                    var XTSYDF=dataList[i].XTSYDF;
                    var bb='';
                    if(IS_BB == 1){
                        bb='(本部)';
                    }
                    if(XTSYDF == undefined){
                        XTSYDF=0;
                    }
                    var CORP_SIMPLE_NAME=dataList[i].CORP_SIMPLE_NAME;
                    if(CORP_SIMPLE_NAME == null){
                        CORP_SIMPLE_NAME=dataList[i].CORP_NAME;
                    }
                    html+='<tr><td>'+(i+1)+'</td><td><span class="t_title" style="text-align: center;" >'+CORP_SIMPLE_NAME+bb+'</span></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="Qyfindcorpid('+i+','+dataList[i].DWSL+');">'+dataList[i].DWSL+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyAqscts('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].AQSCTS+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyXtsydf('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+XTSYDF+'</a></td>' +

                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QySgsj('+dataList[i].CORPS+','+dataList[i].DWSL+','+dataList[i].IS_BB+');">'+dataList[i].SGSJSL+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyYhsl('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].ZDYHSL+'/'+dataList[i].YHSL+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyYhzgl('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].YHZGL+'%'+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyFxy('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].JDWXYSL+'/'+dataList[i].FXYSL+'</a></td>' +

                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyGfxzy('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].GFXZYZXSL+'/'+dataList[i].GFXZYZS+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyWzsl('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].WZSL+'</a></td>' +

                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyAqtr('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].AQTRSJJE+'/'+dataList[i].AQTRJHJE+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyTzsb('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].TZSBSL+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyTzry('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].TZRYSL+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyPxwcl('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].PXWCL+'%'+'</a></td>' +
                        '<td><a href="javascript:void(0)" class="arrzd" οnclick="QyDqxm('+dataList[i].CORPS+','+dataList[i].DWSL+');">'+dataList[i].DQXMSL+'</a></td></tr>';
                }
                html+=getQYCorpsFxyListHjData(JSON.stringify(param1Model));//这个方法统计的是前端页面列表下方的合计
                $('#qy_corpfxy_list').empty();
                $('#qy_corpfxy_list').append(html);
            }
        })
    }

后端的方法及返回方式

  @RequestMapping(value = "/getGsxxtjListInCorp")
    public void getGsxxtjListInCorp(HttpServletResponse response, HttpSession session, String json) {
        try {
            Map<String, String> mJson = (Map<String, String>) JsonUtils.toObject(json);
            if (mJson == null) {
                mJson = new HashMap<>();
            }
            String corps = mJson.get("corps");
            LoginUserInfo loginUserInfo = (LoginUserInfo) session.getAttribute(SessionConstant.SESSION_LOGINUSER);
            if ((corps == null || "".equals(corps)) && session != null) {
                Map<String, String> userFunc = basicUserFuncService.getUserFunc(loginUserInfo.getUserId().toString(), "dsjkbck", "1");
                corps = userFunc.get("corpsAll");
                mJson.put("corps", corps);
            }
            mJson.put("userId",loginUserInfo.getUserId().toString());
            PageBean pageBean = dsjkbService.getGsxxtjListInCorp(mJson);
            JsonMsg msg = new JsonMsg(true, JsonUtils.toJson(pageBean));
            ResponseUtils.renderHtml(response, JsonUtils.toJson(msg));
        } catch (Exception e) {
            logger.error("操作失败！", e);
            JsonMsg msg = new JsonMsg(false, "操作失败！");
            ResponseUtils.renderHtml(response, JsonUtils.toJson(msg));
        }
    }

下面我将详细说明后端方法的每个方法

1.首先是JsonUtils类
public class JsonUtils {

	private static final Logger log = LoggerFactory.getLogger(JsonUtils.class);
	
	private static JsonMapper jsonMapper = new JsonMapper();
	
	public static String toJson(Object obj){
		String text = jsonMapper.toJson(obj);
		log.debug(text);
		return text;
	}
	public static Object toObject(String str){
	    Object obj = jsonMapper.fromJson(str,Object.class);
	    return obj;
    }
}
2.LoginUserInfo这个实体是我们定义在session中的一个实体
3.PageBean类
public class PageBean implements Paginable {
	
	public static final int DEF_COUNT = 20;
	public static final String ASC = "asc";
	public static final String DESC = "desc";
	
	protected int total = 0; //总数
	protected int pageSize = 20; //每页条数
	protected int pageNo = 1; //当前页号
	
	protected List<?> rows = null; //
	
	public PageBean() {
	}
	
	public PageBean(int pageNo, int pageSize, int totalCount) {
		setTotal(totalCount);
		setPageSize(pageSize);
		setPageNo(pageNo);
		adjustPageNo();
	}
	
	public PageBean(int pageNo, int pageSize, int totalCount, List<?> list) {
		this(pageNo, pageSize, totalCount);
		setRows(list);
	}
	
	/**
	 * 增加行号字段
	 */
	@SuppressWarnings("unchecked")
	public void addRowNumAsc(){
		List<?> l = getRows();
		if(l != null && l.size() > 0){
			for(int i=0; i<l.size(); i++){
				Map<String,Object> m = (Map<String,Object>)l.get(i);
				if(m.get("NUM") == null){
					m.put("NUM", (getPageNo()-1)*getPageSize()+i+1);
				}
			}
		}
	}
	
	/**
	 * 增加行号字段
	 */
	@SuppressWarnings("unchecked")
	public void addRowNumDesc(){
		List<?> l = getRows();
		if(l != null && l.size() > 0){
			for(int i=0; i<l.size(); i++){
				Map<String,Object> m = (Map<String,Object>)l.get(i);
				if(m.get("NUM") == null){
					m.put("NUM", getTotal()-(getPageNo()-1)*getPageSize()-i);
				}
			}
		}
	}
	
	public void adjustPageNo() {
		if (pageNo == 1) {
			return;
		}
		int tp = getTotalPage();
		if (pageNo > tp) {
			pageNo = tp;
		}
	}

	@Override
	public int getTotal() {
		return total;
	}

	@Override
	public int getTotalPage() {
		int totalPage = total / pageSize;
		if (totalPage == 0 || total % pageSize != 0) {
			totalPage++;
		}
		return totalPage;
	}

	@Override
	public int getPageSize() {
		return pageSize;
	}

	@Override
	public int getPageNo() {
		return pageNo;
	}

	@Override
	public boolean isFirstPage() {
		return pageNo <= 1;
	}

	@Override
	public boolean isLastPage() {
		return pageNo >= getTotalPage();
	}

	@Override
	public int getNextPage() {
		if (isLastPage()) {
			return pageNo;
		} else {
			return pageNo + 1;
		}
	}

	@Override
	public int getPrePage() {
		if (isFirstPage()) {
			return pageNo;
		} else {
			return pageNo - 1;
		}
	}

	public void setTotal(int totalCount) {
		if (totalCount < 0) {
			this.total = 0;
		} else {
			this.total = totalCount;
		}
	}

	public void setPageSize(int pageSize) {
		if (pageSize < 1) {
			this.pageSize = DEF_COUNT;
		} else {
			this.pageSize = pageSize;
		}
	}

	public void setPageNo(int pageNo) {
		if (pageNo < 1) {
			this.pageNo = 1;
		} else {
			this.pageNo = pageNo;
		}
	}

	public List<?> getRows() {
		return rows;
	}

	public void setRows(List<?> list) {
		this.rows = list;
	}
}
4.pagebeab实现的接口
public interface Paginable {
	/**
	 * 总记录数
	 * @return
	 */
	public int getTotal();
	/**
	 * 总页数
	 * @return
	 */
	public int getTotalPage();
	/**
	 * 每页条数
	 * @return
	 */
	public int getPageSize();
	/**
	 * 当前页号
	 * @return
	 */
	public int getPageNo();
	/**
	 * 是否第一页
	 * @return
	 */
	public boolean isFirstPage();
	/**
	 * 是否最后一页
	 * @return
	 */
	public boolean isLastPage();
	
	/**
	 * 下一页号
	 * @return
	 */
	public int getNextPage();
	/**
	 * 上一页号
	 * @return
	 */
	public int getPrePage();
}
5.JsonMsg类
@XmlRootElement(name="jsonmsg")
public class JsonMsg {

	private String msg;
	private boolean status;
	private  String s ;

	
	public JsonMsg(){
		
	}
	
	public JsonMsg(boolean s, String str){
		this.msg = str;
		this.status = s;
	}

	@XmlElement  
	public String getMsg() {
		return msg;
	}
	public void setMsg(String text) {
		this.msg = text;
	}
	@XmlElement  
	public boolean isStatus() {
		return status;
	}
	public void setStatus(boolean status) {
		this.status = status;
	}
	
}

6.ResponseUtils类
public class ResponseUtils {
	private static final Logger log = LoggerFactory
			.getLogger(ResponseUtils.class);

	/**
	 * 返回文本内容
	 * 
	 * @param response
	 * @param text
	 */
	public static void renderText(HttpServletResponse response, String text) {
		render(response, "text/plain;charset=UTF-8", text);
	}

	/**
	 * 返回Json数据
	 * 
	 * @param response
	 * @param text
	 */
	public static void renderJson(HttpServletResponse response, String text) {
		render(response, "application/json;charset=UTF-8", text);
	}

	/**
	 * 返回Xml
	 * 
	 * @param response
	 * @param text
	 */
	public static void renderXml(HttpServletResponse response, String text) {
		render(response, "text/xml;charset=UTF-8", text);
	}

	/**
	 * 返回text/html
	 * 
	 * @param response
	 * @param text
	 */
	public static void renderHtml(HttpServletResponse response, String text) {
		render(response, "text/html;charset=UTF-8", text);
	}
	
	public static void renderJsonZip(HttpServletResponse response, String text) {
		
		response.setContentType("application/json;charset=UTF-8");
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
        response.setHeader("Content-Encoding", "gzip");  
        // 设置字符集  
        response.setCharacterEncoding("UTF-8");  

		
		try {
			byte[] bts = compress(text.getBytes("UTF-8"));
	        // 设定输出流中内容长度  
	        //response.setContentLength(bts.length); 
			OutputStream out = new BufferedOutputStream(response.getOutputStream());
			out.write(bts);
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	/**
	 * 返回内容(处理页面乱码)
	 * 
	 * @param response
	 * @param contentType
	 * @param text
	 */
	public static void render(HttpServletResponse response, String contentType,
			String text) {
		response.setContentType(contentType);
		response.setHeader("Pragma", "No-cache");
		response.setHeader("Cache-Control", "no-cache");
		response.setDateHeader("Expires", 0);
		try {
			response.getWriter().write(text);
		} catch (IOException e) {
			log.error(e.getMessage(), e);
		}
	}

	/**
	 * 下载文件
	 * 
	 * @param response
	 * @param fileName
	 * @param byteArray
	 */
	public static void downLoad(HttpServletResponse response, String fileName,
			byte[] byteArray) {
        if (byteArray == null) {
            renderHtml(response, "文件下载错误！");
            return;
        }
        try {
			// 防止IE缓存
			response.setHeader("pragma", "no-cache");
			response.setHeader("cache-control", "no-cache");
			response.setDateHeader("Expires", 0);
			response.addHeader("Content-Disposition", "attachment;filename="
					+ new String(fileName.getBytes("GBK"), "ISO8859-1"));
			response.addHeader("Content-Length", "" + byteArray.length);
			response.setContentType("application/octet-stream;charset=GBK");
			response.setContentType("application/x-msdownload");

			OutputStream out = new BufferedOutputStream(response
					.getOutputStream());
			out.write(byteArray);
			out.flush();
			out.close();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			log.error("下载文件错误");
			e.printStackTrace();
		}
	}
	/**
	 * 下载apk安装包
	 * @param response
	 * @param fileName
	 * @param byteArray
	 */
	public static void downloadApk(HttpServletResponse response, String fileName, byte[] byteArray) {
		try {
			System.out.println(fileName);
			// 防止IE缓存
			response.setHeader("pragma", "no-cache");
			response.setHeader("cache-control", "no-cache");
			response.setDateHeader("Expires", 0);
			response.addHeader("Content-Disposition", "attachment;filename="
					+ new String(fileName.getBytes("GBK"), "UTF-8"));//ISO8859-1 ??
			response.addHeader("Content-Length", "" + byteArray.length);
			response.setContentType("application/octet-stream;charset=GBK");
			response.setContentType("application/vnd.android.package-archive");  //安卓apk类型

			OutputStream out = new BufferedOutputStream(response
					.getOutputStream());
			out.write(byteArray);
			out.flush();
			out.close();
		} catch (Exception e) {
			log.error("下载文件错误");
			System.out.println(e.toString());
		}
	}
	
	public static void img(HttpServletResponse response,
			byte[] byteArray) {
		try {
			response.setContentType("image/jpeg;charset=GBK");
			OutputStream out = new BufferedOutputStream(response
					.getOutputStream());
			out.write(byteArray);
			out.flush();
			out.close();
		} catch (Exception e) {
			log.error("文件错误");
			e.printStackTrace();
		}
	}
	
	/**
	 * Zip 压缩
	 * @param data
	 * @return
	 * @throws IOException
	 */
	public static byte[] compress(byte[] data) throws IOException{
        ByteArrayOutputStream baos = new ByteArrayOutputStream();  
        // 压缩  
        long s = System.currentTimeMillis();
        GZIPOutputStream gos = new GZIPOutputStream(baos);
		gos.write(data, 0, data.length); 
		gos.finish();  
        byte[] output = baos.toByteArray();  
        baos.flush();  
        baos.close();  
        long e = System.currentTimeMillis();
        log.debug("压缩用时{}毫秒",e-s);
        return output;  
	}
}
7.JsonMapper类
public class JsonMapper {
	private static Logger logger = LoggerFactory.getLogger(JsonMapper.class);

	private ObjectMapper mapper;

	public JsonMapper() {
		this(null);
	}
	
	public JsonMapper(Include include) {
		mapper = new ObjectMapper();
		// 设置输出时包含属性的风格
		if (include != null) {
			mapper.setSerializationInclusion(include);
		}
		// 设置输入时忽略在JSON字符串中存在但Java对象实际没有的属性
		mapper.disable(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
	}
	
	/**
	 * Object可以是POJO，也可以是Collection或数组。
	 * 如果对象为Null, 返回"null".
	 * 如果集合为空集合, 返回"[]".
	 */
	public String toJson(Object object){
		try {
			return mapper.writeValueAsString(object);
		} catch (IOException e) {
			logger.warn("write to json string error:" + object, e);
			return null;
		}
	}
	
	/**
	 * 反序列化POJO或简单Collection如List<String>.
	 * 
	 * 如果JSON字符串为Null或"null"字符串, 返回Null.
	 * 如果JSON字符串为"[]", 返回空集合.
	 * 
	 * 如需反序列化复杂Collection如List<MyBean>, 请使用fromJson(String, JavaType)
	 * 
	 * @see #fromJson(String, JavaType)
	 */
	public <T> T fromJson(String jsonString, Class<T> clazz) {
		if (StringUtils.isEmpty(jsonString)) {
			return null;
		}

		try {
			return mapper.readValue(jsonString, clazz);
		} catch (IOException e) {
			logger.warn("parse json string error:" + jsonString, e);
			return null;
		}
	}

	/**
	 * 反序列化复杂Collection如List<Bean>, 先使用createCollectionType()或contructMapType()构造类型, 然后调用本函数.
	 * 
	 * @see #createCollectionType(Class, Class...)
	 */
	@SuppressWarnings("unchecked")
	public <T> T fromJson(String jsonString, JavaType javaType) {
		if (StringUtils.isEmpty(jsonString)) {
			return null;
		}

		try {
			return (T) mapper.readValue(jsonString, javaType);
		} catch (IOException e) {
			logger.warn("parse json string error:" + jsonString, e);
			return null;
		}
	}

	
	/**
	 * 构造Collection类型.
	 */
	public JavaType contructCollectionType(Class<? extends Collection> collectionClass, Class<?> elementClass) {
		return mapper.getTypeFactory().constructCollectionType(collectionClass, elementClass);
	}

	/**
	 * 构造Map类型.
	 */
	public JavaType contructMapType(Class<? extends Map> mapClass, Class<?> keyClass, Class<?> valueClass) {
		return mapper.getTypeFactory().constructMapType(mapClass, keyClass, valueClass);
	}
	
	/**
	 * 创建只输出非Null且非Empty(如List.isEmpty)的属性到Json字符串的Mapper,建议在外部接口中使用.
	 */
	public static JsonMapper nonEmptyMapper() {
		return new JsonMapper(Include.NON_EMPTY);
	}

	/**
	 * 创建只输出初始值被改变的属性到Json字符串的Mapper, 最节约的存储方式，建议在内部接口中使用。
	 */
	public static JsonMapper nonDefaultMapper() {
		return new JsonMapper(Include.NON_DEFAULT);
	}
	
	/**
	 * 取出Mapper做进一步的设置或使用其他序列化API.
	 */
	public ObjectMapper getMapper() {
		return mapper;
	}
}

你的阿旭啊

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端获取列表型数据的方法！前后端代码都有！

前端需要的是列表性数据。如下图以下是前端的代码 <div class="eight_table"> <table id="qy_corpfxy_list"> <tbody> <tr> <th>行号</th> <th&g
复制链接

扫一扫

专栏目录