森中灵 最后提交于1年前 整理V8.0.6

<#def title = "表格样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "表格样式是指对表格增加样式规则，如指定表格边框、表格圆角、表格行线、表格单元格内边距、表格单元格字体大小、表格单元格文本对齐方式、表格单元格文本行高等，默认表格无边框。"/>
<#def prevUrl = "block.htm"/>
<#def nextUrl = "../js/js.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}

<style>
.color{display:block;width:20px;height:20px !important;margin:15px 0 15px 10px !important;cursor:pointer;}
</style>
<script>
function doSelectBorder(elem)
{
    Z(elem).parent().parent().next("section > div > table").each(function(table)
    {
        Z(table).removeClass("z-bordered");
        Z(table).removeClass("z-bordered-line");
        
        if (Z.Validates.isNotEmpty(elem.value))
            Z(table).addClass(elem.value);
        else
        {//删除可能的颜色
            Z(table).removeClass("z-red");
            Z(table).removeClass("z-orange");
            Z(table).removeClass("z-yellow");
            Z(table).removeClass("z-green");
            Z(table).removeClass("z-cyan");
            Z(table).removeClass("z-blue");
            Z(table).removeClass("z-purple");
            Z(table).removeClass("z-bd-rd5");
            Z(table).removeClass("z-bd-rd8");
            Z(table).removeClass("z-bd-rd10");
        }
    });
    
    doUpdateCode(Z(elem).parent().parent().parent());
}

function doSelectRadius(elem)
{
    Z(elem).parent().parent().next("section > div > table").each(function(table)
    {
        Z(table).removeClass("z-bd-rd5");
        Z(table).removeClass("z-bd-rd8");
        Z(table).removeClass("z-bd-rd10");
        
        if (Z.Validates.isNotEmpty(elem.value))
            Z(table).addClass(elem.value);
    });
    
    doUpdateCode(Z(elem).parent().parent().parent());
}

function doSelectColor(elem, color)
{
    Z(elem).parent().next("section > div > table").each(function(table)
    {
        Z(table).removeClass("z-red");
        Z(table).removeClass("z-orange");
        Z(table).removeClass("z-yellow");
        Z(table).removeClass("z-green");
        Z(table).removeClass("z-cyan");
        Z(table).removeClass("z-blue");
        Z(table).removeClass("z-purple");
        
        if (Z.Validates.isNotEmpty(color))
            Z(table).addClass(color);
    });
    
    doUpdateCode(Z(elem).parent().parent().parent());
}

function doSelectPadding(elem)
{
    Z(elem).parent().parent().next("section > div > table").each(function(table)
    {
        Z(table).removeClass("z-pd3");
        Z(table).removeClass("z-pd10");
        Z(table).removeClass("z-pd16");
        Z(table).removeClass("z-pd20");
        
        if (Z.Validates.isNotEmpty(elem.value))
            Z(table).addClass(elem.value);
    });
    
    doUpdateCode(Z(elem).parent().parent().parent());
}

function doSelectPx(elem)
{
    Z(elem).parent().parent().next("section > div > table").each(function(table)
    {
        Z(table).removeClass("z-px16");
        Z(table).removeClass("z-px14");
        Z(table).removeClass("z-px12");
        Z(table).removeClass("z-px18");
        
        if (Z.Validates.isNotEmpty(elem.value))
            Z(table).addClass(elem.value);
    });
    
    doUpdateCode(Z(elem).parent().parent().parent());
}

function doSelectAlign(elem)
{
    Z(elem).parent().parent().next("section > div > table").each(function(table)
    {
        Z(table).removeClass("z-text-left");
        Z(table).removeClass("z-text-center");
        Z(table).removeClass("z-text-right");
        
        if (Z.Validates.isNotEmpty(elem.value))
            Z(table).addClass(elem.value);
    });
    
    doUpdateCode(Z(elem).parent().parent().parent());
}

function doSelectLh(elem)
{
    Z(elem).parent().parent().next("section > div > table").each(function(table)
    {
        Z(table).removeClass("z-lh100p");
        Z(table).removeClass("z-lh150p");
        Z(table).removeClass("z-lh200p");
        Z(table).removeClass("z-lh30");
        
        if (Z.Validates.isNotEmpty(elem.value))
            Z(table).addClass(elem.value);
    });
    
    doUpdateCode(Z(elem).parent().parent().parent());
}

function doRepairRadius(elem)
{
    var $tr = Z(elem).parent().parent().parent().next("section > div > table > tbody > tr:last-child");
    var $first = $tr.find(" > td:first-child");
    var $last = $tr.find(" > td:last-child");
    
    if (elem.checked)
    {
        $first.addClass("z-bd-rd-bl8");
        $last.addClass("z-bd-rd-br8");
    }
    else
    {
        $first.removeClass("z-bd-rd-bl8");
        $last.removeClass("z-bd-rd-br8");
    }
    
    doUpdateCode(Z(elem).parent().parent().parent().parent());
}

