如何实现layui.table修改某行，不刷新页面或有table.relaod

Posted 2023-05-11

参考技术A $('#maintable').datagrid( url:"datagrid_data.php",queryParams:pageNumber:pageNumber1,pageSize:pageSize1 ,method:"post");本回答被提问者采纳

layui动态数据表格，每次操作完数据，数据表格刷新，且回到之前所操作的数据位置

layui.use([‘table‘,‘upload‘], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var layer = layui.layer;
    var upload = layui.upload;
     tableSupplierLinkman =function(){
            title = $(‘#demoReload‘).val()
            title == undefined ? title = ‘‘ : ‘‘;
            table.render({
            elem: ‘#LAY_table_user‘
            , url: ‘/getAnalyisList‘
            , method: ‘get‘
            , where: { title: ‘‘ }
            , toolbar: ‘#toolbarDemo‘
            , title: ‘情报列表‘
            , loading: true
            // <!-- 右侧默认工具栏 -->
            , defaultToolbar: [‘exports‘, ‘print‘]
            , cols: [[
    //            { type:‘checkbox‘, fixed: ‘left‘},
                 { field: ‘id‘, title: ‘ID‘, width: 80, fixed: ‘left‘, unresize: true, sort: true }
                , { field: ‘_id‘, title: ‘news_id‘, hide: true }
                , { field: ‘title‘, title: ‘标题‘}
                , { field: ‘chn_name‘, title: ‘分类‘ }
                , { field: ‘source‘, title: ‘来源‘ }
                , { field: ‘lang‘, title: ‘语言‘, width: 60  }
                , { field: ‘publish_time‘, title: ‘时间‘, templet:function(res){
                    if(res.publish_time == ‘None‘) {
                       res.publish_time = ‘‘
                    }else {
                        res.publish_time = moment(res.publish_time).format(‘YYYY-MM-DD‘);
                    }
                    return res.publish_time
                } }
                , { field: ‘content‘, title: ‘内容‘, width: 350 }
                , { field: ‘isClue‘, title: ‘情报是否分析过‘, width: 350, hide: true, templet:(res)=>{
                    if(res.isClue) {  //数据已经分析过
                         $(‘#barDemo‘).html(`<button type="button" class="layui-btn layui-btn-danger layui-btn-sm"  lay-event="look">查看</button><button type="button" class="layui-btn layui-btn-disabled layui-btn-sm idClue">情报已分析</button>`)
                     }else {  //数据没有分析
                         $(‘#barDemo‘).html(`<button type="button" class="layui-btn layui-btn-danger layui-btn-sm"  lay-event="look">查看</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-sm noIsClue"  lay-event="analyse">情报分析</button>`)
                     }
                } }
                , { fixed: ‘right‘, title: ‘操作‘, toolbar: ‘#barDemo‘, width: 200}
            ]]
            , id: ‘testReload‘
//            , page: true
            , page: {
                layout:[‘prev‘,‘page‘,‘next‘,‘skip‘,‘limit‘,‘count‘],
                group: 10, // 只显示几个连续码
//                first: false, //不显示首页
//                last:false, //不显示尾页
//                curr: 1 // 设定初始在第5页
                  curr: $(".layui-laypage-skip .layui-input").val()

            }
            ,done:function() {
                 $(‘#demoReload‘).val(title); // 为搜索框赋值
            }

        });


        var active = {
            reload: function () {
                var demoReload = $(‘#demoReload‘).val();
                //执行重载
                table.reload(‘testReload‘, {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        title: demoReload
                    },
                     done:function(res,curr,count) {
                        $(‘#demoReload‘).val(demoReload); // 为搜索框赋值
                    }
                }, ‘data‘);
            }
        };
     }

    tableSupplierLinkman()

    //头工具栏事件
    table.on(‘toolbar(LAY_table_user)‘, function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        if (obj.event == ‘add‘) {
             addArticle(obj);
        }else if(obj.event == ‘getCheckData‘){
            var data = checkStatus.data;
            batchData(data);
//            layer.alert(JSON.stringify(data))
        }
    });

    //监听行工具事件
    table.on(‘tool(LAY_table_user)‘, function (obj) {
        var data = obj.data;
        if (obj.event === ‘del‘) {
           articleDelete(obj,data);
        }else if(obj.event === ‘look‘) {
             showArticle(obj)
//            location.href = "/articleInfo?id="+data.news_id
        }else if (obj.event == ‘analyse‘) {
            analyseArticle(obj,data);
        }
    });

    // <!-- 数据的重载，同时处理按钮放在表格头部，数据重载，dom重组，绑定事件消失，利用监听的方式，重新让按钮绑定事件 -->
    $(‘body‘).on(‘click‘, ‘.search‘, function () {
        var type = $(this).data(‘type‘);
        active[type] ? active[type].call(this) : ‘‘;
    });

     //给数据表格头部，添加回车事件
     $(‘body‘).on(‘keydown‘, ‘#demoReload‘, function (e) {
        var curkey = e.which;
        if(curkey == 13){
            var demoReload = $(‘#demoReload‘).val();
            //执行重载
            table.reload(‘testReload‘, {
                page: {
                    curr: 1 //重新从第 1 页开始
    //                    curr: currPage //重新从第 1 页开始
    //                      curr:$(".layui-laypage-em").next().html()  //主要代码行
                }
                , where: {
                    title: demoReload
                },
                done:function(res,curr,count) {
                    $(‘#demoReload‘).val(demoReload); // 为搜索框赋值
                }
            }, ‘data‘);
         }
    });

    upload.render({
        elem: ‘#test3‘
        ,url: ‘https://httpbin.org/post‘ //改成您自己的上传接口
        ,accept: ‘file‘ //普通文件
        ,done: function(res){
          layer.msg(‘导入成功!‘);
          console.log(res);
        }
      });

});


//对单个数据的分析处理
function  analyseArticle(obj,data){
    layui.use([‘layer‘,‘table‘], function(){
        var layer = layui.layer;
        var table = layui.table;
         layer.confirm(‘正在准备进行线索分析，请稍后查看‘,{
              icon:1,
              title:‘提示‘,
              btn:[‘知道了‘]
          }, function (index) {
              layer.close(index);
              tableSupplierLinkman()
          });
//        $.ajax({
//            method:‘post‘,
//            url:‘/alterClassify‘,
//            data:{
//                classify_id,
//                classify_name_eng,
//                classify_name
//            },
//            success:function(res) {
//                if(res.code == 1) {
//                   layer.msg(‘分析成功!请去门户页面查看!‘, {icon: 1})
//                }else {
//                   layer.closeAll();
//                   layer.msg(‘分析失败!‘, {icon: 2})
//                }
//
//            }
//        })
   })
}

//批量对数据进行分析处理
function batchData(data) {
    alert(JSON.stringify(data));
     layer.confirm(‘分析成功!请去门户页面查看!‘,{
          icon:1,
          title:‘提示‘,
          btn:[‘知道了‘]
     }, function (index) {
          layer.close(index);
     });
}

function showArticle(obj) {
    layui.use([‘layer‘,‘form‘,‘table‘], function(){
    var layer = layui.layer;
    var table = layui.table;
    layer.open({
          //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
          type: 2,
          title: "情报详情页",
//        skin: ‘layui-layer-rim‘, //加上边框
          maxmin: true,
          area: [‘620px‘, ‘520px‘],
          content: `/articleInfo?id=${obj.data.news_id}`,   //引用的弹出层的页面层的方式加载修改界面表单
      })
  })
}

function reserCon() {
//    console.log($(‘.titleA1‘).val());
//     layui.form.render();
}