LAYUI前框框架laydate日期元件重新渲染

2021-09-16 12:43:49 字數 2430 閱讀 8221

之前專案後端使用layui進行開發,因動態的新增需求,需要重新渲染laydate日期元件框,奈何一直沒有尋找到解決方案。仔細除錯網頁後,找到了另外一條相對方便快捷的重新渲染方法

1.先引入所需資源

rel=

"stylesheet"

href

="./layui/css/layui.css"

>

src=

"./layui/layui.js"

>

script

>

src=

"./jquery-2.2.2.js"

>

script

>

2.往body內新增內容

class

="addbox"

style

="background-color

: #eee;

padding

:10px;

margin

:10px 0px;

">

class

="layui-row tims"

>

class

="layui-col-xs4"

>

>

style

="color

: red

">

* span

>

時間label

>

div>

class

="layui-col-xs8"

>

type

="text"

autocomplete

="off"

class

="starttime layui-input laydate"

placeholder

="yyyy-mm-dd hh:ii"

>

div>

div>

div>

class

="layui-row"

style

="height

: 30px;

">

class

="layui-col-xs5"

>

div>

class

="layui-col-xs2"

>

"addline"

style

="cursor

: pointer;

text-align

: center;

line-height

: 30px;

">

新增一行div

>

div>

div>

class

="layui-row"

>

class

="layui-col-xs12"

style

="text-align

: center

">

class

="layui-btn btn-add"

style

="width

: 180px

" type

="button"

>

新增button

>

div>

div>

//這裡是新增日期元件觸發的事件$(

"#addline").

click

(function()

);})

;});

});//這裡可以取消掉注釋輸出所有的值

//除錯輸出每個日期的值

// $(".btn-add").click(function())

// });

//除錯輸出所有不為空日期元件的值$(

".btn-add").

click

(function()

else})

});//網頁第一步會渲染所有的日期元件

//這裡是載入後呼叫的第乙個方法

layui.

use(

'laydate'

,function()

);})

;});

<

/script>

網上一直沒有尋找到比較合適的方案,以此來說,這個可以說是網上最快的解決方式了。

解決過程就不一一贅述了,主要原因在於laydate渲染後所附帶的lay-index會被載入快取(個人理解)

所以再次渲染時,不會重新去渲染。所以修改lay-index標識的值,讓它在渲染器眼裡變成乙個新的元件。

即可去重新渲染它。

LayUi前端框架

首先宣告一下這是我第一次使用前端框架完成後台的配合工作,這在我工作中也是第一次遇見,因為公司有自己的前端開發工程師,不必要我們自己去實現前端的效果,雖然前端的東西並不是很難,但是重點就是繁瑣,小零碎太多,不想後台一樣,側重於邏輯,但是學習起來還是很方便的,就是中間踩到了不少的坑。題外話 只要努力,你...

Layui框架簡介

layui 諧音 類ui 是一款採用自身模組規範編寫的前端 ui 框架,遵循原生 html css js 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,元件豐盈,從核心 到 api 的每一處細節都經過精心雕琢,非常適合介面的快速開發。layui 首個版本發布於 20...

layui框架整理

昨天在畫方框的時候發現搞不定方框,想到之前團隊裡面有人用了layui.就直接用了一下。因為時間緊張,沒有仔細看文件。解決遇到一堆的問題。layui使用form表單實現post請求頁面跳轉 如果想用form表單進行post請求跳轉,只能用這個方式了。所需要的引數在input裡面加好,然後在上面做賦值就...