织梦dedecms后台自定义表单列表页美化

发布时间：2018-12-19 阅读次数：34
织梦自定义表单列表页默认比较难看，可以重新整理成表格的形式，视觉效果更美观！找到后台前端页面模板：dede/templets/diy_list.htm
打开文件，进行全选择，直接替换所有代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $cfg_soft_lang; ?>">
<title><?php echo $diy->name;?></title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    body{
    margin: 0;
    background: #e4e4e4;
    padding: 18px;
    }
    .diy_body{
    background-color: #fff;
    border: 1px solid #d7d7d7;
    padding: 28px 8px 8px 30px;
    }
.bodytitle{
border: 0px;
background-image: none;
margin: 0;
}
.bodytitletxt{
   font-size: 20px;
   font-family: Microsoft Yahei;
   font-weight: 700;
   color: #333;
}
.tbtitle1{
width: 98%;
border: 0;
background: #fff;
text-align: center;
margin-top: 20px;
padding-left: 4px;
}
.diy_namelujin{
font-size: 16px;
   color: #393d49;
   font-family: Microsoft Yahei;
   font-weight: bold;
   text-align: left;
}
.diy_yvlan{
        float:right;
        padding-right:8px;
}
.diy_table1{
width: 98%;
text-align: center;
background:#fff;
margin-top: 30px;
border-collapse: collapse;
}
.diy_table1 table{
        
}
.diy_biaoti{
        width: 100%;
   height: 40px;
   border: 1px solid #ececec;
   background: #f7f6f9;
   color: #333;
}
.diy_biaoti td{
        padding: 0 !important;
   line-height: 40px;
   text-align: left;
   font-size: 15px;
   text-indent: 12px;
   font-family: Microsoft Yahei;
   background: rgba(228, 228, 228, 0.24);
}
.diy_biaoge{
height: 38px;
        border-bottom: 1px solid #ececec;
}
.diy_biaoge:hover{
        background: rgba(228, 228, 228, 0.24);
        transition: all 0s;
}
.diy_biaoge td{
font-family: Microsoft Yahei;
   font-size: 13px;
   color: #666;
   text-align: left;
        text-indent: 12px;
}
.diy_footer{
width: 98%;
text-align: center;
border: 0;
background: #fff;
margin-top: 40px;
margin-bottom: 80px;
}
.pagelistbox{
width: 700px;
height: 50px;
margin: 0 auto;
display: block;
}
.pagelistbox span{
color: #666;
font-family: Microsoft Yahei;;
font-size: 15px;
display: block;
float: left;
margin-top: 7px;
}
.pagelistbox .indexPage{
   display: block;
   float: left;
   background: #009688;
   color: #fff;
   font-size: 15px;
   font-family: Microsoft Yahei;
   line-height: 32px;
   border: 1px solid #b4b4b4;
   border-radius: 3px;
   margin: 0 0 0 20px;
   padding: 0px 15px 0px 15px;
}
.pagelistbox .indexPage:hover{
background: #16b6a7;
}
.pagelistbox strong,.pagelistbox .endPage{
   display: block;
   float: left;
   background: #009688;
   color: #fff;
   font-size: 15px;
   font-family: Microsoft Yahei;
   line-height: 32px;
   border: 1px solid #b4b4b4;
   border-radius: 3px;
   margin-left: 5px;
   padding: 0px 15px 0px 15px;
}
.pagelistbox strong:hover{
background: #16b6a7;
}
.pagelistbox .endPage:hover{
background: #16b6a7;
}
.pagelistbox .prePage,.pagelistbox .nextPage,.pagelistbox a{
display: block;
   float: left;
   background: #fff;
   color: #009688;
   font-size: 15px;
   font-family: Microsoft Yahei;
   line-height: 32px;
   border: 1px solid #b4b4b4;
   border-radius: 3px;
   margin-left: 5px;
   padding: 0px 15px 0px 15px;
}
.duy_gongneng{
width: 100%;
   display: block;
   margin-top: 60px;
}
.duy_gongneng td{
margin: 0 auto;
    display: block;
    background: #fff;
    padding-top: 50px;
}
.duy_gongneng input{
width: 120px;
   height: 32px;
   font-family: Microsoft Yahei;
   font-size: 15px;
}
.duy_gongneng .diy_shenhe{
width: 12px;
height: 12px;
font-size: 15px;
color: #666;
text-align: center;
}
.diy_bianji123{
width: 80px;
   height: 32px;
   background: #009688;
   display: block;
   line-height: 32px;
   text-align: center;
   color: #fff;
   border-radius: 3px;
   text-indent: 0px;
}
.diy_bianji123:hover{
background: #16b6a7;
color: #fff;
}
</style>
</head>
<body background='images/allbg.gif'>
<div class="diy_body">
<div class="bodytitle">
<div class="bodytitleleft"></div>
<div class="bodytitletxt"><?php echo $diy->name;?>&nbsp;—&nbsp;—&nbsp;表单列表</div>
</div>
<form action="diy_list.php" method="post">
<input type="hidden" name="diyid" value="<?php echo $diyid;?>" />
<table cellpadding="1" cellspacing="1" class="tbtitle1">
<tr>
<td height="28">
<div style='float:left'>
<a href='diy_main.php'>
<b class="diy_namelujin">自定义表单管理</b>
</a> 
<b class="diy_namelujin">>>内容列表</b>
</div>
       <div class="diy_yvlan">
           <a href="../plus/diy.php?action=list&diyid=<?php echo $diy->diyid; ?>" target="_blank">
           	<img src='images/gtk-tmp.png' align='left' title='预览' alt='预览' /><u>前台预览</u>
           </a>
       </div>
