table用最小的修改来支持最大的数据结构自由

讨论 已结
26 1479
岁月小偷
悬赏:50飞吻
等到脖子都长了的table修改依旧在路上哈,继续期待,不过也看了好多次问如何处理嵌套结构的数据了。分享一个我认为改动最小对数据的匹配自由度极高的方案,以此贴为记录不用每次都说一遍哈。
最主要的思路就是补充一个ajax成功返回之后渲染之前的数据处理。目前的response配置的功能主要就是重命名来匹配后台返回的数据结构,但是只支持单层结构。第二个功能就是定一个成功返回的状态码。
table.js源码改动如下

混淆过的table.js修改的地方

修改代码
typeof options.renderResponse === 'function' && (res = options.renderResponse(res));
typeof n.renderResponse==='function' && (t=n.renderResponse(t));

到此layui组件的修改就可以了,一句代码的事,最主要的功能就是给table拓展一个属性配置,可以在table.render中进行个性化数据的设置。
页面使用方法如下

注意!红色框里面的内容不要动,照抄就可以了,然后绿色框就根据后台返回的数据结构来确定了。
比如:
dataTemp【this.response.countName】= data.pageList.total;
dataTemp【this.response.dataName】 = data.pageList.list;
dataTemp【this.response.statusName】 = data.code;
dataTemp【this.response.msgName】 = data.message;
回帖
  • 下个版本应该就支持了
    1 回复
  • [赞]
    1 回复
  • [good]
    1 回复
  • @HiTerry 嗯嗯,应该是有的下个版本,没办法远水救不了近火,只能先处理一下用这以后更新了再把对应的修改去掉就好了。
    1 回复
  • 1 回复
  • 1 回复
  • Fufu
    2018-6-6
    1 回复
  • 这个方法很不错,目前解决了不必要的麻烦[good]
    1 回复
  • 1 回复
  • 元子
    2018-6-15
    楼主厉害厉害 已经修改正常使用
    0 回复
  • @元子 过奖了哈,估计下个版本就会有类似的处理来支持多样化的后台返回数据结构,就是不知道啥时候更新,先用着到时候官方支持了就把自己的处理给修改一下应该就可以用了[微笑]
    0 回复
  • Junie
    2018-7-13
    666[good]
    0 回复
  • 0 回复
  • 沒找到這段代碼~
    0 回复
  • @阿祖555 你的代码是什么样的呢?使用layui.js然后use table还是用layui.all.js,all.js因为所有的组件都在一起了,所以找起来麻烦点但是细心找也能找到,然后table.js得看是源码的还是混淆过的,混淆的js修改起来也比较费劲,但是也能找到的,$.ajax里面应该就一个。然后找到后面的success
    0 回复
  • @岁月小偷 感謝您耐心答覆,我用的是table.js, 2.3.0版本.
    0 回复
  • @阿祖555 嗯嗯,就是这里

    箭头指向的地方,就是在success的首行加上我的代码修改的那一行typeof n.renderResponse==='function' && (t=n.renderResponse(t));,就可以了后面的就是table根据需要设置这个renderResponse,如果返回的数据结构是单层的,可以用response设置就可以了,如果用response搞不定的,就可以用renderResponse来中心组合数据,这个组合的组合的时候只要按照我正文说的,前面的框不要任何改动,后面的根据数据返回的指定就好了,理论上可以满足任意结构的返回,比如嵌套,比如就返回一个[{},{}]数组没有其他任何的数据之类的都是可以处理的。试试看。
    0 回复
  • @岁月小偷 感謝小偷好人一生平安
    可能是理解能力問題, 以為是要將typeof options.renderResponse === 'function' && (res = options.renderResponse(res));
    改成
    typeof n.renderResponse==='function' && (t=n.renderResponse(t));

    以所找來找去都沒找到代碼
    0 回复
  • @阿祖555 谢谢[微笑] 可以用了是吧
    0 回复
  • @岁月小偷 還沒有 研究當中[嘻嘻] [嘻嘻]
    0 回复
  • @阿祖555 嗯嗯看看会不会遇到什么问题,实在弄不出来的话把遇到的问题和代码发给我看看是不是哪里没设置对。
    0 回复
  • @岁月小偷 感謝你
    0 回复
  • @阿祖555 不客气[微笑]
    0 回复
  • @岁月小偷 可以向您拿QQ嗎, 交個朋友[微笑]
    0 回复


  • 紅框地方始終沒找到
    0 回复
  • @阿祖555 你是说没找到修改的地方还是说没有找到你画红色框框里面的那句呢?红色框框打叉的那句就是新加进去的源码没有的额,你可以把你table.js或者如果你用的是layui.all.js的话把对应的js放到云盘上我给你修改一下再给你,或者加我QQ额470459819
    0 回复