精华内容
下载资源
问答
  • LayUI table新增空白

    2020-08-18 14:09:34
    LayUI官方没有新增空白这方面的资料,网上现有的办法也没办法给动态数据(render时放url请求得到的数据)新增(可能有,但是我没找到) 就自己修改了layui的tables.js
  • Layui】------- Layui table 新增数据

    万次阅读 热门讨论 2018-07-25 13:37:42
    1. 插入到表格最前面 代码实例: 2.阿里云米店:... <div id="Gl_Table">...table class="layui-hide" id="Table" style="max-height: 500px; height: 500px;" lay-filter="demo"...

    1. 插入到表格最前面 代码实例:

    2.阿里云米店:https://mi.aliyun.com/shop/36078 

    <div id="Gl_Table">
            <table class="layui-hide" id="Table" style="max-height: 500px; height: 500px;" lay-filter="demo"></table>
              
        </div>

     

    1. 
      
      
       var AddData=[
              {审批状态:"已完成",报销人:"liyoubing",部门名称:"开发部门",名称:"名称",描述:"描述",创建时间:"2017-05-03",单据时间:"2017-06-02",总金额:"12"},
              {审批状态:"审核中",报销人:"liyoubing1",部门名称:"开发部门1",名称:"名称",描述:"描述",创建时间:"2017-02-02",单据时间:"2017-02-02",总金额:"120"},
              {审批状态:"已完成",报销人:"liyoubing21",部门名称:"开发部门21",名称:"名称",描述:"描述",创建时间:"2017-02-02",单据时间:"2017-02-02",总金额:"44"},
              {审批状态:"已完成",报销人:"liyoubing22",部门名称:"开发部门22",名称:"名称",描述:"描述",创建时间:"2017-02-02",单据时间:"2017-02-02",总金额:"10"},
              {审批状态:"已完成",报销人:"liyoubing23",部门名称:"开发部门23",名称:"名称",描述:"描述",创建时间:"2017-02-02",单据时间:"2017-02-02",总金额:"47"},
          ];
      
        var layer = layui.layer ,form = layui.form,table=layui.table,$=layui.jquery,laydate=layui.laydate;
        table.render({
          elem: '#Table',
          height:700
      // ,url:'/demo/table/user/'
          ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            ,groups: 1 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
            ,limit: 20
          }
          ,cols: [[
            {checkbox: true},
            {field:'审批状态', width:'10%', title: '审批状态', sort: true}
            ,{field:'报销人', width:'10%', title: '报销人'}
            ,{field:'部门名称', width:'15%', title: '部门名称', sort: true}
            ,{field:'名称', width:'15%', title: '名称'}
            ,{field:'描述', title: '描述', width: "20%"}
            ,{field:'创建时间', width:"15%", title: '创建时间', sort: true}
            ,{field:'单据时间', width:"15%", title: '单据时间', sort: true}
            ,{field:'总金额', width:"10%", title: '总金额'}
            
          ]],
          data:AddData
          
        });
      
      // 新增一行
      $("#btn-add").off("click").on("click",function(){
      
      var data1={审批状态:"已完成",报销人:"liyoubing1722",部门名称:"开发部门1221",名称:"出差调查",描述:"出差",创建时间:"2018-07-25",单据时间:"2018-07-05",总金额:"922"};
      
      AddData.unshift(data1);
      
      table.reload('Table',{
      
      data : AddData
      
      });

    2. 插入表格的最后一行 实例代码 

     //新增
      $("#btn-add").off("click").on("click",function(){
         // BottonCommonMenthod();
        // var oldData =  table.cache["Table"];
              
              var data1={审批状态:"已完成",报销人:"liyoubing1722",部门名称:"开发部门1221",名称:"出差调查",描述:"出差",创建时间:"2018-07-25",单据时间:"2018-07-05",总金额:"922"};
              AddData.push(data1);
              table.reload('Table',{
                  data : AddData
              });
    
      });
    帮个忙吧 谢谢

     

    展开全文
  • layui table动态新增行

    千次阅读 2020-08-24 09:26:03
    点击新增行按钮前: ...点击新增行按钮后: ...button class="layui-btn layui-btn-sm" data-type="reload" onclick=...新增行</button> /** * 新增行 */ addFunctionModule = function ...

    点击新增行按钮前:

    点击新增行按钮后:

    前端实现代码:

    <button class="layui-btn layui-btn-sm" data-type="reload" onclick="addFunctionModule()" lay-event="addFunctionModule">新增行</button>
    

     

    var attId = '', applicationNum = '', functionModule = '';
    
    /**
      * 新增行
    */
    addFunctionModule = function () {
         var newData = {
            id: attId
            , applicationNum: applicationNum
            , functionModule: functionModule
          }
          var dataList = getDataList("functionModule_table");//table的id
          var newDataList = dataList.concat(newData);
          table.reload("functionModule_table", {
          data: newDataList
          })
         }
    /**  
     * 获取列表数据
     */
    function getDataList(tableId) {
        if (table.cache[tableId]) {
        return table.cache[tableId];
        }
        return [];
     }

     

    展开全文
  • layui table 前台新增空白行 reload 会向后台发请求导致新增行被覆盖,无法前台新增。 var xxTable; 全局变量 var table=layui.table; function inittable(){ xxTable=layui.table; xxTable=table.render({ ...

    layui table  前台新增空白行  reload   会向后台发请求导致新增行被覆盖,无法前台新增。

    var xxTable; 全局变量

    var table=layui.table;

    function inittable(){

    xxTable=layui.table;

    xxTable=table.render({

          elem:"#xxTable",

         url:"xx/xx/",

         methods:"post",

        ...

    });

    }

     

     

    function add{

    let tempData=table.cache("xxTable");

    //增加新的空白行

    tempData.push({

    });

    xxTable.reload("xxTable",{

    data:tempData

    })

    }

     

    后来发现问题出在:xxTable=table.render({  });

    xxTable  存的是这个数据表的示例(初始化了URL 的)

    xxTable  应该是 赋值为  layui.table  就行了的

    展开全文
  • layui table 动态新增 可编辑

    千次阅读 2020-10-15 11:25:47
    <!... <... <head> ...meta charset="utf-8">...Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta n.
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="layui/css/layui.css"  media="all">
        <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>
    <div class="layui-btn-group demoTable">
        <button class="layui-btn layui-btn-normal" data-type="add">
            <i class="layui-icon">&#xe608;</i>新增
        </button>
    </div>
    <!--lay-data="{url:'json/demo1.json', id:'test3'}"-->
    <table  class="layui-table"  lay-data="{id:'test3',limit:'100'}"   lay-filter="test3">
        <thead>
        <tr>
            <!--<th lay-data="{type:'checkbox'}">ID</th>-->
            <th lay-data="{field:'id', width:80, sort: true,edit: 'text'}">ID</th>
            <th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
            <th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th>
            <th lay-data="{field:'sex', width:80, edit: 'text'}">性别</th>
            <th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>
            <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>
            <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
        </tr>
        </thead>
    </table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
    <script src="layui/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
        layui.use('table', function(){
            var table = layui.table;
    
            //监听工具条
            table.on('tool(test3)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                }
            });
    
            var $ = layui.$, active = {
                add: function () {
                    var oldData =  table.cache["test3"];
                    if(oldData==undefined){
                        oldData = {"id":1,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28};
                    }else{
                        var data1={"id":11111,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28};
                        oldData.push(data1);
                    }
    
                    table.reload('test3',{
                        data : oldData
                    });
                }
            };
            //监听单元格编辑
            table.on('edit(test3)', function(obj){
                var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
                debugger;
                layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value);
            });
    
            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
    
        });
    </script>
    
    </body>
    </html>
    展开全文
  • layui table利用参数新增,修改,删除,查询,双击数据获取本行数据等。模块化使用layui table表格,通过二次封装实现语法上的解耦使用layui table,使用参数就可以以及外部的方法调用即可实现对layui table表格的操作...
  • <!... <... <head> ...meta charset="utf-8">...layui-table</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <.
  • Table里面数据可以存放在两个地方,一个是dom结构,一个是Table内的缓存。所以在删除表格的某一行时既要删除dom结构...如果不提交表格数据或者不新增行的情况下,直接删除dom结构的行是没有问题的,但是提交表格数据或
  • layui table的创建方式中有一种是通过js来渲染的,也是我们最熟悉的一种方式,那如果我们某一个列当中的数据不想通过后台数据传到所得,而是通过前端某个东西变化所得(例如说计算总价),应该怎么做呢? layui ...
  • layui table利用参数对表格数据新增,编辑修改,删除,查询,模块功能扩展-双击数据获取本行数据等。模块化使用layui table表格,通过二次封装实现语法...
  • 记录:layui 实现table动态增加与列功能。 需求图示: 效果展示: HTML代码示例: <div class="layui-form-item"> <label class="layui-form-label required">物流费用</label> <div ...
  • layui table 动态增加

    万次阅读 2019-01-02 19:48:14
    目前layui的动态数据表格功能已经是否强大了,但是目前还没有动态增加的功能,这里自己写了一个对象来实现动态增加。   上代码  AddRow = (function(){ var addRowArray = []; var addRowIndex = 0; ...
  • 1、效果图: 2、toolbar代码 <... <...input name="keyword" id="keyword" class="layui-input layui-input-large" type="text" placeholder="扫码或输入货号或名称,回车查询" autocomplete=
  • layui table 手动添加

    2021-06-30 17:56:26
    通过Ajax请求获取数据给table。 getData(); function getData(){ $.ajax({ url: basePath + '/service/...', type: 'get', success: function (data) { if (undefined !== data.data && data.da..
  • layui table实现新增、排序等功能(获取分页所有数据&解决在非首页新增时数据获取失败问题) 刚接触layui,要实现前台新增文本插入表格功能,主要讲下我遇到的问题和解决方法,应该都是笨方法哈哈,记录下来也是...
  • layui table隐藏列

    千次阅读 2019-06-06 00:28:54
    layui的官网table demo如下: layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ... ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增...
  • layui table 添加一

    千次阅读 2019-12-03 18:12:47
    <!... <title></title> ,chrome=1"> , initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-... <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table> ...
  • 前台渲染代码: layui.use('table', function(){ var table = layui.table; table.render({ elem: '#emp' ... ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 ,parseData: fu
  • layui table 点击添加,亲测有效

    千次阅读 2019-10-25 15:21:20
    直接上图 相信大家在网上看了不少,这样的代码,但是如果有url的话就刷新了,根本不行 $("#addRole").click(function(event){ var array = table.cache["roleTable"]; var data={"id":"","roleName":0}; ...
  • LayUI从新加载layuiTable

    2019-09-29 12:43:11
    从新加载layuiTable table.reload('table名',{ page:{curr:1},//设置从新从第一页开始 where:{名:值,名:值}//从新加载查询的条件 }); 如果没有后面的{}的内容的话可以省略不写 table.reload('...
  • if (obj.event === 'addRow') { var newRow = { Oid: "", Id: $("#Id").val(), quantity: '', Total: '', Gross: '', code: '', EnabledMark: 1 }; var cacheData = _globalTable.cache['currentTableId'];...
  • layui table 详细讲解

    2019-10-06 22:02:39
    layui table 详细讲解 layui.use('table', function () { var table = layui.table; /*第一种原始写法*/ /* ...
  • Layui Table 重载封装

    2020-09-18 15:34:12
    Layui Table 重载封装 近期工作中前端使用到了layuitable ,就避免不了数据的查询,所以就封装可一个通用的重载方法。 后台动态组装条件 layui.define(['table'], function (exports) { var $ = layui.$ , layer...
  • 版权声明:请勿用于任何商业用途的文章转载,转载请说明出处!...如果是最后一行的最后单元格,那么再次新增行 附:键值表 <!DOCTYPE html> <html lang="en"> <head> <...
  • layui table 的黑坑

    2019-06-14 17:48:05
    layui table //JavaScript代码区域 var basepath='<%=basePath%>'; $(function(){ pageQuery(1); }); layui.use('element', function(){ var element = layui.element; }); //时间日期选择开始// layui....
  • Layui(table删除)

    千次阅读 2019-07-27 09:16:51
    LayuiTable里面数据可以存放在两个地方,一个是dom结构,一个是Table内的缓存。Dom结构的数据用来显示在视图层方便观看,缓存则是用来修改等操作。通常要保存的数据都是获取换存里面的数据。视图层的数据删除很容易...
  • 一、table数据的呈现(对应查询)页面代码:@{ ViewBag.Title = "TableGrid";}@section styles{ }TableGrid@section scripts{ }TableGrid.js的代码:;...function initQuery() { layui.use(['table'], func...
  • layui table点击按钮添加、删除一 今天学习别人的方法渲染表格动态添加、修改、删除。 //表格渲染 var tableId = "dataTable"; var tableIns = table.render({ elem: "#" + tableId, id: tableId, data: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,888
精华内容 755
关键字:

layuitable新增行