LAYUI页面生成模板实现样例（笔记抽出）

主页表格定义示例：

//首先声明加载JS
layui.use(['admin', 'table', 'util', 'layer', 'form', 'laydate', 'laytpl', 'cityselect'], function () {
            var $ = layui.$
                , admin = layui.admin
                , element = layui.element
                , layer = layui.layer
                , table = layui.table
                , form = layui.form
                , laydate = layui.laydate
                , cityselect = layui.cityselect
                , laytpl = layui.laytpl
                , index = layer.load(1);


table.render({
                elem: '#LAY-myClient-all'//table id
                /*,id:'id'*/  //隐藏id
                , url: 'application/list' //模拟接口  //访问接口
                , cellMinWidth: 60 //全局定义常规单元格的最小宽度
                , page: true // 开启分页
                , loading: true //开启加载
                , height:440  //设置高度
                , limit:30 //每页显示条数
                , limits:[30,60,90] //显示条数下拉
                , cols: [[ // 表头
                      {type: 'numbers', title: '序号'}
                    , {field: 'name', title: '应用名称', templet: '<div>{{d.name}}</div>'}
                    , {field: 'logo', title: '应用logo',  templet: '<div><img src="{{d.path}}{{d.logo}} "></div>'}
                    , {field: 'classify', title: '应用分类',  templet: '<div>{{d.classify}}</div>'}
                    , {field: 'type', title: '应用类型',  templet: '<div>{{d.type}}</div>'}
                    , {field: 'appid', title: '应用appid', templet: '<div>{{d.appid==null||d.appid==""? "--":d.appid}}</div>', align: 'center'}
                    , {field: 'createTime', title: '创建时间',templet:'<div>{{layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")}}</div>', align: 'center'}
                    , {field: 'space', title: '应用可用空间(KB)', templet:
                            '<div>{{d.space==null||d.space==""? "--":d.space}}</div>', align: 'center'}
                    , {field: 'verifyStatus',  title: '审核状态',  templet: tplStatus, align: 'center'}
                    , {field: 'operate',width:190, title: '操作', templet: tplOperate}
                    
                ]]
                , skin: 'line'
                , done: function (res, curr, count) {
                    layer.close(index);//关闭加载
                    //无论是异步请求数据，还是直接赋值数据，都会触发该回调。可以利用该回调做一些表格以外元素的渲染。
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res);

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

                    //得到数据总量
                    console.log(count);

                    hoverOpenImg();//显示大图
                    $('table tr').on('click',function(){
                        $('table tr').css('background','');
                        $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
                    });
                }
            });

//显示大图的函数
function hoverOpenImg(){
                var img_show = null; // tips提示
                $('td img').hover(function(){
                    //alert($(this).attr('src'));
                    var img =
                        "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:200px; height:200px; border-radius:50%;' />";
                    img_show = layer.tips(img, this,{
                        tips:[2, 'rgba(41,41,41,0.5)']
                        ,area: ['230px']
                    });
                },function(){
                    layer.close(img_show);
                });
                $('td img').attr('style','max-width:70px');
            }

模板

//上面调用的审核模板
var tplStatus=function (d) {
                var str="";
                if(d.verifyStatus==1){
                    str='<div class="layui-badge layui-bg-green">'+d.verifyStatusValue+'</div>';
                }else if(d.verifyStatus==0){
                    str='<div class="layui-badge layui-bg-red">'+d.verifyStatusValue+'</div>';
                }else{
                    str='<div class="layui-badge layui-bg-blue">'+d.verifyStatusValue+'</div>';
                }
                return  str;
            };

获取全局点击方法：

						//table id
table.on('tool(LAY-myClient-all)', function (obj) {
                layui.updateitem = function (item) {
                    obj.update(JSON.parse(item));
                };
                //属性参数
                var data = obj.data;
                							//属性中定义的名称
                if (obj.event === 'edit') { // 编辑方法一
                    layer.open({
                        type: 2,
                        title: '应用编辑',
                        area: ['800px', '550px'],
                        fixed: false,
                        maxmin: true,
                        content: layui.setter.base + 'views/application/edit.html',//路径
                   		success:function(layero,index){
                            /*alert(1);
                   			console.log(index)
                   			//父页面向子页面传值，定义的子页面的父级，然后从父页面向子页面传值
                   			 var body = layui.layer.getChildFrame('form', index);*/
                   			 //父页面定义参数属性
                   			datas=data;
                   			//子页面接收父类的参数，在子页面定义并操作
                   			var datas =  parent.datas;
                   			/*console.log(data);
                   			//以下均是父页面向子页面传参赋值
                   			body.find("input[name=id]").val(data.id);
                   			body.find("input[name=name]").val(data.name);
                   			body.find("input[name=logo]").val(data.logo);
                   			
                   			body.find("img[name=logos]").attr('src', data.path+data.logo);
                   			body.find("span[name=logoss]").text(data.logo);
                   			body.find("input[name=classify]").val(data.classify);
                   			body.find("textarea[name=memo]").val(data.memo);
                   			body.find("input[name=publicFlag]").val(data.publicFlag);
                   			body.find("input[name=type]").val(data.type);
                   			body.find("input[name=status]").val(data.status);
                   			/!*body.find("input[name=h5PageUrl]").val(data.h5PageUrl); *!/*/
                   		}
                    }); // 打开弹窗
                }

以上代码笔记单独抽出整理！