layui 渲染select下拉選項 ,日期控件的用法

  最近項目中用到關於layui的前端技術,在使用layui 渲染select  option下拉複選框時出現了沒有值渲染的問題,還有使用layui日期的過程 ,接下來就一起看看吧。

/**
*從後臺渲染字段民族數據

/
<div class="layui-inline">
    <label class="layui-form-label"><span style="color: red;">*</span>民族</label>
    <div class="layui-input-inline">
        <select name="nation" id="nation" lay-verify="required" lay-search="">
        </select>
    </div>
</div>
<input type="hidden" id="mzxz" value="${caseBean.nation}" />//設置一個隱藏的input框
function getNation() {
    var temps = $("#mzxz").val();//對應民族input的值
    $.ajax({
        id: getNation,
        type: "post",
        url: '<%=basePath%>case/getNationValues.do',
        dataType : 'json',
        success: function (data) {
            if (data != null) {
                for(var i=0;i<data.length;i++) {
                    if(temps==data[i].type) {
                        $("#nation").append('<option value="' + data[i].type + '" selected>' + data[i].name + '</option>');//此處將後臺等到的數據拼接到對應id爲nation的複選select標籤下,這樣得到後臺民族字典項的數據
                    }else {
                            $("#nation").append('<option value="' + data[i].type +'">' + data[i].name + '</option>');
                        }
                }

            }
            layui.form.render("select");//layui表單需要再次渲染select標籤元素
        },
    });
}

以上數據渲染完了發現沒有出來,後經發現layui規定在渲染select需要再次用

element元素渲染

在使用layui的laydate時需要引入一下文件
<link rel="stylesheet" href="../../js/layui/css/layui.css"/>
<link rel="stylesheet" href="../../laydate/theme/default/laydate.css"/>
<script src="<%=basePath%>/js/layui/layui.js"></script>
<script src="<%=basePath%>/laydate/laydate.js"></script>

$(function () {

    layui.use(["jquery", "upload", 'form', 'element', 'laydate', 'layer'], function () {
     laydate.render({
     elem: '#birthday'//獲取日期標籤元素
    , type: 'date'//日期格式類型(yyyy-MM-dd)
    , done: function (value, date, endDate) {
    }
});
form.render();//layui表單再次渲染

});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章