function doRepairLeftBorder(elem)
{
    var $tr = Z(elem).parent().parent().parent().next("section > div > table > tbody > tr:first-child");
    var $first = $tr.next("tr>td:first-child");
    var $second = $tr.next("tr").next("tr>td:first-child");
    
    if (elem.checked)
    {
        $first.addClass("zi-bd-l");
        $second.addClass("zi-bd-l");
    }
    else
    {
        $first.removeClass("zi-bd-l");
        $second.removeClass("zi-bd-l");
    }
    
    doUpdateCode(Z(elem).parent().parent().parent().parent());
}

function doChange(tabnav)
{
    doUpdateCode(Z(tabnav));
}

function doUpdateCode($this)
{//更新代码
    var html = $this.find("section > div").htmlt();
    $this.find("section > div").next("div > span").html(html);
}

</script>

<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "css", "table")}

<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "表格样式")}
<div class="content">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
    <p class="z-text-blue">表格样式：</p>
    <p class="z-color-333" style="text-indent:38px;">
        表格样式是指对表格增加样式规则，如指定表格边框、表格圆角、表格行线、表格单元格内边距、表格单元格字体大小、表格单元格文本对齐方式、表格单元格文本行高等，默认表格无边框。
        另外，CSS对底部圆角当有背景时需要手动对第一和最后单元格补圆角，当圆角首列合并单元格时也需要对被合并的行第一单元格补左边线。
    </p>
</div>

<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>

<#-- 一、表格边框 -->
<div class="tutorial title">一、表格边框（默认灰色无圆角，单元格内边框10px）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <span class="z-px14">边框：</span>
    <select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectBorder(this);">
    <option value="z-bordered">边框</option>
    <option value="z-bordered-line">边线</option>
    <option value="">无边框</option>
    </select>
    <select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8 z-mg-l-1" onchange="doSelectRadius(this);">
    <option value="">无圆角</option>
    <option value="z-bd-rd5">5像素</option>
    <option value="z-bd-rd8">8像素</option>
    <option value="z-bd-rd10">10像素</option>
    </select>
    <span class="z-px14">颜色：</span>
    <span class="color" style="background-color:${colorMap.get("btnBdColor")}" onclick="doSelectColor(this, '');"></span>
    <span class="color" style="background-color:${colorMap.get("redBdColor")}" onclick="doSelectColor(this, 'z-red');"></span>
    <span class="color" style="background-color:${colorMap.get("orangeBdColor")}" onclick="doSelectColor(this, 'z-orange');"></span>
    <span class="color" style="background-color:${colorMap.get("yellowBdColor")}" onclick="doSelectColor(this, 'z-yellow');"></span>
    <span class="color" style="background-color:${colorMap.get("greenBdColor")}" onclick="doSelectColor(this, 'z-green');"></span>
    <span class="color" style="background-color:${colorMap.get("cyanBdColor")}" onclick="doSelectColor(this, 'z-cyan');"></span>
    <span class="color" style="background-color:${colorMap.get("blueBdColor")}" onclick="doSelectColor(this, 'z-blue');"></span>
    <span class="color" style="background-color:${colorMap.get("purpleBdColor")}" onclick="doSelectColor(this, 'z-purple');"></span>
    <span class="z-px14">内边距：</span>
    <select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectPadding(this);">
    <option value="z-pd10">z-pd10</option>
    <option value="z-pd3">z-pd3</option>
    <option value="z-pd16">z-pd16</option>
    <option value="z-pd20">z-pd20</option>
    <option value="">无边距</option>
    </select>
    <ul class="zi-float-right">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:100px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <table class="z-table z-bordered z-pd10">
    <tr bgcolor="#f5f5f5">
        <td colspan="3">示例</td>
    </tr>
    <tr>
        <td width="30%">用户名称</td>
        <td width="30%">&价格</td>
        <td width="*">操作</td>
    </tr>
    <tr>
        <td>admin</td>
        <td>10000</td>
        <td>查看</td>
    </tr>
    <tr>
        <td>admin</td>
        <td>10000</td>
        <td>查看</td>
    </tr>
    </table>
</div>

<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">默认有边框表格，格式为[class="z-table z-bordered"]<br>
    1、[z-table]表示表格使用知启蒙表格样式<br>
    2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
    3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
</div>
</section>
</div>

