笔记大全

如何利用layui美化table数据表格

更新时间：2023-12-15

什么是layui?

layui是一款模块化的前端UI框架，基于jQuery和CSS3，开发维护方便，易于使用和扩展。它提供了大量可定制化的UI组件和常用的JavaScript函数，能够满足大部分前端开发需求。利用layui美化table数据表格需要使用layui中的table组件。

如何使用layui table组件?

使用layui table组件需要引入layui的CSS和js文件。下面的代码示例演示了如何使用layui的table组件创建一个数据表格，并添加一些数据。

<link rel="stylesheet" href="{layui CSS文件路径}" />
<script src="{layui js文件路径}"></script>

<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'email', title: '邮箱', width: 150}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width: 100}
      ,{field: 'sign', title: '签名', width: 200}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 110}
      ,{field: 'wealth', title: '财富', width: 120, sort: true}
    ]]
    ,data: [{
      "id": "10001",
      "username": "张三",
      "email": "zhangsan@qq.com",
      "sex": "男",
      "city": "北京",
      "sign": "人...",
      "experience": "3000",
      "score": "100",
      "classify": "作家",
      "wealth": "1000000"
    }, {
      "id": "10002",
      "username": "李四",
      "email": "lisi@qq.com",
      "sex": "女",
      "city": "南京",
      "sign": "人...",
      "experience": "12000",
      "score": "90",
      "classify": "设计师",
      "wealth": "50000"
    }]
  });  
});
</script>

如何利用layui美化table数据表格?

利用layui美化table数据表格需要使用layui的CSS样式，同时可以使用一些layui table的属性来定制化数据表格的样式，包括表头样式、行样式、选中行样式等。下面的代码示例演示了如何利用layui美化table数据表格。

<link rel="stylesheet" href="{layui CSS文件路径}" />
<script src="{layui js文件路径}"></script>

<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80, templet: '#usernameTpl'}
      ,{field: 'email', title: '邮箱', width: 150, templet: '#emailTpl'}
      ,{field: 'sex', title: '性别', width:80, sort: true, templet: '#sexTpl'}
      ,{field: 'city', title: '城市', width: 100, templet: '#cityTpl'}
      ,{field: 'sign', title: '签名', width: 200, templet: '#signTpl'}
      ,{field: 'experience', title: '积分', width: 80, sort: true, templet: '#experienceTpl'}
      ,{field: 'score', title: '评分', width: 80, sort: true, templet: '#scoreTpl'}
      ,{field: 'classify', title: '职业', width: 110, templet: '#classifyTpl'}
      ,{field: 'wealth', title: '财富', width: 120, sort: true, templet: '#wealthTpl'}
    ]],
    data: [{
      "id": "10001",
      "username": "张三",
      "email": "zhangsan@qq.com",
      "sex": "男",
      "city": "北京",
      "sign": "人...",
      "experience": "3000",
      "score": "100",
      "classify": "作家",
      "wealth": "1000000"
    }, {
      "id": "10002",
      "username": "李四",
      "email": "lisi@qq.com",
      "sex": "女",
      "city": "南京",
      "sign": "人...",
      "experience": "12000",
      "score": "90",
      "classify": "设计师",
      "wealth": "50000"
    }],
    skin: 'line',//设定表格风格
    even: true,//开启隔行背景
    page: true,//开启分页
    limit: 10,//默认每页显示数量
    limits: [10, 20, 30, 50],//每页显示数量选项
    done: function(res, curr, count){
      //表格渲染完成后的回调
      console.log('done');
    }
  });  
});
</script>

如何使用模板和样式表定制layui table组件?

利用layui table组件的模板和样式表可以自定义数据表格的样式，满足具体项目的需要。下面的代码示例演示了如何使用模板和样式表定制化layui table组件。

<link rel="stylesheet" href="{自定义CSS文件路径}" />
<script src="{layui js文件路径}"></script>

<table id="demo" lay-filter="test"></table>
<script type="text/html" id="usernameTpl">
  <div class="username">{{d.username}}</div>
</script>
<script type="text/html" id="experienceTpl">
  <div class="experience">{{d.experience}}</div>
</script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80, templet: '#usernameTpl'}
      ,{field: 'email', title: '邮箱', width: 150, templet: '#emailTpl'}
      ,{field: 'sex', title: '性别', width:80, sort: true, templet: '#sexTpl'}
      ,{field: 'city', title: '城市', width: 100, templet: '#cityTpl'}
      ,{field: 'sign', title: '签名', width: 200, templet: '#signTpl'}
      ,{field: 'experience', title: '积分', width: 80, sort: true, templet: '#experienceTpl'}
      ,{field: 'score', title: '评分', width: 80, sort: true, templet: '#scoreTpl'}
      ,{field: 'classify', title: '职业', width: 110, templet: '#classifyTpl'}
      ,{field: 'wealth', title: '财富', width: 120, sort: true, templet: '#wealthTpl'}
    ]],
    data: [{
      "id": "10001",
      "username": "张三",
      "email": "zhangsan@qq.com",
      "sex": "男",
      "city": "北京",
      "sign": "人...",
      "experience": "3000",
      "score": "100",
      "classify": "作家",
      "wealth": "1000000"
    }, {
      "id": "10002",
      "username": "李四",
      "email": "lisi@qq.com",
      "sex": "女",
      "city": "南京",
      "sign": "人...",
      "experience": "12000",
      "score": "90",
      "classify": "设计师",
      "wealth": "50000"
    }],
    skin: 'line',//设定表格风格
    even: true,//开启隔行背景
    page: true,//开启分页
    limit: 10,//默认每页显示数量
    limits: [10, 20, 30, 50],//每页显示数量选项
    done: function(res, curr, count){
      //表格渲染完成后的回调
      console.log('done');
    }
  });  
});
</script>

c语言编程笔录