layuiadmine 数据表格 无法自定义表头

提问 未结
15 172
nanophp
悬赏:20飞吻
版本:layui layuiAdmin Pro 浏览器:chrome
在表头中放置一个按钮且带内置图标,表格加载后只有文字显示在<span>标签中了,页面上不显示表格和图标
回帖
  • 你说的是自动渲染的表格?或者用table.init的形式渲染表格的是吧?这个如果要自定义title应该要放在lay-data的title中,原始的title只会取text()所以图标就没了,

    差不多设置成下面的

    出来的效果
    0 回复
  • @岁月小偷 怎样通过laytpl和自定义模板去动态加载表格的表头
    0 回复
  • @nanophp 没太明白你的意思,有没有截图或者描述的更加具体一点,方法一般是有的,就是要针对不同的具体问题。
    0 回复
  • @岁月小偷 表格是二级表头的表格,表头的内容是从后台获取的,获取后将值作为这个表格的表头,怎么去动态的加载这个表头
    0 回复
  • @nanophp 嗯嗯,有点理解你的意思了,你说的是这个表头的内容是后台返回给你的,经过table转化转化就剩下text()了其他的内容都不见了是么?如果是的话其实有两个思路可以处理,第一个就是上面给你截图的,它init的时候设置title的时候就是找到这个th的text(),显然如果里面是html的话就会有问题,所以不知道可不可以简单的处理就是将

    这个换成html();
    另外一种思路就是其实后台返回了这个table的时候可以在init之前对这些table的th节点进行装修改造,改成table组件认识的,比如我下面的这个一开始它的table啥都没有,经过处理也可以init出来


    0 回复
  • @岁月小偷
    怎样将我要装载的表头的内容显示在表格上去,目前是已经获取了要装载的表头的信息,但是在js里面通过$("#view").html()
    表格上还是没有添加的内容,使用table.render也没效果
    0 回复
  • @nanophp 不能这么处理的额,因为你这个表格是原始的表格,table.render或者init之后这个表格是被隐藏的,你可以试一下审查一下元素看看,实际上原始的table也就是你表头设置了id的这个是看不到的,如果正常的话应该也是渲染完成模板设置进去了这个th里面了,只不过你设置错地方了,view不能是原来的table里面的而是table给我们生成出来的tableview里面的对应的th,不过这个比较坑爹的是你th里面设置的id应该是不会同步到你下面的th的,不过这个也好办,通过过来了更加麻烦,要用field,字段都是有field的,没有设置的话会给的是遍历的index。比如你的th设置为username,那么view = this.elem.next().find('th[data-field="username"]').find('.layui-table-cell');这样子先试试看能不能渲染到th中。
    能的话就要更加优化的处理,因为这样子写其实也是有问题的,会把排序的模块也干掉,所以建议在lay-data的设置中先给title设置成'<span name="username_th"><span>';然后view对应的改成
    view = this.elem.next().find('th[data-field="username"]').find('.layui-table-cell span[name="username_th"]');
    0 回复
  • @岁月小偷 this.element.next(),报错提示Cannot read property 'next' of undefined
    0 回复
  • @nanophp 哦,手误,不是element是this.elem
    0 回复
  • @nanophp 看了下我没写this.element呀[偷笑] 是你写错了吧哈,是this.elem.next()
    0 回复
  • @岁月小偷 我自己也是写的this.elem.next(),问题描述写错了,写this.elem.next()报错,
    0 回复
  • @nanophp 哦哦,看到了~~跟table的done给串了,你这个是自己发的admin.req的回调~~,试试这个$('#原始table的id').next();
    0 回复
  • @岁月小偷 这样我要渲染的内容就在一个th里面了,这里是两个th
    0 回复
  • 实际上表格中不建议或者不允许设置两个同名的field的,同名的话会有问题的,比如拖动的时候,你这块的表头着实有点怪,但是思路就是和并列的话不要设置field,你可以给他里面的内容设置个容器,后面找到这些容器就可以了,只有实际显示的列才设置field,不过你这表头着实看不明白,th里面套span里面又有th这种表头还是第一次见到,一般来说的多级表头不是这样子弄的额。你这个感觉并不是一个多级表头,而是一个一级的表头,只不过里面的内容比较复杂而已。
    0 回复
  • @岁月小偷 一级和二级的内容都是动态的,目前只是在渲染一级表头的时候渲染不进去,span里面有th是找到了this.elem.next().find('th[data-field="username"]').find('.layui-table-cell span[name="username_th"]')这里的元素后通过html()将要插入表头的th放进去了,所以才有span里面出现th的,现在把这个this.elem.next().find('th[data-field="username"]')整个元素替换成th之后,新加的表头的样式和之前的不一样
    0 回复