IDyun

IDyun VIP0

22764飞吻 2018-8-9 加入 来自南宁

(福尔摩斯名言“排除一切不可能的,剩下的即使再不可能,那也是真相”)

IDyun 最近的提问

    没有发表任何求解

IDyun 最近的回答

  • 1天前个人感觉文档有的地方不太完整,例如表单验证中回答:


    https://www.layui.com/doc/modules/form.html#attr
    官方的验证有个坑,都是必填的。
    看以前的问题回答说,这个坑挖了,又填了,又挖开了,现在不填了。

    最好是自定义验证。
  • 1天前table的单元格编辑类型在返回值中能否增加原数据?中回答:

    还少了一个空 验证
  • 1天前table的单元格编辑类型在返回值中能否增加原数据?中回答:

    @IDyun
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    <style>

    /*单元格 必填红框*/
    .layui-table-cell-danger {
    border: 1px solid rgb(255, 87, 34) !important;
    position: fixed !important;
    z-index: 99999;
    }
    </style>
    </head>
    <body>
    <p>1、性别列验证 返回 原先值</p>
    <p>2、积分列 输入框设置 数字 修改统计列 修改其他评分列</p>
    <p>3、加入时间列 显示日期控件</p>
    <p>4、职业列显示 下拉列表</p>
    <p>5、编辑数据表格,键盘快捷键方法。
    *可跳过无编辑属性的列
    *tab 右边一个单元格
    *shift + tab 左边一个单元格
    *enter 下一行的单元格
    *shift + enter 上一行的单元格 </p>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    </div>
    </script>
    <script type="text/html" id="selectTpl">
    <select>
    <option value=""></option>
    <option value="作家">作家</option>
    <option value="酱油">酱油</option>
    <option value="词人">词人</option>
    </select>
    </script>
    <button type="button" class="layui-btn" id='submit'>立即提交</button>

    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

    <script>
    layui.use(['table', 'layer', 'laydate', 'form'], function () {
    var table = layui.table, laydate = layui.laydate, form = layui.form;
    var layer = layui.layer
    var $ = layui.$;
    table.render({
    elem: '#test'
    , url: '/demo/table/user/'
    , toolbar: '#toolbarDemo', totalRow: true //开启合计行
    , cols: [[
    {type: 'radio'}
    , {field: 'id', width: 80, title: 'ID', sort: true, totalRowText: '合计:'}
    , {field: 'username', width: 80, title: '用户名'}
    , {
    field: 'sex', width: 80, title: '性别', sort: true, edit: 'text',
    style: 'box-shadow: 1px 1px 20px rgba(0, 0, 0, .15);background-color: #fff;'
    }
    , {
    field: 'joinTime',
    title: '加入时间',
    width: 120,
    edit: 'text',
    event: 'date'
    }
    , {
    field: 'experience', width: 80, title: '<span style="color:red">*</span>积分', sort: true, totalRow: true,
    event: 'experience',
    edit: 'text',
    style: 'box-shadow: 1px 1px 20px rgba(0, 0, 0, .15);background-color: #fff;'
    }
    , {field: 'score', width: 80, title: '评分', sort: true, totalRow: true}
    , {
    field: 'classify', width: 80, title: '职业',
    edit: 'text', event: 'select'
    }
    , {field: 'wealth', width: 135, title: '财富', sort: true}
    ]]
    , page: true
    });

    //头工具栏事件
    table.on('toolbar(test)', function (obj) {
    var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
    switch (obj.event) {
    case 'getCheckData':
    var data = checkStatus.data; //获取选中行数据
    layer.alert(JSON.stringify(data));
    break;
    }
    ;
    });

    table.on('edit(test)', function (obj) { //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
    var value = obj.value //得到修改后的值
    , data = obj.data //得到所在行所有键值
    , field = obj.field; //得到字段
    switch (obj.field) {
    case 'sex':
    if (value != '男' && value != '女') {

    layer.msg('性别只能是男或女!', {icon: 0});
    var oldValue = $(this).prev().text()//得到修改前的值
    $(this).val(oldValue);
    }

    break;
    case 'experience':
    obj.update({score: value * data.experience});//修改其它列
    updateTotla('test', 'experience')
    updateTotla('test', 'score')
    break;
    }
    });

    //操作栏操作按钮的事件
    table.on('tool(test)', function (obj) {

    var data = obj.data;
    var that = this;
    var field = $(that).data('field');
    var othis = $(this)

    switch (obj.event) {
    case 'experience':
    $(this).find('input').attr('type', 'number');
    $(this).removeClass('layui-table-cell-danger');
    break;
    case 'date':

    //时间选择器
    laydate.render({
    elem: $(this).find('.layui-table-edit').get(0) //
    ,
    show: true //直接显示
    ,
    done: function (value, date) {
    //同步更新缓存对应的值
    obj.update({
    [field]: value
    });
    }
    });

    break;
    case 'select':
    var ELEM_EDIT = 'layui-table-edit';
    var select = $($('#selectTpl').html()).attr('lay-filter', field).val(data[field]);
    othis.append(select);
    form.render();
    othis.find('select').remove();
    //添加下拉框的单元格样式
    othis.find('.layui-form-select').addClass(ELEM_EDIT).focus()
    setTimeout(function () {
    //展开下拉框
    othis.find('.layui-form-select').addClass('layui-form-selected')
    });
    form.on('select(' + field + ')', function (data) {
    //同步更新缓存对应的值
    obj.update({
    [field]: data.value
    });
    });
    break;
    }
    });

    $('#submit').click(function () {
    var flag = true;
    $.each(table.cache['test'], function (index, item) {
    if (!item.experience) {
    layer.msg('请填写积分列!', {icon: 0});
    //显示红色边框
    $('#test + .layui-table-view .layui-table-main td[data-field="experience"]').addClass(function () {
    if ($(this).find('.layui-table-cell:empty').length) {
    return 'layui-table-cell-danger'
    }
    })
    flag = false;
    return false;
    }
    });
    if (!flag) return;
    layer.alert(JSON.stringify(table.cache['test']), {
    title: '最终的提交信息'
    })
    })

    //修改表格的合计列
    //id=表格id, field = 要统计和列,fixed 小数位数,可不填默认为0
    function updateTotla(id, field, fixed = 0) {
    //统计
    var totla = $.map(table.cache[id], function (item) {
    return Number(item[field] || 0);
    }).reduce(function (total, num) {
    return total + num
    }, 0).toFixed(fixed);
    //修改统计单元格
    $('#' + id).next('.layui-table-view').find('.layui-table-total td[data-field="' + field + '"] .layui-table-cell').text(totla);
    }

    var $ = layui.$;
    /*
    *编辑数据表格,键盘快捷键方法。
    *可跳过无编辑属性的列
    *tab 右边一个单元格
    *shift + tab 左边一个单元格
    *enter 下一行的单元格
    *shift + enter 上一行的单元格
    */
    $(document).on('keydown keyup', '.layui-input',
    function (event) {
    var td = $(this).parent('td'),
    index = td.index(),
    tr = td.parent('tr'),
    isShift = $(document).data('shift'),
    isKeydown = (event.type == "keydown");
    switch (event.key) {
    case "Shift":
    $(document).data('shift', isKeydown);
    break;
    case "Tab":
    event.preventDefault();
    isKeydown && td[isShift ? 'prevAll' : 'nextAll']('[data-edit="text"]:first').click();
    break;
    case "Enter":
    isKeydown && tr[isShift ? 'prev' : 'next']().children('td').eq(index).click();
    break;
    }
    })
    });
    </script>

    </body>
    </html>
  • 1天前table的单元格编辑类型在返回值中能否增加原数据?中回答:

    1、性别列验证 返回 原先值

    2、积分列 输入框设置 数字 修改统计列 修改其他评分列

    3、加入时间列 显示日期控件

    4、职业列显示 下拉列表

    5、编辑数据表格,键盘快捷键方法。
    *可跳过无编辑属性的列
    *tab 右边一个单元格
    *shift + tab 左边一个单元格
    *enter 下一行的单元格
    *shift + enter 上一行的单元格
    https://fly.layui.com/jie/49384/page/2/
  • 1天前table 头部工具栏 下拉框中回答:

  • 1天前如何在页面初始化的时候自动加载radio事件?中回答:

    一模拟点击
      layui.$(':radio[name="sex"]:checked + .layui-form-radio').click();
    二 单独写个方法
    var value = $(':radio[name="sex"]:checked').val();//获取选中的值

    function chageRadio(value){

    }
    chageRadio(value)
  • 1天前弹出层模板怎么用中回答:

    <script type="text/html" id="discPlanDetailTpl">
    <div class="layui-row" lay-filter="discPlanDetail" id="discPlanDetail" >
    //中间的代码略 去掉隐藏样式
    </div>
    </script>
    layer.open({
    type: 1
    ,content: $('discPlanDetailTpl').html()
    ,yes: function(){
    layer.closeAll();
    },success: function(layero){
    //初始化控件
    element.render();//如导航
    form.render();//如表单
    table.render();//如表格
    layero.find('.classNname');//获取弹窗里面的内容 元素
    }
    });
  • 2天前layui的下拉表单,如何将选中的项,对应的value值,传到后台去。中回答:

    <select id='demo' name='demo'>略</select>
    $('#demo').val();
    $('select[name="demo"]').val()
  • 2天前layui渲染表格出现问题 求解决中回答:

    那你去掉 table 的url 能显示 表格吗?
  • 2天前数据表格动态加载表头中回答:

  • 2天前取消默认样式的checkbox选中状态中回答:

    //获取选中的复选框,将其设置成未选
    $(':checkbox[name="onlysomebody"]:checked').prop('checked',false);
    form.render();
  • 2天前如何动态修改单页版标签页的标题中回答:

    $('#LAY_app_tabsheader').find('li.layui-this span').html('动态标题');
    单页版 在当前页面
  • 2天前这个lay()是什么东西啊?中回答:

    laydata 的 里面的方法,引入单独组件的时候,可以用这个方法发
  • 2天前layui动态表格列不会自适应宽高中回答:

    可以将 width 改为 minWidth
  • 2天前laydate 选择时,如果上下的空间不够,选择界面盖住输入框,选择界面会消失中回答:

    好像是因为 父容器小 会失去焦点,所以直接设置 laydata 触发事件就可以了。
    https://www.layui.com/doc/modules/laydate.html#trigger
    //自定义事件
    laydate.render({
    elem: '#test'
    ,trigger: 'click' //采用click弹出
    });
  • 3天前特性“lay-verify”未知中回答:

    idea eclipse 编辑器忽略 未知标签、属性 提醒
    https://fly.layui.com/jie/43401/#item-1547308422351
  • 3天前layuiAdmin买了都一天了还是不会用中回答:

  • 3天前layDate怎样在ui中取出秒的选择,即格式为yyyy-MM-dd HH:mm中回答:

    社区以前的答案
    /*隐藏秒*/
    .laydate-time-list {
    padding-bottom: 0;
    overflow: hidden
    }
    /*时分 宽度 */
    .laydate-time-list>li {
    width: 50%
    }
  • 3天前可编辑单元格中回答:

    通过获取到 input 然后 修改 type 类型
    https://fly.layui.com/jie/49846/#item-1553158342844
  • 4天前父子页面的input有没有便捷的传递方式中回答:

    页面层和iframe 都是用 form.val() 方法赋值
    https://fly.layui.com/jie/46700/#item-1545909964857

    如果不用上面这个方法,你可以这样写,
    $.each(data,function(name, value){
    body.find(':input[name="'+name+'"]').val(value);
    })
    这只是 输入框的写法,还有下拉框,文本域 这些可以参考 form.val() 方法源码。
  • 4天前layui ifame title获取和layui表达式的问题中回答:

    https://fly.layui.com/jie/63680/#item-1584538194779

    社区用的搜索 ,必应搜索收录页面有点慢,百度收录还快些。
  • 5天前我怎么根据一个js字符串的值,选择单选框呢。中回答:

    $(':radio[name="sex"][value=0]').prop('checked', (sex==0));
    form.render()
  • 5天前layui 弹窗 table 值的传递中回答:

  • 5天前layui 编辑行 合计中回答:

  • 5天前小白求助,文本域不能正常使用中回答:

    如果你想要用layui 表单提交方法获取到编辑器的内容,可以参考官方例子
    通过验证方法 将 编辑器 iframe 同步到 文本域中 textarea 。
    https://www.layui.com/demo/form.html

  • 5天前关闭弹层后,清空表单,但是有时候赋值隐藏域的值没有清空掉中回答:

    ,success: function(layero){
    layero.find(‘#text_id’).val("111111111");
    }
    layero 就是弹层的内容,可以jq 选择器,获取赋值,事件
  • 5天前layui下拉框筛选查询中回答:

    有可能是表格重载带上次的查询条件,所以你要可以看一下,浏览器开发人员工具 网络那里的查询条件。
  • 5天前用top.layer.open()弹出的弹窗,如何获取父页面的元素,如何回调父页面的方法中回答:

    页面加载异步时间有时候可能会获取不到。

    //父页面
    layui.use('layer', function(){ //独立版的layer无需执行这一句
    var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

    top.layui.layer.open({
    type: 2 //此处以iframe举例
    ,content:"test.html"
    ,area: ['750px','450px']
    ,success: function(layero,index){
    //iframeWindow 随便起的变量名。
    top.window['layui-layer-iframe' + index].iframeWindow = window;
    }
    })
    //回调方法
    window.myFunctionName=function (data) {
    console.log('回调方法')
    }
    )}
    子页面 iframe
    layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form
    ,layer = layui.layer
    ,layedit = layui.layedit
    ,laydate = layui.laydate;


    // 赋值给 parent 可能有问题,现在不清楚,所以可以直接用 window.iframeWindow
    parent = window.iframeWindow || parent;
    console.log(parent.myFunctionName)
    })
  • 5天前点击编辑,如何将数据表格本行数据传到弹出框中去呢?中回答:

  • 5天前怎么给 table 的某个单元格赋值中回答:

    https://fly.layui.com/jie/59054/#item-1571908642416
    全部都在下面这个代码的作用域范围内操作,
    比如弹窗放在里面,自带的yes 回调可以调用 obj.update 方法
    table.on('tool(test)', function (obj) {
    js操作
    })
    弹窗 yes按钮,可以获内容的方法,在社区有很多人分享回答,你搜一下