layui table动态表头 改变表格头部 重新加载表格的方法

改变头部原理：删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变

明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈哈哈哈哈哈哈嗝！！

下面是示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" >
</head>
<body>
<div id="myTable">
  <table id="demo" lay-filter="test"></table>
</div>
<button id="buttonChangeTitle" class="layui-btn ">点击改变表头</button>

<script type="text/javascript" src="static/layui/layui.js" charset="utf-8"></script>
<script>
  layui.use(['element', 'jquery', 'table'], function () {
    var $ = layui.jquery
      , table = layui.table
      , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

    var data = [
      {
        "id": 10000,
        "username": "user-0",
        "sex": "女",
        "city": "城市-0",
        "sign": "签名-0",
        "experience": 255,
        "logins": 24,
        "wealth": 82830700,
        "classify": "作家",
        "score": 57
      }, {
        "id": 10001,
        "username": "user-1",
        "sex": "男",
        "city": "城市-1",
        "sign": "签名-1",
        "experience": 884,
        "logins": 58,
        "wealth": 64928690,
        "classify": "词人",
        "score": 27
      }, {
        "id": 10002,
        "username": "user-2",
        "sex": "女",
        "city": "城市-2",
        "sign": "签名-2",
        "experience": 650,
        "logins": 77,
        "wealth": 6298078,
        "classify": "酱油",
        "score": 31
      }, {
        "id": 10003,
        "username": "user-3",
        "sex": "女",
        "city": "城市-3",
        "sign": "签名-3",
        "experience": 362,
        "logins": 157,
        "wealth": 37117017,
        "classify": "诗人",
        "score": 68
      }, {
        "id": 10004,
        "username": "user-4",
        "sex": "男",
        "city": "城市-4",
        "sign": "签名-4",
        "experience": 807,
        "logins": 51,
        "wealth": 76263262,
        "classify": "作家",
        "score": 6
      }, {
        "id": 10005,
        "username": "user-5",
        "sex": "女",
        "city": "城市-5",
        "sign": "签名-5",
        "experience": 173,
        "logins": 68,
        "wealth": 60344147,
        "classify": "作家",
        "score": 87
      }, {
        "id": 10006,
        "username": "user-6",
        "sex": "女",
        "city": "城市-6",
        "sign": "签名-6",
        "experience": 982,
        "logins": 37,
        "wealth": 57768166,
        "classify": "作家",
        "score": 34
      }, {
        "id": 10007,
        "username": "user-7",
        "sex": "男",
        "city": "城市-7",
        "sign": "签名-7",
        "experience": 727,
        "logins": 150,
        "wealth": 82030578,
        "classify": "作家",
        "score": 28
      }, {
        "id": 10008,
        "username": "user-8",
        "sex": "男",
        "city": "城市-8",
        "sign": "签名-8",
        "experience": 951,
        "logins": 133,
        "wealth": 16503371,
        "classify": "词人",
        "score": 14
      }, {
        "id": 10009,
        "username": "user-9",
        "sex": "女",
        "city": "城市-9",
        "sign": "签名-9",
        "experience": 484,
        "logins": 25,
        "wealth": 86801934,
        "classify": "词人",
        "score": 75
      }]
    var title =
      [ //表头
        {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
        , {field: 'username', title: '用户名', width: 80}
        , {field: 'sex', title: '性别', width: 80, sort: true}
        , {field: 'city', title: '城市', width: 80}
        , {field: 'sign', title: '签名', width: 177}
        , {field: 'experience', title: '积分', width: 80, sort: true}
        , {field: 'score', title: '评分', width: 80, sort: true}
        , {field: 'classify', title: '职业', width: 80}
        , {field: 'wealth', title: '财富', sort: true}
      ]
    var title2 =
      [ //表头
        {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
        , {field: 'username', title: '用户名', width: 80}
        , {field: 'wealth', title: '财富', sort: true}
      ]

    //第一个实例
    var tableIns = table.render({
      elem: '#demo'
      , id: 'demoTest'
      , height: 312
      // ,url: '/demo/table/user/' //数据接口
      , data: data
      , page: true //开启分页
      , cols: [title]
    });

    $("#buttonChangeTitle").on("click", function () {
      $("#myTable").empty();
      $("#myTable").append('<table id="demo"></table>');

      //第一个实例
      var tableIns2 = table.render({
        elem: '#demo'
        , id: 'demoTest'
        , height: 312
        // ,url: '/demo/table/user/' //数据接口
        , data: data
        , page: true //开启分页
        , cols: [title2]
      });
    })

  })
</script>

</body>
</html>

点击前效果：

点击后效果：

以上这篇layui table动态表头 改变表格头部 重新加载表格的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui中table表头样式修改方法

    如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , url: '${ctx}/alarm/queryEventShowScatter' , even: true , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档 layout: ['limit', 'count', 'prev', '

  • layui table复选框禁止某几条勾选的实例

    Layui table复选框禁止勾选 var list = [0,1,3];//获得禁用的tr的行index //遍历设置复选框禁用 for(var i=0;i<list.length;i++){ $(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop('disabled',true); $(".layui-table tr[data-index="+

  • layui问题之模拟table表格中的选中按钮选中事件的方法

    一.问题 不操作页面,实现table表格中的checkbox选中功能 二.经过 刚开始的思路: 1.通过table的id,找到table渲染时生成的div,即table的下一个兄弟节点div.layui-table-view 2.由于checkbox是固定列,再通过第一步,找到div.layui-table-view的子元素.layui-table-fixed 3.紧接着,找出table的第一行的第一个td里面的input,即tr[data-index="0"] td input(注:

  • layui默认选中table的CheckBox复选框方法

    方法一:如何根据条件判断是否默认选中table表格前面的复选框 table.render({ elem: '#userTable' , url: '../sysRole/getUserList' , title: '用户列表' , page: true //开启分页 , cols: [[ {type:'checkbox'} , {field: 'userName',sort: true, title: '用户名称'} , {field: 'account',sort: true, title:

  • 基于layui table返回的值的多级嵌套的解决方法

    我在学习layui的过程中遇到了table返回值的问题,如果服务器端返回给你的数据是多级嵌套的话,那你在前台是解析不了的,在table.js源码中 它渲染数据是用了 data = res[options.response.dataName] || [] 这个意味着它源码不支持嵌套数据 举个例子把 比如服务器端返回的数据中data>dataList>list 把这个数据返回给前段解析出来的是 res[data.dataList.list]类似这种的结构,当然解析不了,所以我写了一个方法处理返回的

  • 基于layui的table插件进行复选框联动功能的实现方法

    实际项目功能: 给员工账号进行分配权限(增加权限,修改权限) 实现思路: 用表格展示权限列表–>勾选分配该账号的权限–>调用接口 出现的问题: 因为某些权限之间是有关联的,比如: " 查看材料 " 和 " 修改材料 " ,这两个权限是有联系的,当你勾选 " 修改材料 " 权限的时候,那么, " 查看材料 " 权限也要勾选上,当你取消勾选 " 查看材料 "权限的时候," 修改材料 &qu

  • layui table动态表头 改变表格头部 重新加载表格的方法

    改变头部原理:删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈哈哈哈哈哈哈嗝!! 下面是示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</tit

  • javascript如何动态加载表格与动态添加表格行

    一.动态加载表格 1.首先在html中为表格的添加位置设置id 即是在html的body标签内部写一个div标签表明表格要添加到此div的内部.如下 <div id="tdl"><div> 2.在javascript中写添加表格的语句 若在当前html文件中,则写在<script>标签内部,如 复制代码 代码如下: <script type="text/javascript" > document.getElement

  • layui加载表格,绑定新增,编辑删除,查看按钮事件的例子

    使用layui框架的时候,总会重复的写相关代码,感觉很是苦恼,所以进行分装,只需要关注业务方面即可 如下图,提供新增,编辑,查看等功能 js方法 /** * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件 * @param {} title 标题 不显示为false * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度 * @param {} path

  • DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

    DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免

  • js实现动态加载脚本的方法实例汇总

    js实现动态加载脚本的方法实例汇总

    本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接.哎!关键是最后一种方法还有点错误.经过两天的研究查阅资料,在这里和大家分享一下. 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在

  • 动态加载js的方法汇总

    本文实例汇总了动态加载js的方法.分享给大家供大家参考.具体如下: 方法一:直接document.write(异步) 复制代码 代码如下: <script language="javascript">       document.write("<script src='res/extwidget/echarts/xx.js'><\/script>"); </script> 由于这种方式是异步加载,document.w

  • Android自定义webView头部进度加载效果

    Android自定义webView头部进度加载效果

    不多说先来看下效果图: 1. 颜色渐变加载进度条(夜神模拟器) 绿色加载进度条(魅蓝note2) 看图说话: 上图是不是加载网页的时候会有一个进度条在横向加载,比以前网速不好的时候是一片空白给人的感觉友好多了是不,然后效果还不错. 实现思路 就是自己画一条进度线(大家应该都会吧)然后加载到WebView的上面,开始进度条是隐藏的,进度线初始值为1,然后为了效果好一点,初始少于10的进度都让它加载到10的位置,等进度到100的时候0.2秒后隐藏. 请记得添加网络权限: <uses-permissi

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • Vue elementUI实现树形结构表格与懒加载

    Vue elementUI实现树形结构表格与懒加载

    目录 1.实现效果 2.后端实现 2.1 实体类 2.2 数据库中的数据结构 2.3 后端接口 2.4 swagger测试后端结构功能是否正常 3.前端实现 3.1 页面中引入el-table组件 3.2 实现效果 1.实现效果 2.后端实现 2.1 实体类 @Data @ApiModel(description = "数据字典") @TableName("dict") public class Dict { private static final long se

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

随机推荐