【WEB前端开辟】layui数据表格运用的几个技能

运用表格组件能进步大批的开辟效力,现在主流的数据表格组件有bootstrap table、layui table、easyUI table等,本教程引荐运用layui框架设置数据表格。

引荐:layui框架疾速入门
一、三种初始化衬着体式格局

我先从最简朴的初始化表格写起,假如我直接把悉数代码帖出来,你们可能会看得头晕

1,要领衬着:

<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>
var table = layui.table
            ,form = layui.form;
    layui.use('table', function () {  // 引入 table模块
        table.render({
            id:"dataTable",//
            elem: '#layui_table_id',//指定表格元素
            url: '/menu/menuList.ajax',  //要求途径
            cellMinWidth: 20 //全局定义通例单元格的最小宽度,layui 2.2.1 新增
            ,skin: 'line ' //表格作风 line (行边框作风)row (列边框作风)nob (无边框作风)
           //,even: true    //隔行换色
            ,page: true  //开启分页
            ,limits: [10,20,50]  //每页条数的挑选项,默许:[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每页默许显现的数目
            ,method:'post'  //提交体式格局
           ,cols: [[
                {type:'checkbox'}, //开启多选框
                {
                    field: 'menuId', //json对应的key
                    title: 'ID',   //列名
                    sort: true   // 默许为 false,true为开启排序
                }
            ]]
        });
    });

java背景返回的json数据格式

{
code: 0, 
count: 8,  //总行数
data: [,…], //表格数据
msg: ""
}

2,自动衬着要领 (以下代码由官方供应,自动衬着的要领 合适庞杂行头时运用,平常发起运用上面的要领衬着)

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
      <th lay-data="{field:'username', width:80}">用户名</th>
      <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
      <th lay-data="{field:'city'}">都市</th>
      <th lay-data="{field:'sign'}">署名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      <th lay-data="{field:'score', sort: true}">评分</th>
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth', sort: true}">财产</th>
    </tr>
  </thead>
</table>

二,怎样增加编辑按钮

var table = layui.table
            ,form = layui.form;
    layui.use('table', function () {  // 引入 table模块
        table.render({
            id:"dataTable",//
            elem: '#layui_table_id',//指定表格元素
            url: '/menu/menuList.ajax',  //要求途径
            cellMinWidth: 20 //全局定义通例单元格的最小宽度,layui 2.2.1 新增
            ,skin: 'line ' //表格作风 line (行边框作风)row (列边框作风)nob (无边框作风)
           //,even: true    //隔行换色
            ,page: true  //开启分页
            ,limits: [10,20,50]  //每页条数的挑选项,默许:[10,20,30,40,50,60,70,80,90]。
            ,limit: 10 //每页默许显现的数目
            ,method:'post'  //提交体式格局
,done: function(res, curr, count) { //表格数据加载完后的事宜
    //挪用示例
    layer.photos({//点击图片弹出
        photos: '.layer-photos-demo'
        ,anim: 1 //0-6的挑选,指定弹出图片动画范例,默许随机(请注意,3.0之前的版本用shift参数)
    });
    //假如是异步要求数据体式格局,res即为你接口返回的信息。
    //假如是直接赋值的体式格局,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
    console.log(res);

    //取得当前页码
    console.log(curr);

    //取得数据总量
    console.log(count);
}
    ,cols: [[ {type:'checkbox'}, //开启多选框  { field: 'menuId', //json对应的key title: 'ID', //列名 sort: true // 默许为 false,true为开启排序  },{ fixed: 'right', title: '操纵', width: 215, align:'center', toolbar: '#barDemo' //绑定按钮组 } ]] }); });
//监听工具条
table.on('tool(dataTable)', function(obj){ //注:tool是工具条事宜名,test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //取得当前行数据
            ,layEvent = obj.event; //取得 lay-event 对应的值
    if(layEvent === 'detail'){
     layui.alert(JSON.stringifr(data)) ; //将编辑的行信息转为json字符串
        layer.msg(data.attrId);
    } else if(layEvent === 'del'){
        layer.msg('删除'+data.menuId);
        console.log(table)
    } else if(layEvent === 'edit'){
       
    });
    }
});
<script type="text/html" id="barDemo">  // id和toolbar 属性绑定
     <a class="layui-btn layui-btn-xs" lay-event="detail">检察</a>
     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

三,怎样在表格中增加表单组件(以下我将引荐2种)

1,运用模块引擎的体式格局(这类要领比较贫苦,个人引荐第二种)

<!--  是不是显现 -->
<script type="text/html" id="isShow">  // 请注意 id之间的关联
    {{#  if(d.menuDisplay === 'Y'){ }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显现|隐蔽" lay-filter="isShow" checked>
    {{#  } else { }}
    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显现|隐蔽" lay-filter="isShow" >
    {{#  } }}
</script>
{   //在表格对象cols属性中增加
    field: 'menuDisplay',  /
    title: '是不是显现',
    templet: '#isShow', //模板关联以上定义的
    unresize: true,
    filter: "isShow",
    sort: false
}

2,运用 函数的要领

{
    field: 'menuDisplay',
    title: '是不是显现',

    unresize: true,
    filter: "isShow",
    sort: false,
    templet: function (d) {
        if (d.menuDisplay == ‘Y’) {
            return` <input type = "checkbox"
            name = "menuDisplay"
            value = "`+d.menuId+`"
            lay - skin = "switch"
            lay - text = "显现|隐蔽"
            lay - filter = "isShow" > `;
        } else {
            return` <input type = "checkbox"
            name = "menuDisplay"
            value = "`+d.menuId+`"
            lay - skin = "switch"
            lay - text = "显现|隐蔽"
            lay - filter = "isShow"
            checked > `;
        }
    }
}

四、 展现图片

{
                    field: 'img',
                    title: '图片',
                    unresize: true,
                    sort: false,
                    //style:'height:100px;',
                    templet:function (d) {
                        return `<div class="layer-photos-demo" onclick="img_click()" style="cursor:pointer;">
                                      <img layer-pid="图片id,能够不写"  layer-src="/images/bug-success-bg.jpg" src="/images/bug-success-bg.jpg" alt="图片名">
                                    </div>`;
                    }
                }

当表格数据加载完后再绑定属性

完全代码:https://gitee.com/gezi441/layui-table

以上就是layui数据表格运用的几个技能的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注