layui table 动态添加行引发重复渲染,怎么解决

提问 已结 11 713
怂包包
怂包包 2019-5-14
悬赏:20飞吻
版本:layui 2.4.5 浏览器:谷歌
这是表格
添加一行点击事件
需要传值给数据库获取数据的渲染方法

如题,我每次点击增加一行的时候,都会刷新表格去调用渲染方法,把我要的东西刷没,渲染方法删了半点毛病没有,
重载渲染也试过,同样的问题。。
回帖
  • @怂包包 那就不要给table设置url而是自己发ajax请求去获得数据;只要你的config里面url有值,每次reload都是重新发送请求,然后以url返回的数据为准,直接pass掉data,
    1 回复
  • 怂包包
    2019-5-14
    求助,有大佬在么[泪]
    0 回复
  • 怂包包
    2019-5-14
    救命啊!!!!!!!!!!萌新要被老板杀啦~~~~~
    0 回复
  • 关键是你说的你要的东西是什么?什么东西刷没了,这个没有体现出来,第二个问题是如果table的config里面同时有url和data,他只认url接口返回的数据,不会理会data。
    0 回复
  • 怂包包
    2019-5-14
    @岁月小偷 新增的一行空数据
    0 回复
  • 怂包包
    2019-5-14
    @岁月小偷 但是我已经把url返回的数据存进了另外一个数组里去了鸭
    0 回复
  • @怂包包 那就是上面说的第二点,如果是data模式就用纯的data,如果是url就用url,没办法混合着用的
    0 回复
  • 怂包包
    2019-5-14
    @岁月小偷 原来这样
    0 回复
  • 阿酷
    2019-6-18
    @岁月小偷 高手,请教个问题啊,有空帮忙指点一下啊,万分感激!
    layui table 分页始终显示首页的内容,table重载无效!
    我在table.rendertable.render({ url: '/JSON/demo1.json' //数据接口 })设置了数据接口,在后台从数据库里面读取数据后,重新写入demo1.json。在分页laypage的jump方法中,重载table。后台重写demo1.json没问题,数据是对的。但是为何前端始终显示第一页的数据?
    代码如下:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WorkFlowSystem.FormManage.WebForm1" %>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layPage快速使用</title>
    <script type="text/javascript" src="../JQuery/layui/lay/modules/laydate.js"></script>
    <link href="../JQuery/layui/css/modules/laydate/default/laydate.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../JQuery/layui/css/layui.css" media="all" />
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">員工工號</label>
    <div class="layui-input-inline">
    <input name="CardNum" class="layui-input" id="CardNum" runat="server" type="text" autocomplete="off" lay-verify="CardNum">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">員工姓名</label>
    <div class="layui-input-inline">
    <input name="ChineseName" class="layui-input" id="ChineseName" runat="server" type="text" autocomplete="off" lay-verify="ChineseName">
    </div>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">入職日期</label>
    <div class="layui-input-inline">
    <input name="EnterDateBegin" class="layui-input" id="EnterDateBegin" runat="server" type="text" placeholder="yyyy-MM-dd" autocomplete="off" lay-verify="date">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">入職日期</label>
    <div class="layui-input-inline">
    <input name="EnterDateEnd" class="layui-input" id="EnterDateEnd" runat="server" type="text" placeholder="yyyy-MM-dd" autocomplete="off" lay-verify="date">
    </div>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">離職日期</label>
    <div class="layui-input-inline">
    <input name="LeaveDateBegin" class="layui-input" id="LeaveDateBegin" runat="server" type="text" placeholder="yyyy-MM-dd" autocomplete="off" lay-verify="date">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">離職日期</label>
    <div class="layui-input-inline">
    <input name="LeaveDateEnd" class="layui-input" id="LeaveDateEnd" runat="server" type="text" placeholder="yyyy-MM-dd" autocomplete="off" lay-verify="date">
    </div>
    </div>
    </div>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
    <div id="test1"></div>
    <input type="hidden" id="hidcount" name="hidcount" value="0" runat="server" />
    <input type="hidden" id="hidpage" name="hidpage" value="1" runat="server" />
    <input type="hidden" id="hidlimit" name="hidlimit" value="10" runat="server" />
    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/javascript" src="../JQuery/layui/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script type="text/javascript" src="../JQuery/layui/lay/modules/jquery.js"></script>
    <script>
    var table_name;
    layui.use(['table'], function ()
    {
    var table = layui.table //表格
    //执行一个 table 实例
    //执行渲染
    alert("33333333333333333333");
    table_name = table.render(
    {
    elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
    , limit: document.getElementById("hidlimit").value
    , height: 420
    , url: '/JSON/demo1.json' //数据接口
    , id: 'tableOne'
    , title: '用户表'
    , page: false //开启分页
    , toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
    , totalRow: false //开启合计行
    , cols: [[ //表头
    { type: 'checkbox', fixed: 'left' }
    , { field: 'CardID', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: false }
    , { field: 'CardNum', title: '員工工號', width: 80, edit: 'text', sort: true }
    , { field: 'ChineseName', title: '員工姓名', width: 80, edit: 'text', sort: true }
    , { field: 'MailAddress', title: '郵箱地址', width: 80, edit: 'text', sort: true }
    , { field: 'EntryDate', title: '入職日期', width: 80, edit: 'date', sort: true }
    , { field: 'LeaveDate', title: '離職日期', width: 80, edit: 'date', sort: true }
    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
    ]]
    , done: function (res, count) {
    }
    });
    alert("4444444444444444444444444");
    //监听头工具栏事件
    table.on('toolbar(test)', function (obj)
    {
    var checkStatus = table.checkStatus(obj.config.id)
    , data = checkStatus.data; //获取选中的数据
    switch (obj.event) {
    case 'add':
    layer.msg('添加');
    break;
    case 'update':
    if (data.length === 0) {
    layer.msg('请选择一行');
    } else if (data.length > 1) {
    layer.msg('只能同时编辑一个');
    } else {
    layer.alert('编辑 [id]:' + checkStatus.data[0].id);
    }
    break;
    case 'delete':
    if (data.length === 0) {
    layer.msg('请选择一行');
    } else {
    layer.msg('删除');
    }
    break;
    };
    });
    //监听行工具事件
    table.on('tool(test)', function (obj)
    { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    , layEvent = obj.event; //获得 lay-event 对应的值
    if (layEvent === 'del') {
    layer.confirm('真的删除行么', function (index) {
    obj.del(); //删除对应行(tr)的DOM结构
    layer.close(index);
    //向服务端发送删除指令
    });
    } else if (layEvent === 'edit') {
    layer.prompt({
    formType: 2
    , value: data.email
    }, function (value, index) {
    obj.update({
    email: value
    });
    layer.close(index);
    //向服务端发送删除指令
    });
    }
    });
    });
    layui.use('laypage', function ()
    {
    var laypage = layui.laypage;
    //执行一个laypage实例
    laypage.render(
    {
    elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
    , count: document.getElementById("hidcount").value //数据总数,从服务端得到
    , limit: document.getElementById("hidlimit").value
    , limits: [10, 20, 30, 40, 50, 60, 70]
    , groups: 5
    //, curr: location.hash.replace('#!fenye=', '') //获取起始页
    //, hash: 'fenye' //自定义hash值
    , curr: document.getElementById("hidpage").value //获取起始页
    , prev: '<<'
    , next: '>>'
    , first: '首页'
    , last: '尾页'
    , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    , theme: '#c00'
    , jump: function (obj, first) {
    //obj包含了当前分页的所有参数,比如:
    console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
    console.log(obj.limit); //得到每页显示的条数
    //首次不执行
    if (!first) {
    //do something
    document.getElementById("hidpage").value = obj.curr;
    location.href = "WebForm1.aspx?Page=" + obj.curr + "&Limit=" + obj.limit + "";
    alert("1111111111111111");
    table_name.reload({
    url: '/JSON/demo1.json' //数据接口
    });
    alert("222222222222222222222");
    }
    else {
    //alert("2");
    //alert(obj.curr);
    //alert(obj.limit);
    }
    }
    });
    });
    </script>
    </body>
    </html>
    0 回复
  • @阿酷 你这个思路还真有点诡异,为啥能查数据了不直接把数据给table而是弄到一个json文件里面去呢?然后跳页的话也是整个页面都冲洗刷一下,把分页的数据放到url中去,这个真心觉得很浪费;撇去这些问题,如果你检查一下你的json文件确实是修改了,那么很有可能就是因为缓存的问题,你给
    url: '/JSON/demo1.json?time=' + new Date().getTime() //数据接口
    给表格的json加上一个会变的数据试试
    0 回复