图片 5

帝国CMS修改图集默认显示模板格式

帝国CMS 的图集字体 [!—-morepic–]
默认自带的输出模板是用table表格的。非常不利于配合JS制作各种图集特效。

帝国CMS采用分离出图片集中大图小图的方法可以更自由的显示图片集效果。本文所述实例是在系统图片集函数上修改了一下代码实现的分离出图集中的大图片和小图片。具体操作步骤如下:

分页功能是web开发中常见的一项功能,也存在很多形式,这里主要讲一下利用thinkPHP框架的page类来打造一款bootstrap风格的分页过程。

想要自定义图片集输出模板方法有二:

e/class/userfun.php增加自定义函数如下:

首先需要去thinkPHP官网现在其分页扩展类

1、修改 [!—-morepic–] 字段模板:

复制代码代码如下://—————————用户自定义标签函数文件
//图片集输出大小图
function user_PhotoMorepage($picsize){
global $navinfor;
$morepic=$navinfor[‘morepic’];
if(empty($morepic))
{
return “”;
}
$rexp=”rn”;
$fexp=”::::::”;
$rr=explode($rexp,$morepic);
$count=count($rr);
for($i=0;$i {
$j=$i+1;
$fr=explode($fexp,$rr[$i]);
$smallpic=$fr[0]; //小图
$bigpic=$fr[1]; //大图
if(empty($bigpic))
{
$bigpic=$smallpic;
}
$picname=htmlspecialchars($fr[2]); //名称
$showsmphoto.=”图片 1“;
//显示小图格式修改这里
$showbigphoto.=”图片 2“;
//显示大图格式修改这里
if($i==0)
{
$firstpic=$showpic;
}

图片 3

打开 e/class/functions.php 文件

}
if($picsize==0){
echo $showsmphoto; //参数为0输出小图片
}
if($picsize==1){
echo $showbigphoto; //参数为1输出大图片
}
}
//图片集输出大小图结束

如果直接按照官网的教程进行分页,那么出来的效果仅仅是显示一个简单的不带任何样式的连接加文字,这显然是不符合项目要求的。

找到:

增加自定义标签如下图所示:

这里介绍下如何制bootstrap风格的分页效果。由于该分页类输出分页的内容是div里面加连接的形式,而bootstrap采用的分页代码是nav下面ul+li+a的形式,所以需要修改分页类。

//返回图片集html代码function ReturnMorepicpathHtml($add){global $public_r,$fun_r;if(empty($add[morepic])){return '';}$line=$add[num]?$add[num]:1;//每行显示$picpath='';$path_r=explode(/r/n,$add[morepic]);for($pj=0;$pjcount($path_r);$pj++) {$p=$pj+1;if(($p-1)%$line==0||$p==1){$picpath.='tr';} $showdown_r=explode('::::::',$path_r[$pj]);//显示图片名称$name='';if(!empty($showdown_r[2])){$name=brspan style='line-height=18pt'.$showdown_r[2]./span;}$width=$add[width]? width='.$add[width].':'';//宽度$height=$add[height]? height='.$add[height].':'';//高度$picpath.=td align=centera href='.$public_r[newsurl].e/ViewImg/index.html?url=.$showdown_r[1].' target=_blankimg src='.$showdown_r[0].'.$width.$height. border=0.$name./a/td;//分割 if($p%$line==0){$picpath.='/tr';}}if($p0){$table=tablewidth='100%'border=0cellpadding=4cellspacing=4;$table1=/table; $ys=$line-$p%$line;$dotr=0; for($j=0;$j$ys$ys!=$line;$j++){$dotr=1; $picpath.='td/td'; }if($dotr==1){$picpath.='/tr';}}$value=$table.$picpath.$table1;return$value;}

图片 4

1.使用EditPlus(或其他带有行号显示的IDE)打开page.calss.php,需要修改如下地方:

共中,红色代码这部分就主要的图片输出格式,按需要修改即可,比如改成li/li格式。

之后便可在内容模板页用

 protected $config  =    array('header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' %totalRow% %header% %nowPage%/%totalPage% 页 %upPage% %downPage% %first%  %prePage%  %linkPage%  %nextPage% %end%');

方法二:不用 [!—-morepic–] 调用,直接用PHP代码自定义调用:

复制代码代码如下:[usershowphoto]0[/usershowphoto]
调出图集中小图片
                  

 

猛击这里查看:

复制代码代码如下:[usershowphoto]1[/usershowphoto]
调出图集中大图片

首先在34行,修改默认的theme如上,将输出的文字信息包裹在一个span中,并如上给其添加样式,这样做是由于默认输出的文字信息样式不符合要求,需要修改,这个操作可以通过setConfig方法来完成,但是不建议这样做,因为theme进行setCongfig代码量较大,每次在代码中调用显然很冗余,建议直接修改这个分页类;

2.

 if ($upRow>0){              $upPage     =   " <li><a  .str_replace('__PAGE__',$upRow,$url)."'>".$this->config['prev']."</a></li>";          }else{              $upPage     =   '';          }            if ($downRow <= $this->totalPages){              $downPage   =   "<li><a  .str_replace('__PAGE__',$downRow,$url)."'>".$this->config['next']."</a></li>";          }else{              $downPage   =   '';          }          // << < > >>          if($nowCoolPage == 1){              $theFirst   =   '';              $prePage    =   '';          }else{              $preRow     =   $this->nowPage-$this->rollPage;              $prePage    =   "<li><a  .str_replace('__PAGE__',$preRow,$url)."' >上".$this->rollPage."页</a></li>";              $theFirst   =   "<li><a  .str_replace('__PAGE__',1,$url)."' >".$this->config['first']."</a></li>";          }          if($nowCoolPage == $this->coolPages){              $nextPage   =   '';              $theEnd     =   '';          }else{              $nextRow    =   $this->nowPage+$this->rollPage;              $theEndRow  =   $this->totalPages;              $nextPage   =   "<li><a  .str_replace('__PAGE__',$nextRow,$url)."' >下".$this->rollPage."页</a></li>";              $theEnd     =   "<li><a  .str_replace('__PAGE__',$theEndRow,$url)."' >".$this->config['last']."</a></li>";          }          // 1 2 3 4 5          $linkPage = "";          for($i=1;$i<=$this->rollPage;$i++){              $page       =   ($nowCoolPage-1)*$this->rollPage+$i;              if($page!=$this->nowPage){                  if($page<=$this->totalPages){                      $linkPage .= "&nbsp;<li><a  .str_replace('__PAGE__',$page,$url)."'>&nbsp;".$page."&nbsp;</a></li>";                  }else{                      break;                  }              }else{                  if($this->totalPages != 1){                                            $linkPage .= "<li ><a  >".$page."</a></li>";

从99行开始到141行结束,将所有输出的a标签按照如上方式更改,将每一个a标签都包裹在li中,便于客户端调用;

以上page类算是修改完成,接下来需要在页面中进行调用

页面调用前台代码为:

首先在页面中要引入bootstrap的css文件,

<link   rel="stylesheet">

然后在模板中如下调用:

 <div class="table-responsive">            <table class="table table-striped">              <thead>                <tr>                  <th></th>                  <th>用户名</th>                  <th>密码</th>                  <th>电话号码</th>                  <th>电子邮件</th>                  <th>所属园区ID</th>                  <th>可访问摄像头列表</th>                  <th>注册时间</th>                  <th>备注</th>                  <th></th>                  <th></th>                </tr>              </thead>              <tbody id="tbuser">         <volist name="list" id="vo">            <tr>            <td><input type="checkbox" name="udCheck"/></td>            <td>{$vo.userName}</td>            <td>{$vo.password}</td>            <td>{$vo.phoneNum}</td>            <td>{$vo.email}</td>            <td>{$vo.deptId}</td>            <td>{$vo.accessCamera}</td>            <td>{$vo.registerTime}</td>            <td>{$vo.memo}</td>            <td><a href='#'  onclick="deleteUser('{$vo.userName}',this);" class="btn btn-danger btn-sm">删除</a></td>           <td><a href='/yunmu/Index/edit/id/{$vo.userName}' class="btn btn-primary btn-sm" >编辑</a></td>          </volist>                           </tbody>            </table>          <nav style="text-align:center;" >             <ul class="pagination">                         {$page}             </ul>        </nav>                     </div>

注意这里设置nav的样式是为了让其居中显示,pagination是bootstrap中自带的一个分页的css
class,{$page}是后台传递给模板的输出的内容,

以上是前台代码的调用,后台PHP代码需要在显示的地方添加如下代码:

                import('ORG.Util.Page');// 导入分页类              $count= $User->where($condition)->count();// 查询满足要求的总记录数               $Page=new Page($count,10);// 实例化分页类 传入总记录数,每页显示10条记录              $show=$Page->show();// 分页显示输出              $list = $User->where($condition)->order('userName')->limit($Page->firstRow.','.$Page->listRows)->select();              $this->assign('list',$list);// 赋值数据集              $this->assign('page',$show);// 赋值分页输出              $this->display(); // 输出模板

其中$condition是你自定义的查询条件,$Page=new
Page($count,10)表示实例化分页类并且一页显示10行数据,然后调用其show方法返回输出内容,再将其
传递给前台模板。

以上步骤完成之后,这个分页功能已经基本完成,效果如下:

图片 5

以上采用其框架分页类的方式仅适合于表单提交查询(即页面整体跳转刷新)的分页,因为它对分页数据的控制是通过在URL尾部添加参数如p=1这种方式来实现的,所以实际上每次查询数据的分页你都得保证它能够获取完整的查询参数,否则可能点击第二页或者下一页的时候查询出来的结果就不是之前的结果了。建议将所有查询修改为采用get表单提交的方式。对于逻辑较为复杂或者需要采用ajax分页的场景,这个分页类并不能满足,需要自己去完成完整的前后台分页代码。

 


发表评论

电子邮件地址不会被公开。 必填项已用*标注