主页表格定义示例:
//首先声明加载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); *!/*/
}
}); // 打开弹窗
}
以上代码笔记单独抽出整理!