www.javainfo.com.cn 上干货 欢迎收藏

layui是目前比较流行的前台HTML界面效果框架，   渲染过后，数据才会展示，所以 渲染过程是必须的

本实例说明select的效果实现，如下图：

实现流程及如何渲染 介绍如下：

1) 引入layui的依赖包

 

2） 界面初始化

    

3）加载数据并渲染select的效果

    

       function addDictypeListToSelect() {

            $.ajax({

                url : "<%=basepath>/util/dic/lists.do",

                type : "GET",

                dataType : "json",

                success : function(result){

                            var list = result.data;//返回的数据

                            var types = document.getElementById("dictype_select_form");

                            for (var i = 0; i < list.length; i++) {

                            types.options.add(new Option(list[i].typeName,list[i].id));  //这里是自己数据的属性

                }

                //渲染部分  必须添加 

                layui.use('form', function(){  

                          var form = layui.form;

                          form.render("select");

                }

           );

     }

});

}

 addDictypeListToSelect(); //调用数据加载

4）JSON数据格式

   {"data":[

{"createBy":0,"flagDel":"0","id":1,"remark":"测试数据","typeName":"职位级别","typeValue":"type_zhiwei"},{"createBy":0,"flagDel":"0","id":7,"remark":"userRole -data_level ","typeName":"菜单数据权限","typeValue":"menu_data_level"}

]}    

如有疑问 请留言 欢迎提供建议