<#-- 二、表格单元格文本设置 -->
<div class="tutorial title">二、表格单元格文本设置（默认左对齐、字体继承14px、行高继承120%）</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <span class="z-px14">单元格对齐：</span>
    <select data-role="z-select" class="z-select z-relative-left z-w100 z-h30 z-mg-t8" onchange="doSelectAlign(this);">
    <option value="">默认左对齐</option>
    <option value="z-text-left">左对齐</option>
    <option value="z-text-center">居中</option>
    <option value="z-text-right">右对齐</option>
    </select>
    <span class="z-px14">字体大小：</span>
    <select data-role="z-select" class="z-select z-relative-left z-w90 z-h30 z-mg-t8" onchange="doSelectPx(this);">
    <option value="">默认大小</option>
    <option value="z-px14">z-px14</option>
    <option value="z-px16">z-px16</option>
    <option value="z-px12">z-px12</option>
    <option value="z-px18">z-px18</option>
    </select>
    <span class="z-px14">字体行高：</span>
    <select data-role="z-select" class="z-select z-relative-left z-w90 z-h30 z-mg-t8" onchange="doSelectLh(this);">
    <option value="">默认大小</option>
    <option value="z-lh100p">z-lh100p</option>
    <option value="z-lh150p">z-lh150p</option>
    <option value="z-lh200p">z-lh200p</option>
    <option value="z-lh30">z-lh30</option>
    </select>
    <ul class="zi-float-right">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:100px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <table class="z-table z-bordered z-pd10">
    <tr bgcolor="#f5f5f5">
        <td colspan="3">示例</td>
    </tr>
    <tr>
        <td width="30%">用户名称</td>
        <td width="30%">&价格</td>
        <td width="*">操作</td>
    </tr>
    <tr>
        <td>admin</td>
        <td>10000</td>
        <td>查看<br>修改<br>删除</td>
    </tr>
    <tr>
        <td>admin</td>
        <td>10000</td>
        <td>查看<br>修改<br>删除</td>
    </tr>
    </table>
</div>

<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">默认有边框表格，格式为[class="z-table z-bordered"]<br>
    1、[z-table]表示表格使用知启蒙表格样式<br>
    2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
    3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
    4、单元格文本对齐三种左对齐[z-text-left]、居中[z-text-center]、右对齐[z-text-right]，未配置默认左对齐<br>
    5、单元格文本字体大小，如[z-px16]、[z-px18]等，可以去[<a href="text.htm">文本样式</a>]查看更多定义<br>
    6、单元格文本行高，如百分比行高[z-lh150p]、[z-lh200p]和固定行高[z-lh30]等，可以去[<a href="text.htm">文本样式</a>]查看更多定义<br>
</div>
</section>
</div>

<#-- 三、表格圆角最后一行有背景补圆角 -->
<div class="tutorial title">三、表格圆角边框最后一行有背景补圆角</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <span><input type="checkbox" checked data-role="z-checkbox" data-class="z-cyan" class="z-mg-b3 z-mg-r10" onchange="doRepairRadius(this);">补底部圆角</span>
    <ul class="zi-float-right">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:100px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <table class="z-table z-bordered z-bd-rd8 z-pd10">
    <tr bgcolor="#f5f5f5">
        <td colspan="3">示例</td>
    </tr>
    <tr>
        <td width="30%">序号</td>
        <td width="30%">用户名称</td>
        <td width="*">操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td>admin</td>
        <td>查看</td>
    </tr>
    <tr>
        <td>2</td>
        <td>admin</td>
        <td>查看</td>
    </tr>
    <tr bgcolor="#f5f5f5">
        <td colspan="3" class="z-bd-rd-bl8 z-bd-rd-br8">脚注</td>
    </tr>
    </table>
</div>

<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">圆角边框时，最后一行有背景时，需要对当前行第一列和最后一列增加[class="z-bd-rd-bl8"]和[class="z-bd-rd-br8"]<br>
    1、[z-table]表示表格使用知启蒙表格样式<br>
    2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
    3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
    4、[z-bd-rd8]表示圆角8像素，表格支持圆角5像素、8像素、10像素三种<br>
    5、[z-bd-rd-bl8 z-bd-rd-br8]表示脚注最后一行，也增加下左和下右8像素圆角，这样就不会被背景遮住圆角
</div>
</section>
</div>

<#-- 四、表格圆角边框第一列有向下合并单元格时被合并行首列补左边线 -->
<div class="tutorial title">四、表格圆角边框第一列有向下合并单元格时，被合并行剩余首列补左边线</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <span><input type="checkbox" checked data-role="z-checkbox" data-class="z-cyan" class="z-mg-b3 z-mg-r10" onchange="doRepairLeftBorder(this);">补左边线</span>
    <ul class="zi-float-right">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:100px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <table class="z-table z-bordered z-bd-rd8 z-pd10">
    <tr>
        <td width="30%" rowspan="3">示例</td>
        <td width="30%">用户名称</td>
        <td width="*">操作</td>
    </tr>
    <tr>
        <td class="zi-bd-l">admin</td>
        <td>查看</td>
    </tr>
    <tr>
        <td class="zi-bd-l">admin</td>
        <td>查看</td>
    </tr>
    <tr>
        <td>脚注</td>
        <td>admin</td>
        <td>查看</td>
    </tr>
    </table>
</div>

<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">圆角边框时，如果有第一列向下合并单元格的情况，被合并的行的第一列要求增加左边线，格式为[class="zi-bd-l"]，有颜色还要加上颜色[class="zi-bd-l z-red"]<br>
    1、[z-table]表示表格使用知启蒙表格样式<br>
    2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
    3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
    4、[z-bd-rd8]表示圆角8像素，表格支持圆角5像素、8像素、10像素三种<br>
    5、第二行和第三行的第一列被第一行第一列向下合并了，因此第二行和第三行剩余的第一列要求增加左边线，格式为[class="zi-bd-l"]
</div>
</section>
</div>
${zhiqim_com_chapter()}
</div>

<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>
${zhiqim_com_footer()}