对于一个后端开发人员来说,常用的easyUI,miniUI,bootstrap,layUI等前端整合式的UI框架能很好的提高页面美观程度以及开发效率

        我个人在开发中,使用过miniUI,bootstrap,layUI,其中miniUI是在公司开发时公司要求学习使用的,个人写东西还是偏重于layUI和bootstrap,毕竟看着漂亮点.

        本次记录的内容是lay-search这个属性在使用时的问题(可能我能力不够,卡了我两个多小时),因为浪费了过多时间,所以记录一下,在我之前有很多类似的文章,但是都很零碎,没有一个比较全的(搜索水平有限)

        首先,lay-search这个属性的作用是:将一个<select>标签初始化为可以输入和选择内容,你输入的文字可以自动匹配,类似百度的搜索.

        下面首先贴代码:

                     <form class="layui-form">
                         <div class="layui-form-item">
                            <div class="layui-inline col-sm-12">
                                <select id="TemplateOptions" name="effectsType" class="layui-select" lay-verify="required" lay-filter="selectTemplate" lay-search>
                                    <option value="">实体要素内容选择</option>
                                </select>
                            </div>
                        </div>
                    </form>

这里,有个问题就出来,很多人写了select标签,也写了lay-search,但是就是不能选择输入,什么原因?

这里就是第一个问题,select中的lay-search这个属性,必须在layui-form标签中才可以生效

如果说没有layui-form包裹,那么你的select仅仅只是一个正常的<select>下拉选择

然后我们option里面的内容,我选择的方式是页面加载就进行查询渲染,不和数据库做实时交互,毕竟数据量不大

我的思路是页面加载-->初始化Layui-->调用Ajax方法请求数据-->在success方法中组装option标签参数-->使用Jquery进行渲染

是不是上面这个方法看着没啥毛病?对啊,确实是没毛病啊,然后我就卡在这里了,<select>标签里面永远没有我的数据,不管我是用id渲染还是用name获取元素去渲染,都没有数据,不管我用append还是add都一样,最后在layui的文档中发现了,让你给这个lay-search以后重新给了数据以后,需要调用layui.form这个对象进行一次调用,进行重新渲染.否则不会生效.

所以我就这样写了:

layui.use(['element','form'], function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form;
        $.ajax({
            type: "POST",
            url: prefix + "/*****",
            data: null,
            dataType: 'json',
            success: function(result) {
                var datas = "";
                var data = result.data;
                for(var i = 0;i<data.length;i++){
                    var text = data[i].rtContent.replace(/<\/?.+?>/g,"").replace(/ /g,"");
                    datas += "<option value='"+text+"'>" + text +"</option>";
                }
                $('#TemplateOptions').append(datas);
                form.render('select');
            },
            error: function(error) {
                $.modal.alertWarning("获取模版数据失败");
            }
        });
});

在layui这个js模块初始化的时候顺便获取了下数据这里就是调用重新渲染,括号里面写select就是只重新渲染了当前页面的所有select,如果什么都不写就是默认全页面重新渲染

 

最后,我希望在我选择以后,这个数据要放在其他的地方,或者弹出来等,然后我就很耿直的去和以前纯js开发那样,直接给option里面去拼接了onchange事件,这样的话,选择完不就可以直接拿值了吗?

嘿嘿......怎么可能满足你.事实是,拼接了onchange事件以后,并没有啥卵用,不会其任何作用,你打开他的页面结构你会发现这鬼地方哪来的所谓的option????所以你绑定的东西.并没有啥卵用,那怎么办呢?

 

layUI,bootstrap等UI框架都需要做的一件事,就是事件监听.你需要自己去初始化一个监听事件,这里我并没有了解过为什么这样,听前端朋友说这样写会好一点,安全一点

form.on('select(selectTemplate)',function(data){
            console.info(data.value);
        })

在刚刚的ajax获取数据的代码下面,layui初始化方法的里面,我加上了这么一行,这样以后,你就可以在你下拉框中的数据确定变动以后,获取到这里的数据.

 

这次的记录就这些,希望以后有人使用这个东西,能花费很少的时间完工