项目需求：需要把表格换成图片的方式展示，点击排列方法，再次切换成表格形式但是查询条件保留。表格用的是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");//获取部门ID
String name=request.getParameter("name");//获取人员姓名
//String a0102=request.getParameter("a0102");//获取人员拼音缩写
String oldId=request.getParameter("oldId");//获取上一次查询的部门ID
String 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为1
if(oldId!=null&&!"".equals(oldId)&&!oldId.equals(BJXA0108)){
page="1";
}
//如果新查询的名字于原来查询名字不一致进行比对，并赋值page为1
if(oldName!=null&&!"".equals(oldName)&&!oldName.equals(name)){
page="1";
}
/*//如果新查询的名字于原来查询名字不一致进行比对，并赋值page为1
if(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);//单位ID
jo.put("DID", list.get(i).getA01DID());//个人的ID
jo.put("bjxa0108", list.get(i).getBjxa0108());//单位ID
if(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集合不为null
if(findPageObject!=null&&findPageObject.getList()!=null){
//在内容中增加单位名称
findPageObject=addUnitName(findPageObject);
}
Log_Info.info = "当前页数为：" + pages;
return findPageObject;
}<script type="text/javascript">
//diaglog
var 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,
});
});
//gird
function 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" οnclick="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 οnclick="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 οnclick="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 () {
//判断上次加载是否正在进行 尚未完成直接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);
}
});
</script>
扫一扫
1395
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
