layui数据表格使用（一：基础篇，数据展示分页组件表格内嵌表单和图片）ii之秋

前言：在写后台管理系统中使用最多的就是表格数据展示了，使用表格组件能提高大量的开发效率，目前主流的数据表格组件有bootstraptable、layuitable、easyUItable等....

博主个人比较倾向于layui，layui极简，却又不失饱满的内在，体积轻盈，组件丰盈。使用简单引用模块便捷，有丰富的扩展功能。

目录：

一、三种渲染表格的方式

二、在表格中添加编辑等按钮

三、在表格中添加表单控件

四、添加图片展示

最终效果图：

点击图片效果

点击编辑

一、三种初始化渲染方式

我先从最简单的初始化表格写起，如果我直接把全部代码帖出来，你们可能会看得头晕

1，方法渲染：

vartable=layui.table,form=layui.form;layui.use('table',function(){//引入table模块table.render({id:"dataTable",//elem:'#layui_table_id',//指定表格元素url:'/menu/menuList.ajax',//请求路径cellMinWidth:20//全局定义常规单元格的最小宽度，layui2.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对应的keytitle:'ID',//列名sort:true//默认为false,true为开启排序}]]});});java后台返回的json数据格式

{code:0,count:8,//总行数data:[,…],//表格数据msg:""}2，自动渲染方法（以下代码由官方提供，自动渲染的方法适合复杂行头时使用，一般建议使用上面的方法渲染）

ID用户名性别城市签名积分评分职业财富

二，如何添加编辑按钮

//id和toolbar属性绑定查看编辑删除

三，如何在表格中添加表单组件（以下我将推荐2种）

1，使用模块引擎的方式（这种方法比较麻烦，个人推荐第二种）

//请注意id之间的关联{{#if(d.menuDisplay==='Y'){}}{{#}else{}}{{#}}}

{//在表格对象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``;}else{return``;}}}