之前專案後端使用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裡面加好,然後在上面做賦值就...