layui中布局和表格的渲染以及動(dòng)態(tài)生成表格的示例分析

這篇文章主要介紹了layui中布局和表格的渲染以及動(dòng)態(tài)生成表格的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

整體的效果：

一、首先百度搜索layui的地址，然后下載layui的壓縮包，，將壓縮包的文件解壓縮，然后將解壓縮后的文件復(fù)制到你的編譯器上；

二、建立一個(gè)html文件，引入layui.css 和 layui.js兩個(gè)文件，一定要將地址寫(xiě)對(duì)，css和js要一起引用；

三、將整個(gè)頁(yè)面分為三部分body標(biāo)簽中要引用的class為class="layui-layout-body"

3.1、頭部部分：用一個(gè)大的div包裹，class="layui-layout layui-layout-admin",然后可以設(shè)計(jì)自己的logo或者所需要的二級(jí)導(dǎo)航，具體實(shí)現(xiàn)代碼如下所示：

3.2、對(duì)左邊的設(shè)置，因?yàn)橐獙?shí)現(xiàn)的效果是點(diǎn)擊左邊顯示右邊的內(nèi)容，所以在左邊最重要的是iframe框架和新建的兩個(gè)html文件；在右邊的主題內(nèi)容區(qū)域，將iframe的name值的設(shè)置為重點(diǎn)，因?yàn)樵谧筮叺贸溄邮歉鶕?jù)<a>標(biāo)簽里得target=“iframe的name”值才能實(shí)現(xiàn)點(diǎn)擊左邊顯示右邊的內(nèi)容，具體實(shí)現(xiàn)代碼如下：

<!--用layui布局左邊的樣式-->
    <div class="layui-side layui-bg-black" >
      <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed"><a href="D_righter.html" rel="external nofollow" target="option">數(shù)據(jù)表格</a></li>
          <li class="layui-nav-item layui-nav-itemed"><a href="表單.html" rel="external nofollow" target="option">表單</a></li>
          <li class="layui-nav-item layui-nav-itemed"><a href="javascript:;" rel="external nofollow" >數(shù)據(jù)表格</a></li>
        </ul>
      </div>
    </div>

3.3、右邊是內(nèi)容的主題部分，剛開(kāi)始映入眼簾的就是D_righter.html只需要一個(gè)iframe框架中的src屬性告訴左邊他們跳轉(zhuǎn)的目標(biāo)是右邊即可，具體代碼如下：

<div class="layui-body" >
      <div >
        <iframe id="option" name="option" src="D_righter.html"  scrolling="no" frameborder="no" width="100%" height="100%"></iframe>
      </div>

    </div>

到此主頁(yè)部分設(shè)置完畢！

第二部分：D_righter.html（也就是動(dòng)態(tài)生成表格部分）

由于只是測(cè)試代碼，并沒(méi)有后臺(tái)數(shù)據(jù)庫(kù)的支持，所以接口會(huì)出現(xiàn)異常；

注意：總共有三種渲染方式，今天介紹兩種：方法渲染和自動(dòng)渲染；今天用的是方法渲染；

方法渲染：其實(shí)這是“自動(dòng)化渲染”的手動(dòng)模式，本質(zhì)類(lèi)似，只是“方法級(jí)渲染”將基礎(chǔ)參數(shù)的設(shè)定放在了JS代碼中，且原始的 table 標(biāo)簽只需要一個(gè)選擇器

自動(dòng)渲染：自動(dòng)是用自動(dòng)渲染表格的方法，也就是在一段table容器內(nèi)配置好相應(yīng)的參數(shù)，由table模塊內(nèi)部實(shí)現(xiàn)自動(dòng)渲染。

1、帶有class="layui-table"的table標(biāo)簽；

2、對(duì)標(biāo)簽設(shè)置屬性lay-data=""用于配置一些基礎(chǔ)參數(shù)；

3、在 <th> 標(biāo)簽中設(shè)置屬性lay-data=""用于配置表頭信息

具體實(shí)現(xiàn)代碼如下，

第三部分：表單的實(shí)現(xiàn)

layui 針對(duì)各種表單元素做了較為全面的UI支持，無(wú)需去書(shū)寫(xiě)那些 UI 結(jié)構(gòu)，你只需要寫(xiě) HTML 原始的 input、select、textarea 這些基本的標(biāo)簽即可。我們?cè)?UI 上的渲染只要求一點(diǎn)，必須給表單體系所在的父元素加上class="layui-form"，一切的工作都會(huì)在你加載完form模塊后，自動(dòng)完成。

<form class="layui-form" action="">
   <div class="layui-form-item">
    <label class="layui-form-label">輸入框</label>
    <div class="layui-input-block">
     <input type="text" name="title" required lay-verify="required" placeholder="請(qǐng)輸入標(biāo)題" autocomplete="off" class="layui-input">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">密碼框</label>
    <div class="layui-input-inline">
     <input type="password" name="password" required lay-verify="required" placeholder="請(qǐng)輸入密碼" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">輔助文字</div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">選擇框</label>
    <div class="layui-input-block">
     <select name="city" lay-verify="required">
      <option value=""></option>
      <option value="0">北京</option>
      <option value="1">上海</option>
      <option value="2">廣州</option>
      <option value="3">深圳</option>
      <option value="4">杭州</option>
     </select>
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">復(fù)選框</label>
    <div class="layui-input-block">
     <input type="checkbox" name="like[write]" title="寫(xiě)作">
     <input type="checkbox" name="like[read]" title="閱讀" checked>
     <input type="checkbox" name="like[dai]" title="發(fā)呆">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">開(kāi)關(guān)</label>
    <div class="layui-input-block">
     <input type="checkbox" name="switch" lay-skin="switch">
    </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">單選框</label>
    <div class="layui-input-block">
     <input type="radio" name="sex" value="男" title="男">
     <input type="radio" name="sex" value="女" title="女" checked>
    </div>
   </div>
   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
     <textarea name="desc" placeholder="請(qǐng)輸入內(nèi)容" class="layui-textarea"></textarea>
    </div>
   </div>
   <div class="layui-form-item">
    <div class="layui-input-block">
     <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
   </div>

  </form>

必須放入 layui 所規(guī)范的元素結(jié)構(gòu)，form 模塊才會(huì)對(duì)其進(jìn)行重置渲染。值得注意的是，在具體的每一塊表單元素中，仍是像往日一樣寫(xiě) input 等標(biāo)簽即可。另外，我們對(duì)我們所規(guī)范的結(jié)構(gòu)進(jìn)行了響應(yīng)式的支持，而針對(duì)一些不同的表單排版，比如行內(nèi)表單，也只需要設(shè)定所定義好的 class 即可。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayui中布局和表格的渲染以及動(dòng)態(tài)生成表格的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!