关于JSON拼接到前端页面进行展示
来源：互联网 发布：联通wcdma 通话 数据 编辑：程序博客网 时间：2024/05/29 15:32
项目需求：需要把表格换成图片的方式展示，点击排列方法，再次切换成表格形式但是查询条件保留。表格用的是ligerUI
思路：先通过后台把图片所需的信息查询出来放进Json，在通过定位下拉框实现下拉就刷新等功能，点击切换表格查询条件保留可通过前端全局变量保留值传送给后台查询返回给前台。
Java代码部分：
//photoList界面@ResponseBody@RequestMapping(value = { "/photoList" })@AvoidDuplicateSubmission(needSaveToken = true)public Object getPhotoList(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException{A01 a01=new A01();String BJXA0108=request.getParameter("id");//获取部门IDString name=request.getParameter("name");//获取人员姓名//String a0102=request.getParameter("a0102");//获取人员拼音缩写String oldId=request.getParameter("oldId");//获取上一次查询的部门IDString oldName=request.getParameter("oldname");//获取上一次查询的人员姓名//String olda0102=request.getParameter("olda0102");//获取上一次人员拼音缩写搜索if(name==null){name="";}a01.setA0101("%%" + name + "%%");/*if(a0102!=null && !"".equals(a0102)){a01.setA0102(a0102);}*/a01.setBjxa0108(BJXA0108);List<A01> list=cadreServiceI.findNameImage(a01);JSONArray josnArray=new JSONArray();String page=request.getParameter("page");if(page==null){page="1";}//如果新查询的部门于原来查询部门不一致进行比对，并赋值page为1if(oldId!=null&&!"".equals(oldId)&&!oldId.equals(BJXA0108)){page="1";}//如果新查询的名字于原来查询名字不一致进行比对，并赋值page为1if(oldName!=null&&!"".equals(oldName)&&!oldName.equals(name)){page="1";}/*//如果新查询的名字于原来查询名字不一致进行比对，并赋值page为1if(olda0102!=null&&!"".equals(olda0102)&&!olda0102.equals(a0102)){page="1";}*///最好一次显示20个Integer pageSize=20;int length=0;if(list.size()<pageSize*Integer.parseInt(page)-1){length=list.size();}else{length=pageSize*Integer.parseInt(page)-1;}//获取List里面的值 放进json里面for (int i = (Integer.parseInt(page)-1)*pageSize; i < length; i++) {JSONObject jo = new JSONObject();jo.put("name", list.get(i).getA0101());//人名jo.put("id", BJXA0108);//单位IDjo.put("DID", list.get(i).getA01DID());//个人的IDjo.put("bjxa0108", list.get(i).getBjxa0108());//单位IDif(list.get(i).getBjxa0106()!=null){//如果有图片在json里面放1，在前端界面判断如果有照片走另外一个路径jo.put("photo", "1");}else{jo.put("photo","liger/img/renz1.jpg");//如果没有图片则放默认图片}josnArray.add(jo);}System.out.println(josnArray);return josnArray;}//切换成表格的形式
@ResponseBody@RequestMapping(value = { "/getCadrePage" })@AvoidDuplicateSubmission(needSaveToken = true)@BussAnnotation(moduleName = "干部管理", option = "干部分页查询")public Object getCadrePage(HttpServletRequest request) {PageRequ requ = new PageRequ();// 2017年3月16日12:09:58 sfb 判断是否解密String decode = fileUtils.readFile(); // 获取文本值String readCPU = fileUtils.readCPU();String pagesize = "1";// 页面大小String pages = "1";if (decode.equals(readCPU)) {pagesize = request.getParameter("pagesize");// 页面大小pages = request.getParameter("page");}String string = request.getParameter("id");String pid=request.getParameter("pid");String cadreMh = request.getParameter("Cadre");// 模糊检索参数String string1 = request.getParameter("bjxa0107");String sortname=request.getParameter("sortname");String sortorder=request.getParameter("sortorder");String a0102=request.getParameter("A0102");//拼音缩写检索A01 a01 = new A01();a01.setBjxa0108(string);if ("0".equals(pid)) {//如果pid为0查看所有；a01.setBjxa0108("");}if (cadreMh == null) {cadreMh = "";}if (string1 == null || string1 == "") {string1 = "在职人员档案";}if(a0102!=null&&!"".equals(a0102)){a01.setA0102("%"+a0102+"%");}a01.setA0101("%%" + cadreMh + "%%");a01.setBjxa0107(string1);a01.setA01Attr1("0");if(sortname!=null&&sortorder!=null){//如果不为null，则前台是选择字段查询a01.setSortname(sortname);a01.setSortorder(sortorder);}else{//如果普通查询则值为null，默认添加此排序a01.setSortname("a0101");a01.setSortorder("asc");}if(pagesize==null){pagesize="20";}if(pages==null){pages="1";}requ.setPageSize(Integer.parseInt(pagesize));requ.setPageNum(Integer.parseInt(pages));// 2017年3月22日10:59:14 SFB 角色查看干部权限Users users = (Users) request.getSession().getAttribute("user");String userid = users.getUserId();a01.setPhotopath(userid);// 把用户id当做字段查询//走高级查询String queryFlag =request.getParameter("queryFlag");if("1".equals(queryFlag)){ Object obj=advancedQuery(request,requ,a01);return obj;}//高级查询结束PageInfo<A01> findPageObject = cadreServiceI.findPageObject(requ, a01);//将人员所对的部门进行查询，因考虑到其他功能或许会用以上查询方法，所以考虑不关联查询；//如果查出的数据不为null，并且list集合不为nullif(findPageObject!=null&&findPageObject.getList()!=null){//在内容中增加单位名称findPageObject=addUnitName(findPageObject);}Log_Info.info = "当前页数为：" + pages;return findPageObject;}前端界面：<script type="text/javascript">//diaglogvar win1;var q;//放数据的全局变量var flag=true;//判断切换模式var i=1;//查询页数 起始为1； var notes;//放note的全局变量function f_open() {if (win1) win1.show();else win1 = $.ligerDialog.open({title: "档案接收",width: 620,height: 550,url: 'file_receive.html',showMax: true,showToggle: true,showMin: true,isResize: true,slide: false});}$(function () {$("#layout1").ligerLayout({ leftWidth: 200 });});$("#photo_box").scroll(function(){ // 当滚动到最底部以上n像素时， 加载新内容 if ($(document).height() - $(this).scrollTop() - $(this).height()<1) { onSelect(gCurrentPage, gLongitude, gLatitude); }}); window.onload = function () {changestep();}window.onresize = function () {changestep();}//tree$(function (){ window['t'] = $("#tree1").ligerTree({ url:"<%=basePath%>busi/getOrgAll2", nodeWidth: 200, checkbox: false, onBeforeExpand:onBeforeExpand, //展开事件 onBeforeCollapse:onBeforeCollapse, //收缩 onSelect: onSelect,//选择名称 slide: false, isExpand: false, //isLeaf:false, idFieldName: "id", textFieldName:"text",//显示的名称 }); manager = $("#tree1").ligerGetTreeManager(); }); $(function (){ window['t2'] = $("#tree2").ligerTree({ url:"<%=basePath%>busi/getOrgAll2", nodeWidth: 200, checkbox: false, onSelect: onSelect1,//选择名称 onBeforeExpand:onBeforeExpand2, onBeforeCollapse:onBeforeCollapse, slide: false, isExpand: false, idFieldName: "id", textFieldName:"text",//显示的名称 }); manager2 = $("#tree2").ligerGetTreeManager(); $("#tree2").hide(); }); var i=1; var notes; var treeB01Id;//导出人员变量 var treeB01Pid;//导出变量 function onSelect(note) { page=1; changestep(); if(!treeB01Id){ treeB01Id=note.data.id; } treeB01Pid=note.data.pid; notes=note; var xxxid = note.data.id; $.ajax({ url:'<%=basePath%>test/photoList', data:{'id':xxxid,'page':i,'oldId':treeB01Id,'name':name}, dataType:'JSON', type:'post', success:function(data){ if(data && data.length){ if(treeB01Id!=xxxid){ treeB01Id=xxxid; $("#photolist").empty(); i=1; } q=data; insertDiv(data); changestep(); } } }); }$(function () {//面板var height = $(".l-layout-center").height();$("#accordion1").ligerAccordion({height: height - 24, speed: null,});});//girdfunction itemclick(item) {alert(item.text);}function deleteRow() {g.deleteSelectedRow();} function onSelect1(note) { //alert('onSelect:' + note.data.b01DID); uu=note.data.id; // alert(uu); } function onBeforeExpand(note){ manager.loadData(note.target,'<%=basePath%>busi/getOrgAll2',{b01DID:note.data.id}); } function onBeforeExpand1(){ manager.loadData({},'<%=basePath%>busi/getOrgAll2',{b01DID:"1"}); } function onBeforeExpand2(note){ //树2 // alert(note.data.id); manager2.loadData(note.target,'<%=basePath%>busi/getOrgAll2',{b01DID:note.data.id}); // manager.refreshTree(); } function onBeforeCollapse(note){ manager.clear(note.target); } function res() { var tsrc="<%=basePath%>test/resp?id="+dialogData.a01DID+"&a0215A="+new Date(); $("#bjxa0106").attr("src",tsrc); } //人员姓名搜索 var name="";//全局查询人员姓名 var page=1;//查询人员姓名的页数 function findCadre(){ i=1; if(!name){ name= $("#name").val(); } var xxx=$("#name").val();//获取新的名字 if(flag){ $.ajax({ url:'<%=basePath%>test/photoList', data:{'id':treeB01Id,'page':page,'name':xxx,'oldname':name}, dataType:'JSON', type:'post', success:function(data){ if(page==1){ $("#photolist").empty(); } if(data && data.length){ if(name!=xxx){ name=xxx; $("#photolist").empty(); } q=data; insertDiv(data); changestep(); } } }); }else{ onSelects(notes); } } function insertDiv(data) { var dl=''; var photo='' if(data&&data.length){ for(var i=0;i<data.length;i++){ if(data[i].photo=="liger/img/renz1.jpg"){ photo='liger/img/renz1.jpg'; }else{ photo="<%=basePath%>busi/resp?id="+data[i].DID+"&a0215A="+new Date(); } dl += '<dl>' +'<dt><img width="160" height="200" src="'+photo+'"></dt>' +'<dd><a href="record.do?userId='+data[i].DID+'&userName='+data[i].name+'&bjxa0108='+data[i].bjxa0108+'">'+data[i].name+'</a></dd>' +'</dl>'; //把数据追加到列表容器 } $("#photolist").append(dl); } } //创建干部列表 function appendList(){ window['c'] = $("#maingrid").ligerGrid({ height: '100%', columns: [ { display: '姓名', name: 'a0101', align: 'left' ,width:120 }, { display: '性别', name: 'a0104' ,width:120}, { display: '证件号码', name: 'a0184' ,width:120}, { display: '出生日期', name: 'a0107' ,width:120}, { display: '民族', name: 'a0117' ,width:120}, { display: '籍贯名称', name: 'a0111A' ,width:120}, { display: '政治面貌', name: 'a0141' ,width:120},//政治面貌 { display: '入党时间', name: 'a0144' ,width:120},//入党时间 { display: '参加工作日期', name: 'a0134' ,width:120}, { display: '全日制教育', name: 'a0801A' ,width:120}, { display: '在职教育', name: 'bjxa0110' ,width:120},//在职教育 { display: '现任职务', name: 'a0215A' ,width:120}, { display: '现任职务时间', name: 'bjxa0109' ,width:120},//现任职务时间 ], url:"<%=basePath%>busi/getCadrePage", root:'list', //内容 record:'total', //总行 onSelectRow: onSelectCadreId, pageSize: 20, pageSizeOptions:[20,30,40,50], delayLoad:true, rownumbers: true, onDblClickRow : onDblClickRow , //双击跳转档案管理 }); $("#pageloading").hide(); } function onDblClickRow(){ var cadredid = c.getSelected().a01DID; var cadrename = c.getSelected().a0101; var bjxa0108=c.getSelected().bjxa0108; location.href="record.do?userId="+cadredid+"&userName="+cadrename+"&bjxa0108="+bjxa0108; } function onSelects(note) { if(flag){ $('#framecenter').on('click','img',function(){ flag=false; $("#photo_box").remove(); $("#framecenter").append('<div id="maingrid"></div><div id="maingridOrg"></div>'); appendList(); treeB01Id=note.data.id; treeB01Pid=note.data.pid; c.set({ //数据请求地址 url:"<%=basePath%>busi/getCadrePage", //数据书否分页，默认为true usePager:true, parms:{id:note.data.id,pid:note.data.pid,Cadre:name} }); //设置分页为当前第一页 c.loadData(c.changePage('first')); document.getElementById("maingrid").style.display="";//显示 document.getElementById("maingridOrg").style.display="none";//隐藏 }) }else{ i=1; $('#framecenter').on('click','img',function(){ flag=true; $("#maingrid").remove(); $("#maingridOrg").remove(); $("#framecenter").append('<div id="photo_box"><div class="photo_list" id="photolist"></div>'); onSelect(notes); $('#photo_box').scroll(function () { flag=true; //判断上次加载是否正在进行 尚未完成直接return if(loadFlag) return false; //dom对象转换为jq对象 var $this = $(this); //当滚动条滑动到据底部100px时触发 if ($this.height() +$this.scrollTop() > this.scrollHeight - 100) { //这里去拿图片 loadFlag = true; //模拟ajax获取数据 300毫秒之后执行内部逻辑 setTimeout(function() { //默认每次加载10条 /* for(var i=start;i<end;i++){ var dl = '<dl>' +'<dt><img src="'+q[i].photo+'"></dt>' +'<dd><a href="">'+q[i].name+'</a></dd>' +'</dl>'; //把数据追加到列表容器 $photo_list.append(dl); } */ if(name!=null&&name!=''){ page++; findCadre(); }else{ i++; onSelect(notes); } //重新计算margin-left的值 changestep() ; // 加载完成设置标识为false loadFlag = false; }, 300); } }); }); } } //获取干部主键=========================================================== function onSelectCadreId(){ cadreID = c.getSelected().a01DID; } //清空搜索条件 function clearCondition(){ $("#name").val(""); $("#A0102").val(""); }</script></head><body style="padding: 10px"><div id="layout1"><div position="left" title="组织机构目录" id="accordion1"><div class="l-scroll" title="档案管理"><ul id="tree1" class="tree1"></ul><ul id="tree2" style="visibility: none"></ul></div></div><div position="center" title="干部信息" id="framecenter"><div class="l-panel-topbar"><div class="l-panel-topbarinner l-panel-topbarinner-left"><!-- <div class="l-toolbar-item l-panel-btn l-toolbar-item-hasicon"><span>增加</span><div class="l-panel-btn-l"></div><div class="l-panel-btn-r"></div><div class="l-icon l-icon-add"></div></div><div class="l-bar-separator"></div><div class="l-toolbar-item l-panel-btn l-toolbar-item-hasicon"><span>编辑</span><div class="l-panel-btn-l"></div><div class="l-panel-btn-r"></div><div class="l-icon l-icon-modify"></div></div><div class="l-bar-separator"></div><div class="l-toolbar-item l-panel-btn l-toolbar-item-hasicon"><span>删除</span><div class="l-panel-btn-l"></div><div class="l-panel-btn-r"></div><img src="liger/lib/ligerUI/skins/icons/delete.gif"/></div> --><div class="l-bar-separator"></div><div class="l-toolbar-item l-panel-btn l-toolbar-item-hasicon"><span>排列方式</span><div class="l-panel-btn-l"></div><div class="l-panel-btn-r"></div><img src="liger/lib/ligerUI/skins/icons/calendar.gif" onclick="onSelects(notes)"/></div></div><br /></div><div class="l-panel-topbar" id="l-panel-topbar"><div class="l-form" id=""><div class="l-form-container"><ul><li class=""><ul><li style="text-align:left;padding-left:20px;">人员查询：</li><li id="" style="width:180px;text-align:left;"><div class="l-text" style="width: 178px;"><input type="text" id="name" name="name" class="l-text-field"/><div class="l-text-l"></div><div class="l-text-r"></div></div></li><li style="width:20px;"></li></ul></li><li style="margin-right:9px"><div class="l-button"><div class="l-button-l"></div><div onclick="findCadre()" class="l-button-r"><span>搜索</span></div></div></li><li style="margin-right:9px"><div class="l-button"><div class="l-button-l"></div><div onclick="clearCondition()" class="l-button-r"><span>清空条件</span></div></div></li></ul><div class="l-clear"></div><div class="l-clear"></div></div></div></div><div id="photo_box"><div class="photo_list" id="photolist"></div></div></div><div style="display:none;"></div><script type="text/javascript">window.onload = function () {changestep();}window.onresize = function () {changestep();}function changestep() {//div宽度var kuan = $("#photo_box").width();//图片宽度var imgkuan = 160 + 30;//一行可以放几张图片var y = (kuan - 30) / imgkuan;var s = Math.floor(y);//获取一共多少张图片var j = $(".photo_list dl").length;//alert(j);if (j > s) {//一行图片所占用的宽度var e = 160 * s;//放完图片所剩余的宽度var w = kuan - e;//margin-left的值var q = w / (s + 1);} else {var e = 160 * j;//放完图片所剩余的宽度var w = kuan - e;//margin-left的值var q = w / (j + 1);}// q = Math.floor(q);$(".photo_list dl").css("margin-left", q + "px")};//用以标识上次的加载是否正在进行var loadFlag = false;//列表容易对象var $photo_list = $('.photo_list');//监听滚动时间$('#photo_box').scroll(function () {//判断上次加载是否正在进行 尚未完成直接returnif(loadFlag) return false;//dom对象转换为jq对象var $this = $(this);//当滚动条滑动到据底部100px时触发 if ($this.height() +$this.scrollTop() > this.scrollHeight - 100) {//这里去拿图片loadFlag = true;//模拟ajax获取数据 300毫秒之后执行内部逻辑setTimeout(function() {//默认每次加载10条/* for(var i=start;i<end;i++){var dl = '<dl>'+'<dt><img src="'+q[i].photo+'"></dt>'+'<dd><a href="">'+q[i].name+'</a></dd>' +'</dl>';//把数据追加到列表容器$photo_list.append(dl);} */if(name!=null&&name!=''){page++;findCadre();}else{i++;onSelect(notes);}//重新计算margin-left的值 changestep() ;// 加载完成设置标识为falseloadFlag = false;}, 300);}});</script>阅读全文
0 0
- 关于JSON拼接到前端页面进行展示
- servlet对象通过json返回到前台页面并展示
- servlet对象通过json返回到前台页面并展示
- servlet对象通过json返回到前台页面并展示
- JS格式化json数据展示到页面中
- github上展示前端页面
- java web SpringMVC后端传json数据到前端页面
- 后端数据展示到前端
- jsp页面展示json数据
- Springmvc json加载数据 前端拼接技术
- Echarts报表插件，从数据库获取数据，json传值，在页面进行展示
- 通过JS、JQ，实现对json数据调取，并循环展示到页面
- 通过JS、JQ，实现对json数据调取，并循环展示到页面
- 前端关于url输入到页面加载过程
- 关于在页面输入特殊符号保存到数据库后，页面查询，特殊字符可以展示到页面的问题
- 一个简单jqueryAjax前端页面展示
- 用github来展示前端页面
- 关于启动页面动态获取网络的图片url进行展示的处理
- HBase 无法访问60010端口
- vim操作-在查找模式中使用寄存器内容
- MVC 中的Model对象
- CentOS7 + Oracle12c 在注册监听时无效 遇到的问题及解决方法
- AndroidStudio安装配置教程
- 关于JSON拼接到前端页面进行展示
- 刷脸out了？阿里“刷脚购物”亮相CVPR 2017
- android wlan bt 和gps小工具使用
- centos7.3下nginx安装及配置
- ContextMenu
- sublime 查看android源码 catgs 关联
- tomcat进Manager 403 Access Denied You are not authorized to view this page
- Android学习总结 ：自定义 View(一)
- 关于单例模式中线程同步的方法(同步块和同步方法)
