A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

  • 问题描述:想实现点击按钮在表格添加一行的功能,但发现layuii并未集成该工具栏,因此,需要自己手动添加这个功能;
  • 原先我写的table是这样实现的:


    • $("#addTable").click(function(){



    •                                var tr=" <tr>"+



    •                                          "  <td>11</td>"+



    •                                          "  <td>22</td>"+



    •                                          "  <td>33</td>"+



    •                                          "  <td>44</td>"+



    •                                          "  <td>55</td>"+



    •                                          "  </tr>";                  



    •                                         $(".layui-table").append(tr);



    •                                 });


    并不能实现添加的效果;后查询后发现,这样做是基于table是用静态的方式编写的,即:


    • <table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'tableInfo'}" lay-filter="test">



    •                                   <thead>



    •                                     <tr>



    •                                       <th lay-data="{field:'id', width:80, sort: true}">ID</th>



    •                                       <th lay-data="{field:'username', width:80}">用户名</th>



    •                                       <th lay-data="{field:'sex', width:80, sort: true}">性别</th>



    •                                       <th lay-data="{field:'city'}">城市</th>



    •                                       <th lay-data="{field:'sign'}">签名</th>



    •                                       <th lay-data="{field:'experience', sort: true}">积分</th>



    •                                       <th lay-data="{field:'score', sort: true}">评分</th>



    •                                       <th lay-data="{field:'classify'}">职业</th>



    •                                       <th lay-data="{field:'wealth', sort: true}">财富</th>



    •                                     </tr>



    •                                   </thead>



    •                                 </table>


    而我用的是这样的方式:<table class="layui-hide" id="baseInfo"  lay-filter="demo" lay-data="{height: 'full-200', cellMinWidth: 80, page: true, limit:30}"></table>关于列名的定义是写在table.render({})方法中的
  • 解决方案:将table改写成静态的方式即可,即第二部分代码
  • 此时出现新问题:每点击一次会出现两条数据,应做如下修改:$(".layui-table-body .layui-table").append(tr);最后即可实现点击按钮新增一条数据的效果。

2 个回复

倒序浏览
回复 使用道具 举报
奈斯,加油加油
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马