精华内容
下载资源
问答
  • layui控件的一些内容

    2019-01-14 14:04:58
    补充一点layui文档中没有提到的内容。 首先是表单值的初始化问题,文档中有这方面的内容,但是现在要做到的是在弹窗框中展示表单,要给表单中的控件初始化一个值(就是弹出一个编辑表单),然后点击确定按钮时验证...

    补充一点layui文档中没有提到的内容。

    首先是表单值的初始化问题,文档中有这方面的内容,但是现在要做到的是在弹窗框中展示表单,要给表单中的控件初始化一个值(就是弹出一个编辑表单),然后点击确定按钮时验证表单中的某项是否为空或者说表单中的某项必填。因为弹出层中的确定按钮是生成的,所以无法像文档中的那样直接验证,需要把验证的事件转移到弹出层生成的按钮中。

    首先是表单的初始赋值问题:

    form.val("editForm_1", {//第一个参数是form标签的 lay-filter值
                'SiteName': baseData.SiteName,
                'IP': baseData.IP,
                'DataAddress': baseData.DataAddress,
                'IsActivated': baseData.IsActivated,
                'SiteType': baseData.SiteType.toString()
    
                //这些则为input标签或者select标签的name属性。
            });

    这里有一点是,在为多选input设置值的时候,需要把获取到的data转成字符串。

    提交验证是否为空时,原本需要在提交按钮中设置属性,这里按钮是弹出层生成的,所以可以这样设置按钮的属性

     success: function (layero, index) {
                    layero.addClass("layui-form");
                    layero.find('.layui-layer-btn0').attr('lay-filter',             
                      'formVerify').attr('lay-submit', '');
                },

    在弹出层的success中设置,如果是多个按钮需要验证,则在...find('.layui-layer-btn1')替换btn后面的数字。

    然后和success一样,有一个end:function()....意思在窗口关闭时执行的方法。

    二是这是table表格中的复选框随着接收的data选定或者不选定。

    首先,在table设置中默认所有的复选框不选定

    table.render({
                    elem: '#tableOne',
                    limit: 12,
                    height: height,
                    title: '测试表',
                    cols: [[
                        { field: 'IsActivated', LAY_CHECKED: false, title: '起用', align: 'center', width: 80, type: 'checkbox' },
                    ]],
                    //即设定LAY_CHECKED:false;

    再在data中逐条设置每条数据的选定与否

    if (data.length != 0) {
                                for (let i = 0; i < data.length; i++) {
                                    data[i].index = i + 1;
                                    data[i].LAY_CHECKED = data[i].IsActivated;
                                };

    这样,表格中的复选框就会随着数据的变化而改变选定状态。

    三,下拉框的多选设置。找了蛮久的文档,但是好像一直没有开发下拉框的多选控制,但是有额外的插件兼容layui的下拉框,实现多选,formSelects-v4.js插件。

    for (var i = 0; i < tableFields.length; i++) {  
              str_1.push({ "name": tableFields[i], "value": tableFields[i], "selected": "" });
                }//这里是组装插件要用到的数组
    
                formSelects.data('mult_3', 'local', {
        //formSelects要在layui中调用
                    arr: str_1
                });
    
    
    HTML部分:
    <select class="layui-input" id="eKeyField" lay-verify="required" lay-search lay-filter="select_3"  name="eKeyField" xm-select="mult_3"></select
    //重点是xm-select="mult_3",这里是要实现多选的标签。
    
    //监听取值
     formSelects.on('mult_1', function (id, vals, val, isAdd, isDisabled) {
            cellString = '';
            if (vals.length > 0) {
                for (var i = 0; i < vals.length; i++) {
                    cellString += vals[i].value + ",";
                }
            }
            cellString += val.value + ",";
        });
    //cellString就是所选取的值以“,”隔开的字符串

     

    展开全文
  • 这个是因为表单的input框在vue中做了双向绑定,在按照layui的方式给表单赋值时在表单中看见了值,但是vue中的对象并没有赋值,做了双向绑定,导致在某个input输入时,触发了vue将表单刷成了没有值的状态。...

    在layui与vue一起使用时,表单中的某个input输入框在输入值的瞬间,表单中其它的input框中的值都不见了。这个是因为表单的input框在vue中做了双向绑定,在按照layui的方式给表单赋值时在表单中看见了值,但是vue中的对象并没有赋值,做了双向绑定,导致在某个input输入时,触发了vue将表单刷成了没有值的状态。

    总结:只要layui与vue配合使用,做了双向绑定,不管是给什么类型的元素赋值,都需要按照layui的方式赋值,然后再给vue中的data赋值。只有双向赋值了,才能赋值成功

    展开全文
  • layui时间框赋值

    2020-11-06 14:41:54
    layui时间框赋值 经常在一些表单验证中,选中时间后此时间并不满足需求,需后台直接赋予时间框一个数值,但是使用jquery直接赋值不起效,大家可以试下以下方式,通过模拟点击时间控件的方式才获取时间数据。大家使用...

    layui时间框赋值

    经常在一些表单验证中,选中时间后此时间并不满足需求,需后台直接赋予时间框一个数值,但是使用jquery直接赋值不起效,大家可以试下以下方式,通过模拟点击时间控件的方式才获取时间数据。大家使用开发者模式F12就明白了原理。

           		var xsTime = new Date(s+"");
                var xeTime = new Date(e+"");
                var sDate = s.split(" ");
                var eDate = e.split(" ");
                var time = laydate.render({
                    elem: '#timeRange'
                    ,type:'datetime'
                    ,value:value
                    ,range:'-'
                    ,min:sDate[0]
                    ,max:eDate[0]
                    ,done:function (value,date,endDate) {
                        this.value = value;
                        this.elem.val(value);
                        if(value == ""){
                            redBorder("任务日期不能为空",$("#timeRange"));
                        }else {
                            var hours = endDate.hours;
                            var minutes = endDate.minutes;
                            var seconds = endDate.seconds;
                            // 改变结束时间默认值
                            if (hours == "0" && minutes == "0" && seconds == "0"){
                                $(".layui-laydate-footer [lay-type='datetime'].laydate-btns-time").click();
                                // 如果是datetime的范围选择,改变开始时间默认值
                                // 改变结束时间默认值
                                $(".laydate-main-list-1 .layui-laydate-content li ol li:last-child").click();
                                // 如果不是范围选择,只是日期时间选择
                            }
                            //需求默认值
                            var str = value.split(" - ");
                            var rsTime = new Date(str[0]);
                            var reTime = new Date(str[1]);
                            if(xsTime.getTime() > rsTime.getTime()){
                                console.log("小于xsTime",s);
                                $(".laydate-main-list-0 .layui-laydate-content li:nth-child(1) ol li:eq("+xsTime.getHours()+")").click();
                                $(".laydate-main-list-0 .layui-laydate-content li:nth-child(2) ol li:eq("+xsTime.getMinutes()+")").click();
                                $(".laydate-main-list-0 .layui-laydate-content li:nth-child(3) ol li:eq("+xsTime.getSeconds()+")").click();
                            }
                            if(xeTime.getTime() < reTime.getTime()){
                               //redBorder("任务截止日期应小于需求截止日期",$("#timeRange"));
                                //修改时间
                                $(".laydate-main-list-1 .layui-laydate-content li:nth-child(1) ol li:eq("+xeTime.getHours()+")").click();
                                $(".laydate-main-list-1 .layui-laydate-content li:nth-child(2) ol li:eq("+xeTime.getMinutes()+")").click();
                                $(".laydate-main-list-1 .layui-laydate-content li:nth-child(3) ol li:eq("+xeTime.getSeconds()+")").click();
                            }else{
                                dataOk($("#timeRange"));
                            }
                        }
                    }
                });
    
    展开全文
  • layui 时间控件 单击 年直接赋值

    千次阅读 2018-06-21 13:03:00
    在 //选中 lay(ul).find('li').on('click', function(){ //结尾处添加 if (options.done === "year") { that.setValue(that.parse()).remove(); } <script src="laydate/la...

    //选中
    lay(ul).find('li').on('click', function(){  //结尾处添加

            if (options.done === "year") {
            that.setValue(that.parse()).remove();   
            }
    <script src="laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
    
    
    //年选择器
    laydate.render({
        elem: '#test1'
      , type: 'year'
      , done: "year"
    });

     修改压缩版位置

    w(n.footer).find(D).removeClass(s);
                    if (a.done === "month" && (ym + "").length < 4) { n.setValue(n.parse()).remove() } if (a.done === "year") { n.setValue(n.parse()).remove() };}

     

    转载于:https://www.cnblogs.com/enych/p/9208469.html

    展开全文
  • 表格点击"编辑"进入页面,将值赋给控件,其余没问题,就是富文本赋值之后上传按钮点击无效,而且报layedit not defined![在这里插入图片描述]...
  • layui的表单控件的input文本框赋值

    千次阅读 2020-01-08 11:01:37
    第一种: //org-table 行监听器 table.on('tool(org-table)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data;...
  • var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句 layer.msg('正在打开',{time:100}); layer.msg('正在打开',{time:100}); layer.open({ type: 2 //此处以iframe举例 , title: '...
  • ![图片说明](https://img-ask.csdn.net/upload/202005/14/1589421369_625029.png)如何使用layui日历控件,在日期中赋值?将图片中的表情换成后台获取的对应值,放在每个日期下面.
  • 背景 今天遇到的情况是,在表格中需要针对指定的产品进行缩略图片的替换操作 那么,我需要根据所赋值不同索引信息的 class进行数据获取与修改 在此,进行整理(截图展示),希望能帮到有需求的道友吧
  • 点击前往复制代码=>http://www.shagua.wiki/project/3?p=97
  • 产生这一现象原因:由于源码中是先执行done再进行赋值的 解决方法: 方法1(亲测有效):修改源码: 找到源文件搜索黄色背景的代码,用来确定位置,然后添加蓝色背景的代码即可。 方法2(本方法未亲测): 可以在...
  • 在实际项目中遇到使用下拉选择时能需要输入选项中不存在的值,软件中使用的是Layui的框架,其中不存在需求的控件,但是其下拉菜单控件有这类似的功能,只是不能保存输入值和修改时赋值的问题(因为选项中可能不存在...
  • 原因:使用jquery赋值html代码问题 解决方法:使用js代码处理即可,如: document.getElementsByTagName('tbody')[0].innerHTML = 自己的html代码;
  • Layui 2.代码 var formHtml = $($("div [name |= '" + formname + "form']")[formnum - 1]).html(); ``` //复制 $newform = $("<div name=\"" + formname + "form\">" + formHtml + "</div>"); //插入 ...
  • 最近在使用layui框架做城市的三级级联的时候,发现jquery中的onchange事件方法在layui框架中失效了。 然后浏览layui社区,了解...对于动态拼接,给一个控件赋值的是否,layer也比jquery多一步。 jquery: $('#city').a
  • layui图片上传相关问题解决办法

    千次阅读 2019-04-12 14:47:14
    参考layui实例 高级应用:制作一个多文件列表 再把上传按钮隐藏,在图片控件里面写 choose:function(obj){obj.preview(function(index,file,result){ 记录文件数组,字段设置城false,赋值一段html到页面上,...
  • 解决方案:利用layui插件进行时间筛选,通过相关逻辑对数据进行筛选,通过控件输入时间段,通过查询按钮响应事件,进行相关逻辑判断,对数据进行筛选,通过查询按钮,把时间段赋值为空即可清除输入时间段,同时展示...
  • //项目查询功能ajax发请求 填入html弹出框控件 var projectUpdate = function(projectid){  $("#projectId").attr("value",projectid);//给项目编号文本框赋值 ... layui.u...
  • html中有相关的输入框标签控件,可以使用html+css做出自己想要的效果,也可以使用一些样式框架中的组件,比如elementUI,layUI,bootstrap等等。下面使用html+css写一个搜做框效果,经供参考。1、html代码<input ...
  • 在使用layui中laydate.js,即时间控件,如果出现这个问题给文本框input赋值后,自动清空文本框input,基本上确定了,是因为赋值的时间格式和定义的格式不一致。需要做如下检查: 1.确保待赋值的日期格式是正确的; ...
  • 我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋值不成功。我也不知道什么问题。如果有知道原因的大神,求赐教! 所以说一旦有不兼容的弹出框,就自己画了。画多了,就...
  • 多文件上传

    千次阅读 2019-02-23 11:33:24
    一般的上传空间的原理都是使用input type='file’的h5元素实现的,那这个layui的原理也是如此。 每次点击选择文件按钮,控件自动生成一个input,将文件选择,选择后将其files中的属性提取出文件名,大小等信息,...

空空如也

空空如也

1 2
收藏数 26
精华内容 10
关键字:

layui控件赋值