layui之渲染下拉框

前言：个人转码小说网站：友书-绿色、纯净、无广告，欢迎广大小说阅读爱好者同行来本网站看小说，书友交流群：580462139（群主及管理均为资深90后程序猿哦）

       众所周知，layui是一套非常棒的前端框架，虽然layui的官方文档给的十分详细，但我们在做的时候仍然会遇到各种各样的问题，如不会渲染，前台和后台交互不了，

        以下，就位大家讲解如何使用layui框架动态为select下拉框赋值并重新渲染框架

方式一：纯html页面，ajax绑值，并利用layui原生框架在绑值后重新渲染样式（如不渲染，则会造成前端select已经option选项，但layui样式中没有）

      前台：

 <div style="float: left;">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    调查床位:</label>
                <div class="layui-input-block">
                    <select name="sysBunk" lay-filter="sysBunk" id="sysBunk" lay-search="" lay-verify="select">
                    </select>
                </div>
            </div>
        </div>


    $.post("Ajax/SatisfactionSurvey.ashx",{action:"GetBunkNo"},function(data){
                if(data!=undefined&&data!=null&&data!=""){
                var html="";
                    for(var i=0;i<data.length;i++){
                        if(i==0){
                             html+="<option value=''>直接选择或搜索选择</option>";
                        }else{
                             html+="<option value="+data[i]["BunkId"]+">"+data[i]["BunkNo"]+"</option>";
                          }
                     }
                       $("#sysBunk").append(html);
                }
                //重新渲染select
                form.render('select');
            },"Json");

        注意：Ajax绑值之后，需要使用：form.render('select')来为select下拉框重新渲染样式，否则就会造成绑值不上的假象（值其实已经绑上去了，只是layui没有对应的渲染上去，造成从前端来看，select下拉选项中仍然没有值的假象）

 

对应后台代码：

 /// <summary>
    /// 获取床位集合
    /// </summary>
    /// <param name="context"></param>
    public void GetBunkNo(HttpContext context)
    {
        List<VM_SysBunk> db_list = new List<VM_SysBunk>();
        DataSet ds = new Sys_BunkBLL().GetList("");
        if (ds.Tables[0].Rows.Count > 0)
        {
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                VM_SysBunk db_model = new VM_SysBunk();
                db_model.BunkId = Convert.ToInt32(ds.Tables[0].Rows[i]["BunkId"]);
                db_model.AreaId = Convert.ToInt32(ds.Tables[0].Rows[i]["AreaId"]);
                db_model.BunkNo = ds.Tables[0].Rows[i]["BunkNo"] + "";
                db_model.DeviceType = ds.Tables[0].Rows[i]["DeviceType"] + "";
                db_model.DeviceStatus = ds.Tables[0].Rows[i]["DeviceStatus"] + "";
                db_model.OrderNo = Convert.ToInt32(ds.Tables[0].Rows[i]["OrderNo"]);
                db_model.Remark = ds.Tables[0].Rows[i]["Remark"] + "";
                db_model.CreateUserId = ds.Tables[0].Rows[i]["CreateUserId"] + "";
                db_model.CreateUserName = ds.Tables[0].Rows[i]["CreateUserName"] + "";
                db_model.CreateAt = Convert.ToDateTime(ds.Tables[0].Rows[i]["CreateAt"]);
                db_model.LastModifiedUserId = ds.Tables[0].Rows[i]["LastModifiedUserId"] + "";
                db_model.LastModifiedUserName = ds.Tables[0].Rows[i]["LastModifiedUserName"] + "";
                db_model.LastModifiedAt = Convert.ToDateTime(ds.Tables[0].Rows[i]["LastModifiedAt"]);
                db_model.IsDelete = Convert.ToBoolean(ds.Tables[0].Rows[i]["IsDelete"]);
                db_model.BunkType = ds.Tables[0].Rows[i]["BunkType"] + "";
                db_list.Add(db_model);
            }
        }
        context.Response.Write(JsonConvert.SerializeObject(db_list));
    }

 

方法二：前台页面初始化的时候循环绑值

(Ps:特别说明：在code-behind模式中，页面初始化有两个阶段，分别是前台页面后台初始化，举例：

       在aspx页面中：加载页面时，最先被初始化的是当前页面的后台，后台初始化完毕并运行完所有需在初始化时运行的代码之后才会进入前台初始化阶段，

)

        前台代码：

<div style="float:left;margin-left:15px">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">类别</label>
                        <div class="layui-input-inline">
                            <select name="BookType" id="selectType" lay-filter="selectType" lay-search>
                                @{
                                    foreach (var item in ViewBag.BookType)
                                    {
                                        if (index == 0)
                                        {
                                            <option value="0">请选择书籍类别</option>
                                             <option value="@item.TypeId">@item.TypeName</option>
                                        }
                                        else
                                        {
                                            <option value="@item.TypeId">@item.TypeName</option>
                                        }
                                        index++;
                                    }
                                }
                            </select>
                        </div>
                    </div>
                </div>
            </div>

 

后台代码：

 public ActionResult BookList()
        {
            List<Book_Type> db_list = new List<Book_Type>();
            db_list = new BookBLL().GetBookType();
            ViewBag.BookType = db_list;
            return View();
        }

 

以上，为layui表格使用一个简单demo

联系方式：

                 wechat&QQ&Tel：13501715983（如查不到请加QQ：631931078或352167311）

                 个人邮箱：13212644043@163.com

                 

如有问题或改进地方请多多指点，本文为个人原创，转载请加以说明