layui中的表格

 建一个表单提交页面

这是我的网页布局:

这个页面通过layui中的表格渲染完成:

注意:在使用layui时首先要加载数据表格模板;

例如: 

 layui.use(['layer', 'table'], function () {

            laytable = layui.table;

            layer = layui.layer;

            txttable = laytable.render({

             

        })

这是我上面图片的代码;

@* 表格 *@

      <div class="row"><div class="col"><table id="demo" lay-filter="demo"></table></div></div>

 $(function () {

            layui.use(["layer", "table"], function () {

                layer = layui.layer;

                laytable = layui.table;

                laytable.render({

                    elem: "#demo",

                    cols: [[

                        { title: "序号", type: "numbers", rowspan:2,align:"center" },

                        { title: "专业信息", colspan: 2, align: "center" },

                        { title: "所属学院", field: "academeName", rowspan:2, align: "center" },

                        {title:"操作",templet:cus,width:160,align:"center",rowspan:2}

                    ], [

                        { title: "专业名称", field: "specialtyName", align: "center" },

                        { title: "专业编码", field: "specialtyCode",align:"center" },

                    ]],

                    data: [],

                    page: {

                        limit: 10,

                        limits:[5,10,20,30],

                    }

                })

                tabSpecialtySearch()

            })

            function cus(rowData)//当前行的数据

            {

                var str = '<button class="layui-btn layui-btn-xs" οnclick="Mrupdate(' + rowData.specialtyID + ')">修改</button><button class="layui-btn layui-btn-xs layui-btn-danger" οnclick="Mrdelect(' + rowData.specialtyID + ')">删除</button>'

                return str;

            }

        })

在这上面的表格中的修改与删除按钮我用到的是

自定义列模板 templet 在layui中对该模板的定义是

自定义列模板，模板遵循 laytpl 语法。这是一个非常实用的功能，你可借助它实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等

同时在上面的代码中我觉得应该值得注意的是

  colospan单元格所占列数;

 rowspan单元格所占行数;

因为为在专业信息中将colospan设置为二所以专业信息占两列

在填充数据时;你的数据应该将其解析成table组件所规定的数据

1. parseData: function(res){ //res 即为原始返回的数据
2. return {
3. "code": res.status, //解析接口状态
4. "msg": res.message, //解析提示文本
5. "count": res.total, //解析数据长度
6. "data": res.data.item //解析数据列表
7. };
8. }