LayUi

前端UI框架

1、使用[只需引用这两个文件]

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

2、数据表格

//第一个实例
  table.render({
    elem: '#demo'
    ,height: 315
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', 80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', 80}
      ,{field: 'sex', title: '性别', 80, sort: true}
      ,{field: 'city', title: '城市', 80} 
      ,{field: 'sign', title: '签名',  177}
      ,{field: 'experience', title: '积分',  80, sort: true}
      ,{field: 'score', title: '评分',  80, sort: true}
      ,{field: 'classify', title: '职业',  80}
      ,{field: 'wealth', title: '财富',  135, sort: true}
    ]]
  });
  

绑定容器、设置数据接口、在表头设定对应的字段