</td>
</tr>
</table>
<table cellpadding="1" cellspacing="1" class="tbtitle diy_table1">
<?php
 echo '<tr class="diy_biaoti"><td width="50px">ID</td>';
 foreach($fieldlist as $field=>$fielddata)
 {
   echo '<td>'.$fielddata[0].'</td>';
 }
 echo '<td>状态</td><td style="text-align:center">操作</td></tr>';
?>
{dede:datalist}
<?php 
if(!empty($fields)){
$allowhtml = array('htmltext');
$fields['sta'] = $fields['ifcheck'] == 1 ? '已审核' : '未审核';    
echo '<tr class="diy_biaoge"><td width="5%" style="text-align:left"><input type="checkbox" name="id[]" value="'.$fields['id'].'" class="np" /><a href="diy_list.php?action=edit&diyid='.$diy->diyid.'&id='.$fields['id'].'">'.$fields['id'].'</a></td>';
foreach($fieldlist as $field=>$fielddata)
{
if($fielddata[1]=='img'){
$fields[$field] = "<a href='{$fields[$field]}' target='_blank'><img src='images/channeladd.gif' border='0' /> 图片附件</a>\r\n";
}
else if($fielddata[1]=='addon'){
$fields[$field] = "<a href='{$fields[$field]}' target='_blank'><img src='images/channeladd.gif' border='0' /> 其它附件</a>";
}
else{
if(!in_array($fielddata[1],$allowhtml)){
$fields[$field] = htmlspecialchars($fields[$field]);
}
}
echo '<td>'.$fields[$field].'</td>';
   }
echo '<td>'.$fields['sta'].'</td><td width="10%" align="center" style="width: 80px;height: 32px;margin: 0 auto;display: block;"><a class="diy_bianji123" style="color:#fff" href="diy_list.php?action=edit&diyid='.$diy->diyid.'&id='.$fields['id'].'">编辑</a></td>';
echo '</tr>';
} 
else {
echo "<tr><td>暂无记录</td></tr>";
}
?>
{/dede:datalist}
</table>
<table class="diy_footer"  cellpadding="1" cellspacing="1" >
   <tr><td colspan="3">{dede:pagelist listsize=2 /}</td></tr>
<tr class="duy_gongneng">
<td colspan="5" height='36' align="center" bgcolor="#F8FCF1">
<label><input type="button" name="select" onclick="selectAll()" value="全选"/></label>
<label><input type="button" name="select" onclick="selectAll1()" value="取消全选"/></label>
<label style="font-size: 15px;margin-left: 30px;font-family: Microsoft Yahei;"><input type="radio" name="action" value="check" class='np diy_shenhe' />审核</label>
<label style="font-size: 15px;margin-left: 30px;font-family: Microsoft Yahei;"><input type="radio" name="action" value="delete"  class='np diy_shenhe' />删除</label>
&nbsp;&nbsp;
<input type="submit" name="submit" value="提交" class='np coolbg' />
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
function selectAll(){
   var a = document.getElementsByTagName("input");
for(var i = 0;i<a.length;i++){
   if(a[i].type == "checkbox") a[i].checked = true;
}
}
 function selectAll1(){
var a = document.getElementsByTagName("input");
for(var i = 0;i<a.length;i++){
   if(a[i].type == "checkbox") a[i].checked = false;
   }
}
</script>
</body>
</html>
本文标题：《织梦dedecms后台自定义表单列表页美化》
网址：https://zhangwenbao.com/dedecms-custom-form-list-page-beautification.html
作者：张文保
发布时间：2018-12-19
许可协议：CC BY-NC-SA 4.0