利用Layui插件制作表单

                                               

学习了新的内容，是利用后端的Layui插件来制作出一个表单这样的一个功能，代码如下：

$(function () {

 

            //layui模块的使用

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

                layer = layui.layer;

                layuiTable = layui.table;

 

                //表格初始化

                tabAcademe = layuiTable.render({

                    elem: "#tabAcademe",//html table id

                    url: "/SystemManagement/CollegeInfor/SelectAcademeAll",//数据接口

                    cols: [[ //表头

                    { type: 'radio', fixed: 'left' },//单选框列,fixed:'left' 将列固定在左边

                    { type: 'numbers', title: '序号' },//序号列，title设定标题名称

                    { field: 'AcademeID', title: 'AcademeID', hide: true },//hide:true 隐藏列

                    { field: 'AcademeName', title: '学院名称' },

                    { field: 'AcademeCode', title: '学院代号' },

                    { title: '操作', templet: setOperate, width: 160, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式

                    ]],

                    page: {

                        limit: 10,//指定每页显示的条数

                        limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项

                    }//开启分页

                });

 

                //监听行单击事件

                layuiTable.on('row(tabAcademe)', function (obj) {

                    var data = obj.data;//获取点击行数据

                    //标注选中样式

                    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');

                    //***单击选中单选框

                    obj.tr.find('div.layui-unselect.layui-form-radio')[1].click();

                    //***单击选中/取消复选框

                    //obj.tr.find('div.layui-unselect.layui-form-checkbox')[0].click();

                });

            });

        });

//实现自定义操作列

       function setOperate(data) {

            var AcademeID = data.AcademeID;

            var btnHtml = "";

            btnHtml += '<button type="button" class="layui-btn layui-btn-xs" onclick="openUpdate(' + AcademeID + ')">修改</button>';

            btnHtml += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="doDelete(' + AcademeID + ')">删除</button>';

            return btnHtml;

        }

展示出来的效果：

 

其中涉及到的方法不多，但都是必要的。少了一个，都会在执行代码的时候出现错误。就好比如实现自定义操作列这一方法，就算在控制器那边把修改和删除这一块的代码全写好了，而在视图这里没有写实现自定义操作列的方法的话，就会使整个表单的内容都无法正常运行，从而出现空白这样的情况。