table纯data模式下的新增与删除

讨论 已结 86 5620
岁月小偷
悬赏:50飞吻
有没有觉得工具监听给他们的提供的del方法不靠谱,如果对table的静态数据新增还有修改有疑问的可以看看,其实这个使用场景不多,也没怎么重视,一般来说table都是设置url发请求,那么新增修改删除都是跟server交互然后reload表格就可以了,没必要自己还去处理什么缓存数据然后更新table里面的显示内容之类的。但是如果是data模式,那么新增修改删除操作的其实就是静态数据,然后也是reload就可以了,也许会说工具条的监听中给我们的参数中自带del和update,为啥不直接用,update其实还是可以用的只不过目前对templet为方法实现的支持update之后有问题而已。后续应该会修复的一个bug。del就真的呵呵了,见过删除了之后总条数不变的删除吗?见过删除之后翻页再翻回来还能自己回来的吗?只能说简直了这操作。
今天不改源码,因为完全舍弃监听提供的del。其实最主要的思路还是操作数据然后reload,所有的增删改都只要对数据进行操作就可以了,渲染的工作留给控件本身,不需要总是想着如何操作table的dom给添加一行删除一行,修改某一行的某一个td之类的,更不可取的思路就是只想着这些dom的操作完全不考虑数据方面的处理。
新增效果图(完整测试代码: https://pan.baidu.com/s/1a_FxGYiJhx8-G6JjeefDmA

删除数据效果图

除了数据处理之外为了得到更好的体验,一般来说就有另外一个问题就是如何确定reload的时候的page的curr
关键代码
// 工具监听
table.on('tool(testTable)', function (data) {
switch (data.event) {
case 'del':
// 只做测试数据的删除用,url的删除一般都是发交易然后重载表格就可以了
var tableObj = tableIns;
var config = tableObj.config;
var dataTemp = config.data;
var page = config.page;
// 得到tr的data-index
var trElem = data.tr.first();
var index = trElem.data('index');
// 计算出在data中的index
var dataIndex = index + page.limit * (page.curr - 1);
// 删除对应下标的数据
dataTemp.splice(dataIndex, 1);

// 新的页数
var pageNew = Math.ceil(dataTemp.length / page.limit);

// 重新接收reload返回的对象,这个很重要
tableIns = table.reload(config.id, $.extend(true, {
// 更新数据
data: dataTemp
}, config.page ? {
// 如果删除了数据之后页数变了,打开前一页
page: {
curr: page.curr > pageNew ? ((page.curr - 1) || 1) : page.curr
}
} : {}));
break;
default:
break;
}
});

// 新增一条记录
$('#createNew').click(function () {
// debugger;
var tableObj = tableIns;
var config = tableObj.config;
var dataTemp = config.data;
dataTemp.push({id: 'new' + new Date().getTime()});
tableIns = table.reload(config.id, $.extend(true, {
// 更新数据
data: dataTemp,
}, config.page ? {
// 一般新增都是加到最后,所以始终打开最后一页
page: {
curr: Math.ceil(dataTemp.length / config.page.limit)
}
} : {}));
});
回帖
  • 虽然用不上这个功能,但是感觉好厉害![嘻嘻] 向大神学习!
    0 回复
  • @4流马鹿 表单里面的按钮如果是一个普通的按钮,要给他强制的设置一个type="button"不然部分浏览器默认是submit的,点击就提交表单了造成页面的刷新
    1 回复
  • //监听工具条
    table.on('tool(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
    var tr = obj.tr; //获得当前行 tr 的DOM对象

    if(layEvent === 'detail'){ //查看
    //do somehing
    } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
    layer.close(index);
    //向服务端发送删除指令
    });
    } else if(layEvent === 'edit'){ //编辑
    //do something

    //同步更新缓存对应的值
    obj.update({
    username: '123'
    ,title: 'xxx'
    });
    }
    });
    这是官方示例,我感觉没啥问题啊
    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
    有明确的说明是操作DOM
    0 回复
  • @艾大叔是土匪 如果你认为总共1000条数据,删除了n条之后还是1000条数据,一切换页面这些数据又回来了,这些都是正常的没问题的,完全可以用obj.del玩一玩,直接无视我的就可以了。我这个只针对认为删除数据就是删除数据,每删除一条就会失去一条数据而且切换了也不会再回来的这个逻辑才是正常的逻辑的人准备的。
    0 回复
  • @菜鸟程序猿 [嘻嘻] 彼此彼此
    0 回复
  • @岁月小偷 其实就是删除只删除DOM,没有删除数据源,我觉得对于一个框架来说,这根本不叫问题,开发者手动删一下也不是不可以啊。
    0 回复
  • @艾大叔是土匪 这个见仁见智了。没说他做得不对,我直说他这个只是一个玩具,玩玩就可以了,分享这个出来也只是为了给那些把这个玩具当生产力工具来使被坑的人一个解决的思路,还有一个认清楚他提供的到底是一个什么东西。
    0 回复
  • kalowei
    2018-6-15
    兄弟,想问一下你,你一边你自定义的css和js都是放在哪里的?
    比如我用了layuiadmin这个后台模版,有如下这么两个大目录:


    js应该是放在controller文件吗?
    css呢?
    而且我们自定义的js一般怎样才算规范呢?比如官网说的layui.define()定义,这个什么时候使用?


    像我这样定义的话,我想对某个模块重用呢???
    以前都是:
    $(function(){
    show(); //调用
    });

    function show(){

    }
    0 回复
  • kalowei
    2018-6-15
    真不好意思呢,打扰一下你的帖子,因为我确实在这个点上有点迷茫。所以向你请教一下
    0 回复
  • 这一块要好好看看官方的文档额。里面写的很详细 http://www.layui.com/doc/base/modules.html#extend layui的基础和组件是layui其他任何产品的底层支撑。不搞明白这个也就不好弄其他的,如果弄明白了其实不管用layuiIM或者layuiAdmin都是差不多的,比如你说的想要加自己的扩展,一方面可以controller的文件家里面,然后你就用里面的一个js作为参考修改你自己的js,后面页面直接layui.use你自己的js这个就可以了,如果你想把你自己的js跟admin自带的给区分开来自己开了个文件夹存放,那么需要在第一次use之前需要给layui.extend一下,然后后面就指定自己的路径,注意是相对于controller的相对路径就好。

    当然也可以extend一个其他服务器上的文件
    0 回复