layui在线调试

最新推荐文章于 2024-08-04 10:25:33 发布

是张可爱呀

最新推荐文章于 2024-08-04 10:25:33 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45688449/article/details/107056526

版权

这篇博客详细介绍了layui框架中的一些关键操作，包括监听Tab切换、创建table实例、监听工具栏和行事件。此外，还展示了如何执行轮播、日期插件的嵌入、分页、文件上传及滑块组件的使用，提供了丰富的交互体验。

摘要由CSDN通过智能技术生成

监听Tab切换

element.on('tab(demo)', function(data){
   
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
   
      tips: 1
    });
  });

执行一个 table 实例

table.render({
   
    elem: '#demo'
    ,height: 420
    ,url: 'demo/table.do' ***//数据接口***
    ,title: '用户表'
    ,page: true ***//开启分页***
    ,toolbar: 'default' ***//开启工具栏，此处显示默认图标，可以自定义模板，详见文档***
    ,totalRow: true ***//开启合计行***
    ,cols: [[ ***//表头***
      {
   type: 'checkbox', fixed: 'left'}
      ,{
   field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
      ,{
   field: 'username', title: '用户名', width:80}
      ,{
   field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
      ,{
   field: 'sex', title: '性别', width:80, sort: true