新浦京81707con > 软件下载 > layui实现点击按钮给table添加一行,layui点击按钮

原标题:layui实现点击按钮给table添加一行,layui点击按钮

浏览次数:102 时间:2019-07-18

前日曾经打响加多了一行,前几日期望所增进的一行能够张开单元格编辑。

例行下的layui在3个button按键

•难点陈诉:想达成点击开关在报表增多一行的成效,但发掘layuii并未有集成该工具栏,因而,需求自身手动加多这么些功用;

可是,开采增加了edit:'text'未来也不能开始展览单元格编辑,而原本已有的数据足以,由此通过浏览器调节和测量检验看了本来面目数据的样式,如图所示:

图片 1

•原先小编写的table是如此达成的:

图片 2

调整和收缩之后

$("#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);
  });

就此,将点击开关增多一行<tr>标签的法子,修改为如下:

图片 3

并无法兑现增加的意义;后查询后开采,这样做是依赖table是用静态的措施编写的,即:

$("#addTable").click(function(){
var tr=" <tr>" 
   " <td data-field='domainId' data-edit='text'> <div class='layui-table-cell laytable-cell-1-domainId '>11 </div></td>" 
   " <td data-field='colName' data-edit='text'> <div class='layui-table-cell laytable-cell-1-colName '>22 </div></td>" 
   " <td data-field='typeName' data-edit='text'> <div class='layui-table-cell laytable-cell-1-typeName '>33 </div></td>" 
   " <td data-field='scale'  data-edit='text'> <div class='layui-table-cell laytable-cell-1-scale  '>44 </div></td>" 
   " <td data-field='notNull' data-edit='text'> <div class='layui-table-cell laytable-cell-1-notNull '>55 </div></td>"       
   " </tr>";                                                                 
 $(".layui-table-body .layui-table tbody").append(tr); });

代码为

<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>

职能如下:

<button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">修改门店</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-danger del-activity">删除活动</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">关闭活动</button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">开启活动</button>

而自个儿用的是那样的法子:<table class="layui-hide" id="baseInfo"  lay-filter="demo" lay-data="{height: 'full-200', cellMinWidth: 80, page: true, limit:30}"></table>

本文由新浦京81707con发布于软件下载,转载请注明出处:layui实现点击按钮给table添加一行,layui点击按钮

关键词: 新浦京81707con

上一篇:错误的解决方法,MVC命名空间时引起错误的解决

下一篇:没有了