layui.js
用法:
1.在base.js里导入layui插件
2.在使用的html页面里引入
<link rel="stylesheet" href="{__PLUG_PATH}layui/css/layui.css">
<link href="{__ADMIN_PATH}css/font-awesome.css?v=4.4.0" rel="stylesheet">
<script src="{__ADMIN_PATH}js/jquery.min.js"></script>
<script src="{__PLUG_PATH}layui/layui.js"></script>
<script src="{__ADMIN_PATH}js/base.js"></script >
layui.use(['element', 'form', 'jquery','IconFonts','lucky'], function () {
var element = layui.element;
var table = layui.table;
var form = layui.form;
var $ = layui.jquery;
var IconFonts = layui.IconFonts;
var lucky=layui.lucky;
//图标选择器
IconFonts.render({
// 选择器,推荐使用input
elem: '#iconFonts',
// 数据类型:fontClass/layui_icon,
type: 'layui_icon',
// 是否开启搜索:true/false
search: true,
// 是否开启分页
page: true,
// 每页显示数量,默认12
limit: 12,
// 点击回调
click: function (data) {
//console.log(data);
}
});
form.on('submit(add)', function (data) {
var url = "{:url('admin_mechanism/save')}";
{if !empty($MechanismDetaiInfo)}
url = "{:url('admin_mechanism/update')}";
{/if}
lucky.FormSubmit(url,data.field,"table_myuserinfo",1,1);
return false;
});
})
base.js
// 以下代码是配置layui扩展模块的目录,每个页面都需要引入
layui.config({
base: local_url+ 'module/'
}).extend({
authtree: 'authtree',
soulTable: 'soultable/soulTable',
treeTable: 'treeTable/treeTable',
inputTags: 'inputTags/inputTags',
IconFonts: 'iconFonts/iconFonts',
iconPicker:'iconPicker/iconPicker',
notice: 'notice/notice',
comm:'comm',
lucky: 'lucky',
excel:'layui_excel/excel',
layarea:'mods/layarea',
step:'step-lay/step'
});
lucky.js
layui.define(['jquery'], function(exports){
"use strict";
// 声明变量
var $ = layui.$;
var lucky = {
/**
* 表格搜索
* @param tableid
* @param data
* @constructor
*/
CreateSearch:function (tableid,data) {
if (data==""||data==undefined){
data=[];
}
var index=layer.msg("查询中,请稍后...",{icon:16,time:false,shade: 0.3,anim:4});
setTimeout(function () {
//执行重载
layui.table.reload(tableid, {
page: {
curr: 1 //重新从第 1 页开始
}
,where:data
}, 'data');
layer.close(index);
},500);
},
/**
* 关闭并刷新父页面
* @param tableid
*/
CloseLayerReload:function (tableid) {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.layui.table.reload(tableid,'data');
},
/**
* 关闭父级页面
*/
CloseLayer:function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
},
/**
* //刷新父页面
*/
CloseFa:function () {
parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
},
/**
* 表格重载
* @param tableid
* @constructor
*/
CreateReload:function (tableid) {
//执行重载
layui.table.reload(tableid,{where:{}},'data');
},
/**
* 表单提交数据
* @param url
* @param data
* @param tablid
* @param is_close
* @constructor
*/
FormSubmit:function (url,data,tablid=0,is_close=0,is_reload_prent = 0) {
$.ajax({
url:url,
type:'post',
data:data,
error: function(error) {
layer.msg("服务器错误或超时");
return false;
},
beforeSend:function(){
layer.load(2);
},
success:function(data)
{
// location.reload();
if (data.code==1) {
if(is_close!=0 && tablid!=0 && is_reload_prent!=0){
layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4});
setTimeout(function(){
// lucky.CloseLayerReload(tablid); //重载父页面表格
layer.close(layer.index);
window.parent.location.reload();
},500);
}
else if(is_close!=0 && tablid!=0){
layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4});
setTimeout(function(){
lucky.CloseLayerReload(tablid); //重载父页面表格
// layer.close(layer.index);
// window.parent.location.reload();
},500);
}else if(is_close!=0){
layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4});
setTimeout(function(){
lucky.CloseLayer();//不重载父页面表格
},500);
}else if (tablid!=0){
layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4});
setTimeout(function(){
lucky.CreateReload(tablid); //重载当前页面的表格
},500);
} else {
layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4},function () {
location.reload();
});
}
}else{
layer.msg(data.msg,{icon:15,time:1500,shade:0.3,anim:4});
}
},
complete:function(){
layer.closeAll('loading');
}
});
},
/**
* 弹窗
* @param title
* @param w
* @param h
* @param url
* @param tableid
* @param close
* @param fulls
* @constructor
*/
CreateForm:function (title,w,h,url,tableid=0,close=0,fulls=0) {
title?title:'管理界面';
w?w:'40%';
h?h:'60%';
var full= layer.open({
title:title,
type: 2,
area: [w, h],
// offset:'40px',
offset:'auto',
maxmin : true,
skin:'layui-layer-molv',
shade: 0.5,
content: url,
success:function(){
setTimeout(function(){
layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
tips: 3,time:1000
});
},500)
},
end: function () {
if (tableid==0){
console.log(tableid);
}else if(close!=0){
location.reload();
}
else {
setTimeout(function(){
lucky.CreateReload(tableid);//重载表格
},500);
}
}
});
if (fulls==0){
}else {
layer.full(full); //最大化
}
},
/**
* 恢复数据
* @param ids
* @param URL
* @param tableid
* @returns {boolean}
*/
Recycle_data:function (ids,URL,tableid) {
if($.isArray(ids))
{
ids = ids.join(',');
}
if (ids=="")
{
layer.msg("没选择任何数据",{time:1500});return false;
}
layer.confirm('确定恢复吗?', function(index){
layer.close(index);
$.ajax({
beforeSend:function(){
layer.load(2);
},
url: URL,
type: "POST",
async: true,
dataType: "json",
data:{
ids: ids,
},
error: function(error) {
layer.msg("服务器错误或超时");
return false;
},
success: function(data) {
if (data.code==1) {
layer.msg(data.msg,{icon:1,time:1500,shade:0.3,anim:4});
setTimeout(function(){
lucky.CreateReload(tableid); //重载表格数据
},500);
}else{
layer.msg(data.msg,{icon:15,time:1500,shade:0.3},function () {
lucky.CreateReload(tableid);
});
}
},
complete:function(){
layer.closeAll('loading');
}
});
});
},
/**
* 删除操作
* @param ids
* @param URL
* @param tableid
* @param msg
* @returns {boolean}
* @constructor
*/
Delete_data:function (ids,URL,tableid="",msg='确定删除吗?',reload = 0) {
// console.log(1111111);return false;
if($.isArray(ids))
{
ids = ids.join(',');
}
if (ids=="")
{
layer.msg("没选择任何数据",{time:1500});return false;
}
layer.confirm(msg, function(index){
layer.close(index);
$.ajax({
beforeSend:function(){
layer.load(2);
},
url: URL,
type: "POST",
async: true,
dataType: "json",
data:{
ids: ids,
},
error: function(error) {
layer.msg("服务器错误或超时");
return false;
},
success: function(data) {
// console.log(11111111);
// console.log(data);
if(reload == 1){
// console.log(11111111);
window.location.reload();
}
else if (data.code==1) {
layer.msg(data.msg, {
time: 0 //不自动关闭
,icon: 6
,btn: ['关闭']
,shade: [0.8, '#393D49']
,yes: function(index){
lucky.CreateReload(tableid); //重载表格数据
layer.close(index);
}
});
// layer.msg(data.msg,{icon:1,time:1500,shade:0.3,anim:4});
// setTimeout(function(){
// lucky.CreateReload(tableid); //重载表格数据
// },2000);
}else{
layer.msg(data.msg, {
time: 0 //不自动关闭
,icon: 15
,btn: ['关闭']
,shade: [0.8, '#393D49']
,yes: function(index){
lucky.CreateReload(tableid); //重载表格数据
layer.close(index);
}
});
// layer.msg(data.msg,{icon:15,time:0,shade:0.3},function () {
// lucky.CreateReload(tableid);
// });
}
},
complete:function(){
layer.closeAll('loading');
}
});
});
},
/**
* post请求 在弹框中使用
* @param ids
* @param URL
* @param tableid
* @param msg
* @returns {boolean}
* @constructor
*/
Post_data:function (ids,URL,post_data={},tableid=0,is_close=0,msg='确定添加吗?') {
if($.isArray(ids))
{
ids = ids.join(',');
}
if (ids=="")
{
layer.msg("没选择任何数据",{time:1500});return false;
}
post_data.ids = ids;
layer.confirm(msg, function(index){
layer.close(index);
$.ajax({
beforeSend:function(){
layer.load(2);
},
url: URL,
type: "POST",
async: true,
dataType: "json",
data:post_data,
error: function(error) {
layer.msg("服务器错误或超时");
return false;
},
success: function(data) {
if (data.code==1 ) {
if(is_close!=0 && tableid!=0){
layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4});
setTimeout(function(){
lucky.CloseLayerReload(tableid); //重载父页面表格
layer.close(layer.index);
window.parent.location.reload();
},500);
}else if(is_close!=0){
layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4});
setTimeout(function(){
lucky.CloseLayer();//不重载父页面表格
},500);
}else if (tableid!=0){
layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4});
setTimeout(function(){
lucky.CreateReload(tableid); //重载当前页面的表格
},500);
} else {
layer.msg(data.msg,{icon: 1, time: 1500,shade:0.3, anim: 4},function () {
location.reload();
});
}
//
// layer.msg(data.msg, {
// time: 0 //不自动关闭
// ,icon: 6
// ,btn: ['关闭']
// ,shade: [0.8, '#393D49']
// ,yes: function(index){
// lucky.CreateReload(tableid); //重载表格数据
// layer.close(index);
// }
// });
//
//
// layer.msg(data.msg,{icon:1,time:1500,shade:0.3,anim:4});
// setTimeout(function(){
// lucky.CreateReload(tableid); //重载表格数据
// },2000);
}else{
layer.msg(data.msg,{icon:15,time:1500,shade:0.3,anim:4});
// layer.msg(data.msg, {
// time: 0 //不自动关闭
// ,icon: 15
// ,btn: ['关闭']
// ,shade: [0.8, '#393D49']
// ,yes: function(index){
// lucky.CreateReload(tableid); //重载表格数据
// layer.close(index);
// }
// });
// layer.msg(data.msg,{icon:15,time:0,shade:0.3},function () {
// lucky.CreateReload(tableid);
// });
}
},
complete:function(){
layer.closeAll('loading');
}
});
});
},
Change_status:function (table_id,tablename,id,field,status,this_) {
$.ajax({
url:"/admin/Common/ChangeStatus",
type:'post',
async: true,
dataType: "json",
data:{
id:id,
table:tablename,
field:field,
status:status
},
error: function(error) {
layer.msg("服务器错误或超时");
return false;
},
beforeSend:function(){
layer.load(2);
},
success:function(res)
{
//CreateReload(table_id);
if (res.code==200) {
layer.tips(res.msg,this_, {
time: 1000
},function () {
lucky.CreateReload(table_id);
});
}else{
layer.tips(res.msg,this_, {
time: 1000
},function () {
lucky.CreateReload(table_id);
});
}
},
complete:function(){
layer.closeAll('loading');
}
});
},
Ls_Change_status:function (table_id,tablename,id,field,status,this_) {
$.ajax({
url:"/admin/Common/LsChangeStatus",
type:'post',
async: true,
dataType: "json",
data:{
id:id,
table:tablename,
field:field,
status:status
},
error: function(error) {
layer.msg("服务器错误或超时");
return false;
},
beforeSend:function(){
layer.load(2);
},
success:function(res)
{
//CreateReload(table_id);
if (res.code==200) {
layer.tips(res.msg,this_, {
time: 1000
},function () {
lucky.CreateReload(table_id);
});
}else{
layer.tips(res.msg,this_, {
time: 1000
},function () {
lucky.CreateReload(table_id);
});
}
},
complete:function(){
layer.closeAll('loading');
}
});
},
/**
* 操作修改状态
* @param ids
* @param URL
* @param tableid
* @param msg
* @returns {boolean}
* @constructor
*/
Batch_status:function (ids,URL,tableid,msg='确定修改吗?') {
if($.isArray(ids))
{
ids = ids.join(',');
}
if (ids=="")
{
layer.msg("没选择任何数据",{time:1500});return false;
}
layer.confirm(msg, function(index){
layer.close(index);
$.ajax({
beforeSend:function(){
layer.load(2);
},
url: URL,
type: "POST",
async: true,
dataType: "json",
data:{
ids: ids,
},
error: function(error) {
layer.msg("服务器错误或超时");
return false;
},
success: function(data) {
if (data.code==1) {
//信息框-例2
layer.msg(data.msg, {
time: 0 //不自动关闭
// ,icon: 6
,btn: ['关闭']
,shade: [0.8, '#393D49']
,yes: function(index){
lucky.CreateReload(tableid); //重载表格数据
layer.close(index);
}
});
}else{
layer.alert(data.msg,{icon:15,time:1500,shade:0.3},function () {
lucky.CreateReload(tableid);
});
}
},
complete:function(){
layer.closeAll('loading');
}
});
});
},
/**
* 创建树菜单
* @returns {Array}
* @constructor
*/
CreateTree:function (rows) {
var nodes = [];
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if (!exists(rows, row.pid)) {
nodes.push({
id: row.id,
name: row.name,
value:row.value,
children:row.children
});
}
}
var toDo = [];
for (var i = 0; i < nodes.length; i++) {
toDo.push(nodes[i]);
}
for (var i = 0; i < nodes.length; i++) {
toDo.push(nodes[i]);
}
while (toDo.length) {
var node = toDo.shift(); // the parent node
// get the children nodes
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
if (row.pId == node.id) {
var child = {id: row.id, name: row.name, pId: node.id,value:row.value,children:row.children};
if (node.children) {
node.children.push(child);
} else {
node.children = [child];
}
toDo.push(child);
}
}
}
return nodes;//layui nodes对象
},
/**
*
* @param rows
* @param pId
* @returns {boolean}
* @constructor
*/
Exists:function (rows, pId) {
for (var i = 0; i < rows.length; i++) {
if (rows[i].id == pId) return true;
}
return false;
}
};
/**
* 输出模块(此模块接口是对象)
*/
exports('lucky', lucky);
});
index.html
<!--
* Created by PhpStorm.
* 版权所有: 2019~2022 [ linkbook ]
* author: haima
*-->
<!-- 引入基类模板 -->
{extend name='public/base' /}
{block name="search"}
<style>
.layui-form-label{
width: auto;
line-height: 26px;
}
.select{
width: 80px !important;
vertical-align: -10px;
}
.box{
display: none;
}
.layui-input-inline{
margin-top: 5px;
}
/*.superBtn1{*/
/* margin: 0 -10px 5px 20px;*/
/*}*/
#search{
display: none;
}
.sbtn button{
margin: 0 0 8px 0 !important;
padding: 0 8px 0 8px;
}
.tableTP{
display: flex;
justify-content: space-between;
}
.sbtn1{
display: flex;
justify-content: space-between;
}
</style>
<span class="sbtn1">
<span>
<div class="layui-inline">
<label class="layui-form-label">省:</label>
<div class="layui-inline select" >
<select name="province" id="province" lay-verify="" lay-filter="province">
<option value="">请选择</option>
{foreach $provinceList as $province}
<option value="{$province.code}">{$province.name}</option>
{/foreach}
</select>
</div>
</div>
<div class="layui-inline" style="display: none" >
<label class="layui-form-label">市:</label>
<div class="layui-inline select" >
<select name="city" id="city" lay-verify="">
</select>
</div>
</div>
<!--年龄 范围-->
<div class="layui-inline ">
<label class="layui-form-label">年龄:</label>
<div class="layui-inline select" >
<div id="age1" class="demo-slider"></div>
<input type="hidden" name="age" id="age" value="">
</div>
</div>
<!--身高 范围-->
<div class="layui-inline ">
<label class="layui-form-label">身高:</label>
<div class="layui-inline select" >
<div id="perHeight1" class="demo-slider"></div>
<input type="hidden" name="perHeight" id="perHeight" value="">
</div>
</div>
<!--学历 范围-->
<div class="layui-inline">
<label class="layui-form-label">学历:</label>
<div class="layui-inline select" >
<div id="education1" class="demo-slider"></div>
<input type="hidden" name="education" id="education" value="">
</div>
</div>
<!--收入 范围-->
<div class="layui-inline">
<label class="layui-form-label">收入:</label>
<div class="layui-inline select" >
<select name="salary" id="income" lay-verify="">
<option value="">请选择</option>
{foreach $incomeList as $income}
<option value="{$income.income_range}">{$income.income_range}</option>
{/foreach}
</select>
</div>
</div>
<!--性别-->
<div class="layui-inline">
<label class="layui-form-label">性别:</label>
<div class="layui-inline select" >
<select name="gender" id="gender" lay-verify="">
<option value="">请选择</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
</div>
</div>
{if $act == "my_member"}
<!--购买过的资料和我下载会员-->
<div class="layui-inline">
<label class="layui-form-label">我的会员:</label>
<div class="layui-inline select" >
<select name="member" id="member" lay-verify="">
<option value="">请选择</option>
<option value="1">下载会员</option>
<option value="2">代理会员</option>
</select>
</div>
</div>
{/if}
</span>
<span class="sbtn">
<button class="layui-btn icon-btn layui-btn-normal layui-inline" style="margin-right: 0px" type="reset" >
<!-- <i class="layui-icon layui-icon-refresh"></i>-->
重置
</button>
<button class="layui-btn icon-btn superBtn1 layui-inline">
高级
</button>
<button class="layui-btn icon-btn layui-inline" lay-filter="search" lay-submit="">
<i class="layui-icon"></i>
搜索
</button>
</span>
</span>
<div class="box">
{:widget('forms/search',array('id','ID','ID'))}
{:widget('forms/search',array('user_name','真实姓名','真实姓名'))}
{:widget('forms/search',array('mobile','手机号','用户手机号'))}
{if $admin_info["is_super_admin"]==0 && $act neq "all_member" && !empty($cateList)}
<div class="layui-inline">
<label class="layui-form-label">机构分组:</label>
<div class="layui-inline " style="width: 180px">
<select name="cate_id" lay-verify="">
<option value="0">请选择</option>
<option value="in_group">属于任何分组</option>
<option value="not_in_group">不在任何分组</option>
{foreach $cateList as $v}
<option value="{$v.c_id}">属于{$v.c_name}</option>
{/foreach}
{foreach $cateList as $v}
<option value="nocate-{$v.c_id}">不属于{$v.c_name}</option>
{/foreach}
</select>
</div>
</div>
{/if}
</div>
<div style="margin-bottom: 15px"></div>
{/block}
<!--表头左/边的工具栏-->
{block name="btn"}
<!--按钮区-->
<!--{:widget('forms/Delbtn',array('删除'))}-->
<!--<a href="{:url('LsUser/exportMember')};return false"><button class="layui-btn layui-btn-sm" data-type="export" onmouseover="tis(this)" data-title="导出选中会员"><i class="layui-icon layui-icon-export" ></i >导出选中会员
</button ></a>-->
<span class="tableTP do_btn" >
<!-- <form action="" class="layui-form" method="get" >-->
<span >
{if $admin_info["is_super_admin"]==1}
<a href="javascript:void(0)" id="exportMember">
<button class="layui-btn layui-btn-sm" data-type="export" onmouseover="tis(this)" data-title="导出选中会员">
<i class="layui-icon layui-icon-export" ></i >导出选中会员
</button >
</a>
{else /}
{if $act == "all_member"}
<a href="javascript:void(0)" id="buyMemberinfo">
<button class="layui-btn layui-btn-sm" data-type="buyMember" onmouseover="tis(this)" data-title="下载到我的线索库">
<i class="layui-icon layui-icon-download-circle" ></i >下载到我的线索库
</button >
</a>
{else /}
{if $cateList}
<form action="" class="layui-form layui-inline" method="get" >
<div class="layui-form-item">
<!-- <label class="layui-form-label">行内选择框</label>-->
<div class="layui-input-inline">
<select name="cate_id">
<option value="0">请选分组</option>
<!-- <option value="分组一" selected="">分组一</option>-->
{foreach $cateList as $v}
<option value="{$v.c_id}">{$v.c_name}</option>
{/foreach}
</select>
</div>
</div>
</form >
<button class="layui-btn layui-btn-sm layui-inline" data-type="addToCate" onmouseover="tis(this)" data-title="添加到机构分组">
<i class="layui-icon layui-icon-export" ></i >添加到机构分组
</button >
{/if}
{/if}
{/if}
{:widget('forms/reload')}
</span>
<!-- </form>-->
<span>
<!-- <button class="layui-btn layui-btn-sm layui-btn-primary" ><i class="fa fa-refresh" ></i > 刷新</button >-->
<!-- <button class="layui-btn layui-btn-sm icon-btn" lay-filter="search" lay-submit="">-->
<!-- <i class="layui-icon"></i>搜索-->
<!-- </button>-->
{if $admin_info['is_super_admin']==0}
<button class="layui-btn layui-btn-sm layui-btn-primary" style="margin: 0 0 0 5px" >
<i class="layui-icon layui-icon-group"></i>已下载会员: {$buyMemberCount} 人
</button>
<button class="layui-btn layui-btn-sm layui-btn-primary" style="margin: 0 0 0 5px" >
<i class="layui-icon layui-icon-user"></i>已代理会员: {$sMMemberCount} 人
</button>
<button class="layui-btn layui-btn-sm layui-btn-primary" style="margin: 0 0 0 5px" >
<i class="layui-icon layui-icon-download-circle" ></i><span id="download_num"> 剩余下载次数:{$matchmakerWalletInfo['download_userinfo_num']} 条</span>
</button>
{/if}
</span>
</span>
{/block}
{block name="table"} <!--表格区-->
<style type="text/css">
.layui-table-cell{
height: 30px !important;
}
.layui-table-cell{
text-align:center;
height: auto;
white-space: normal;
}
.layui-table img{
max-width:300px;
max-height: 50px;
}
</style>
<div class="yys-fluid yys-wrapper">
<div class="layui-row lay-col-space20">
<div class="layui-cos-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
<section class="yys-body">
<div class="yys-body-content clearfix changepwd">
<div class="layui-col-lg12 layui-col-md10 layui-col-sm12 layui-col-xs12" style="width:100%">
<div class="user-tables">
<table id="tableFilter" lay-filter="tableFilter"> </table>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
{/block}
{block name="js"} <!--js处理区-->
<!--模板-->
<!--<script type="text/html" id="operationTpl">-->
<!-- {:widget('forms/Editbtn',array('查看用户信息'))}-->
<!--</script>-->
<!--表头右边工具条-->
<!--<script type="text/html" id="rightBtn">-->
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">资料查看</a>-->
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="ta-like">Ta喜欢的</a>-->
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="like-ta">喜欢Ta的</a>-->
<!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">从分组中删除</a>-->
<!-- <!–如果是后台管理员显示–>-->
<!-- {if $admin_info["is_super_admin"] == 1}-->
<!-- <!– <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>–>-->
<!-- {/if}-->
<!--</script>-->
<script type="text/html" id="status">
<input type="checkbox" name="status" lay-data="{{d.status}}" value="{{d.id}}" lay-filter="sexDemo" lay-skin="switch" lay-text="正常|禁用" {{ d.status == 0 ? 'checked' : '' }}>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
$('.superBtn1').click(function(){
$('.box').slideToggle();
return false;
});
layui.use([ 'table', 'form', 'jquery', 'lucky','slider'], function () {
var form = layui.form;
var table = layui.table;
var $ = layui.jquery;
var slider = layui.slider;
var lucky=layui.lucky;
// 年龄
slider.render({
elem: '#age1'
// ,value: [18, 100] //初始值
,min:18
,max:100
,range: true //范围选择
,setTips: function(value){
return value + "岁"
}
,change: function(value){
// console.log(value[0]); //得到开始值
// console.log(value[1]); //得到结尾值
var age={
star : value[0],
end : value[1]
};
age=JSON.stringify(age);
$('#age').val(age);
}
});
// 身高
slider.render({
elem: '#perHeight1'
,min:140
,max:240
,step:5
,showstep:true
// ,value: [140, 220] //初始值
,range: true //范围选择
,setTips: function(value){
return value + "cm"
}
,change:function (value) {
var perHeight = {
star:value[0],
end:value[1],
};
perHeight = JSON.stringify(perHeight);
$("#perHeight").val(perHeight);
}
});
//学历
slider.render({
elem: '#education1'
,min:1
,max:8
,showstep:true
// ,value: [4, 6] //初始值
,range: true //范围选择
,setTips: function(value){
switch (value) {
case 1:
return '小学' ;
case 2:
return '初中' ;
case 3:
return '中专' ;
case 4:
return '高中' ;
case 5:
return '大专' ;
case 6:
return '本科' ;
case 7:
return '硕士' ;
case 8:
return '博士' ;
default:
return '其它'
}
}
,change:function (value) {
var education = {
star : value[0],
end : value[1]
}
education = JSON.stringify(education);
$('#education').val(education);
}
});
form.render();
// // layer.load(2);
table.render({
height:'full-175',
elem: '#tableFilter',
url:"{:url('ls_user/index')}",
where: {act:"{$act}"},
// toolbar: '#toolbarDemo',
even: true, //开启隔行背景
id:'table_id',
page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip','last'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,groups: 5 //只显示 1 个连续页码
,first: "首页" //不显示首页
,last:"尾页" //不显示尾页
,limit:10
,limits:[10,20,30,40,50,100]
},
// height: 'full-100',
text: {
none: '暂无相关数据'
},
cols: [[
// {type: 'checkbox'},
{checkbox: "amcu_id",templet:function (d) {
return false;
}},
{field: 'id', title: 'ID',width:70,sort:true},
{field: 'user_id', title: 'ID',width:120,sort:true},
{field: 'avatar',style:'cursor: pointer;', width: 70, align: 'center',title: '头像',templet:function (d) {
return '<img src="'+d.avatar+'" alt="头像" class="layui-nav-img" />';
}},
{field: 'name', width: 90, align: 'center',title: '真实姓名'},
{field: 'gender',align: 'center', width: 90, title: '性别',sort:true},
{field: 'phone', width: 120, title: '手机号',align: 'center'},
{field: 'birthday',title: '年龄',align: 'center', width: 90,sort:true,templet:function (d) {
if(d.birthday){
return getAge(d.birthday)<0?0:getAge(d.birthday);
}else{
return 0;
}
}},
{field: 'birthday', width: 110, title: '生日',align: 'center',sort:true},
{field: 'province', width: 120, title: '地区',align: 'center',templet:function(d){
return d.province + ' ' + d.city;
}},
{field: 'education', width: 90, title: '学历',align: 'center',sort:true},
{field: 'height', width: 120, title: '身高(cm)',align: 'center',sort:true},
{field: 'weight', width: 120, title: '体重(kg)',align: 'center',sort:true},
{field: 'hobby_list', width: 150, title: '爱好',align: 'center',templet:function (d) {
return '<span class="hobby_list">' + d.hobby_list + '</span>'
}},
{field: 'dating_way_list', width: 150, title: '喜欢约会方式',align: 'center',templet:function (d) {
return '<span class="dating_way_list">'+ d.dating_way_list + '</span>'
}},
{field: 'constellation', width: 100, title: '星座',align: 'center'},
{field: 'salary', width: 100, title: '收入',align: 'center',sort:true},
{field: 'house_property', width: 120, title: '房产',align: 'center'},
{field: 'automobile', width: 120, title: '车辆信息',align: 'center'},
{field: 'school', width: 120, title: '学校',align: 'center'},
{field: 'introduction', width: 120, title: '自我介绍',align: 'center',templet:function (d) {
return '<span class="introduction">'+ d.introduction + '</span>'
}},
{if $admin_info["is_super_admin"] == 1}
// {field: 'status',title:'状态',align: 'center',templet: '#status',width:120 ,unresize: true},
{field: 'profile_weight',title: '状态',align: 'center', width: 140,sort:true,templet:function (d) {
switch (d.profile_weight) {
case 0:
return "Lv0:待完善";
case 1:
return "Lv1:完善基本信息";
case 2:
return "Lv2:全部完善";
default:
return "未知";
}
}},
{/if}
{field: 'created_at', title: '注册时间',align: 'center',width:165,sort:true},
{field: 'updated_at', title: '更新时间',align: 'center',width:165,sort:true},
// {fixed: 'right', width: 400, align: 'center', title: '操作',templet: '#rightBtn'}
{fixed: 'right' ,title: '操作',width: 400, align: 'center',templet:function(d){
var html = "";
html += '<a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">资料查看</a>';
html += '<a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="ta-like">Ta喜欢的</a>';
html += '<a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="like-ta">喜欢Ta的</a>';
if(d.isdelete_tocateuser){
html += ' <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delToCateUser">从分组中删除</a>';
}
// html += '<a href="javascript:;" class="layui-btn layui-btn-xs" style="background-color: #c2c2c2" onmouseover="tis(this)" data-title="日志" lay-event="catLog"><i class="layui-icon "></i></a>';
// }
return html;
} }
]],
done: function (res) {
layer.closeAll('loading');
hoverOpenImg();
hobbyList();
datingList();
introduction();
//控制前端表格里是否显示复制框
if(res.msg == "select_show"){
disableselect("show");
}else{
disableselect("hide");
}
}
});
//控制前端表格里是否显示复制框
function disableselect(selectact){
if(selectact == "show"){
$(".layui-table input[type=checkbox]").parent().parent().show();
}else{
$(".layui-table input[type=checkbox]").parent().parent().hide();
}
}
//二级联动
form.on('select(province)', function(data){
// console.log(data.elem); //得到select原始DOM对象
// console.log(data.value); //得到被选中的值
// console.log(data.othis); //得到美化后的DOM对象
// alert(data.value);
var url = "{:url('Area/getAreaListByParentCode')}?parent_code="+data.value;
$.get(url,function (res) {
var html = '<option value="">请选择</option>\n';
$.each(res.data,function (k,v) {
html += '<option value="'+ v.code +'">'+ v.name +'</option>\n'
});
$('#city').html(html).parent().parent().show(800);
form.render('select'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
},'json')
});
//图片经过事件
function hoverOpenImg(){
var img_show = null; // tips提示
$('td img').hover(function(){
var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:100%;max-height: 600px;' />";
img_show = layer.tips(img, this,{
tips:[2, 'rgba(41,41,41,.0)']
,area: ['12%']
});
},function(){
layer.close(img_show);
});
}
//爱好经过事件
function hobbyList(){
var show = null; // tips提示
$('td .hobby_list').hover(function(){
var content = $(this).html();
show = layer.tips(content, this,{
tips:[2]
,area: ['12%']
});
},function(){
layer.close(show);
});
}
//约会方式经过事件
function datingList(){
var show = null; // tips提示
$('td .dating_way_list').hover(function(){
var content = $(this).html();
show = layer.tips(content, this,{
tips:[2]
,area: ['12%']
});
},function(){
layer.close(show);
});
}
//约会方式经过事件
function introduction(){
var show = null; // tips提示
$('td .introduction').hover(function(){
var content = $(this).html();
show = layer.tips(content, this,{
tips:[2]
,area: ['12%']
});
},function(){
layer.close(show);
});
}
/**
* 表格搜索
*/
form.on('submit(search)', function (obj) {
console.log(obj.field);
lucky.CreateSearch("table_id",obj.field); //查询
return false;
});
/**
* 监听是否显示操作
*/
form.on('switch(sexDemo)', function(obj){
var _id=parseInt(obj.value);
var pan=obj.elem.checked;
var status;
if (pan===false){
status=0;
}else {
status=1;
}
lucky.Ls_Change_status("table_id","ls_user",_id,"status",status, obj.othis);
});
/**
* 监听单行工具操作
*/
table.on('tool(tableFilter)', function (obj) {
var data = obj.data;
// alert(JSON.stringify(data));
// console.log(JSON.stringify(data));
var _user_id=parseInt(data.user_id);
var layEvent = obj.event;
if(layEvent==="detail"){
var urls="/admin/ls_user/UserDetail?user_id="+_user_id + "&act={$act}";
// var urls="/index.php/admin/user/UsersDetail/id/"+_id;
// lucky.CreateForm("编辑会员信息",'100%','100%',urls,"table_id",0,1);
lucky.CreateForm("查看会员信息",'100%','100%',urls);
}
else if(layEvent==="ta-like"){
// var urls="/admin/ls_user/like_me_list?user_id="+_user_id + "&act={$act}";
var urls="/admin/ls_user/likeList?user_id="+_user_id + "&act={$act}&roleType=ta-like";
// console.log("我喜欢的人");
// var urls="/index.php/admin/user/UsersDetail/id/"+_id;
// lucky.CreateForm("编辑会员信息",'100%','100%',urls,"table_id",0,1);
lucky.CreateForm("Ta喜欢的人",'100%','100%',urls);
}
else if(layEvent==="like-ta"){
var urls="/admin/ls_user/likeList?user_id="+_user_id + "&act={$act}&roleType=like-ta";
// alert("喜欢他的人");
// var urls="/index.php/admin/user/UsersDetail/id/"+_id;
// lucky.CreateForm("编辑会员信息",'100%','100%',urls,"table_id",0,1);
lucky.CreateForm("喜欢Ta的人",'100%','100%',urls);
}
else if(layEvent==="delToCateUser"){
var ids = data.amcu_id;
console.log("delToCateUser:",ids);
lucky.Delete_data(ids,"{:url('AdminMechanismCateUser/delMCateUser')}","table_id",'确定要从组中删除吗?');
// alert("喜欢他的人");
// var urls="/index.php/admin/user/UsersDetail/id/"+_id;
// lucky.CreateForm("编辑会员信息",'100%','100%',urls,"table_id",0,1);
// lucky.CreateForm("喜欢Ta的人",'100%','100%',urls);
}
// else if(layEvent==="del"){
// lucky.Delete_data(_id,"{:url('users/delete')}","table_id",'确定删除选这个会员吗?');
// }
// else if(layEvent==="add"){
// alert("努力开发用");
// }
});
var active = {
//导出会员信息
export: function(){ //获取选中数据
var checkStatus = table.checkStatus('table_id'),data = checkStatus.data;
var num=0;
var userIds=[];
for (var i in data) {
num++;
userIds.push(data[i].user_id);
}
if (num<1) {
$("#exportMember").attr('href',"javascript:void(0)");
layer.msg("请选择一项",{time:1500});return false;
}
var url = "{:url('LsUser/exportMember')}?userIds="+userIds;
$("#exportMember").attr('href',url);
// $("#exportMember").attr('href',"");
// lucky.Delete_data(userIds,"{:url('LsUser/exportMember')}","table_id",'确定要导出员选中的会员信息吗?');
},
buyMember: function(){ //购买码会员信息
var checkStatus = table.checkStatus('table_id'),data = checkStatus.data;
var num=0;
var userIds=[];
for (var i in data) {
num++;
userIds.push(data[i].user_id);
}
if (num<1) {
$("#exportMember").attr('href',"javascript:void(0)");
layer.msg("请选择一项",{time:1500});return false;
}
console.log(num);
var url = "{:url('LsUser/buyMemberSave')}";
// $("#exportMember").attr('href',url);
// $("#exportMember").attr('href',"");
var download_num_msg = $("#download_num").html();
lucky.Delete_data(userIds,url,"table_id",'确定要下载到我的线索库吗?<br/>'+ download_num_msg +' <br/>扣除下载次数:'+num+'条.');
},
addToCate: function(){ // 添加到分区
var checkStatus = table.checkStatus('table_id'),data = checkStatus.data;
// $('#addToCate').on('click', function(){
// var cateid = $(this).data('type');
// });
// var cateid = 0;
// $('#cate_id').on('click', function(){
// var cateid = $(this).data('type').val();
// });
{if isset($mechanismInfo["id"])}
var m_id = {$mechanismInfo["id"]};
var c_id = $('select[name = cate_id]').val();
if (c_id<1) {
// $("#exportMember").attr('href',"javascript:void(0)");
layer.msg("请先选择要添加到的分组.",{time:2500});return false;
}
var num=0;
var userIds=[];
for (var i in data) {
num++;
userIds.push(data[i].user_id);
}
if (num<1) {
// $("#exportMember").attr('href',"javascript:void(0)");
layer.msg("请选择一项",{time:1500});return false;
}
var url = "{:url('AdminMechanismCateUser/addToCate')}?c_id=" + c_id + "&m_id=" + m_id;
// $("#exportMember").attr('href',url);
// $("#exportMember").attr('href',"");
// var download_num_msg = $("#download_num").html();
lucky.Delete_data(userIds,url,"table_id","确定到分组吗");
{/if}
},
// del: function(){ //获取选中数据
// var checkStatus = table.checkStatus('table_id'),data = checkStatus.data;
// var num=0;
// var id=[];
// for (var i in data) {
// num++;
// id.push(data[i].id);
// }
// if (num<1) {
// layer.msg("请选择一项",{time:1500});return false;
// }
// lucky.Delete_data(id,"{:url('users/delete')}","table_id",'确定删除选中的会员信息吗?');
// },
reload: function(){
lucky.CreateReload("table_id");
}
};
$('.do_btn .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script >
{/block}
layui.js的更多相关文章
- VM4061 layui.js:2 Layui hint: form is not a valid module
报错:VM4061 layui.js:2 Layui hint: form is not a valid module 解决办法:当你遇到类似这样报错,说某某某不是一个有效的模块时,不防在layui. ...
- layui.js框架的启发
最近做前台设计的MM,应用了layui.js框架,是一个可以按模块加载的js框架,可以实现UI上的一些效果,比如"手风琴折叠"面板.我看了下源码,抽出了其框架,应用到公司的项目中, ...
- asp.net core + layui.js 搭建仓储系统
先放几张网站图片: 第一步先从layui 网站https://www.layui.com/doc/ 下载相关文件,复制到项目 wwwroot 目录下: 然后在 _Layout.cshtml 中引用 l ...
- layui.js源码分析
/*! @Title: Layui @Description:经典模块化前端框架 @Site: www.layui.com @Author: 贤心 @License:MIT */ ;!functi ...
- 解决GET http://localhost:8080/js/layui/layui.js net::ERR_ABORTED 404
用ssm+layui在写页面的时候,发现无法找到资源路径 <script src="js/layui/layui.js" charset="utf-8"& ...
- layui js 常用语句语法
烂笔头: layui组件使用 注意layui的版本. 在head里需要引入css/js文件. 出现 form.verify,form.val is not a function的错误信息时,注意版本, ...
- layui js动态添加的面板不能折叠
layui 动态添加dom后一般调用 layer.form.render()更新dom就可以了,但是我动态添加一个面板后form.render()就没有效果,要用layui.element.rende ...
- layui js中求某一天距今天有多少天
<script> lay('#version').html('-v'+ laydate.v); //执行一个laydate实例 laydate.render({ elem: '#test1 ...
- layui中使用autocomplete.js
前言 在网站找了一大圈都是问题没有答案,记录记录谨防踩坑 layui版本:layui-v1.0.9_rls a(https://github.com/devbridge/jQuery-Autocomp ...
- 基于layui+cropper.js实现上传图片的裁剪功能
最近因项目需求,需要在上传图片的时候先对图片裁剪,然后在上传,所以就有了本文的出现. 开始正文之前,要提一下这个图片的裁剪:图片的裁剪,有前端裁剪,也可以后端裁剪 前端的裁剪我知道的可以分为这么两种: ...
随机推荐
- 从优秀到卓越:成为DevOps专家的7项软技能
在我的职业生涯中,遇见过许多专业人士,他们在技术上非常健全,对自己的领域和技术有很好的掌握和专业知识,但是由于缺乏软技能,他们错过了晋升.现场机会.高级技术面试以及职业生涯中的机会.很震惊吧,技术好却 ...
- 数据库锁起来了,把事务清掉sql
select concat('kill ',id,';') from information_schema.`PROCESSLIST` where state !='executing' 将上述代码执 ...
- SQLAlchemy详解
一.SQLAlchemy介绍 SQLAlchemy 是 Python SQL 工具包和对象关系映射器,为应用程序开发人员提供 SQL 的全部功能和灵活性. SQLAlchemy支持SQLite.Pos ...
- Go 语言变量类型和声明详解
在Go中,有不同的变量类型,例如: int 存储整数(整数),例如123或-123 float32 存储浮点数字,带小数,例如19.99或-19.99 string - 存储文本,例如" H ...
- Avalonia的模板控件(Templated Controls)
在Avalonia的UI框架中,TemplatedControl是一个核心组件,它提供了一种强大的方式来创建可重用且高度可定制的控件. 本文将深入探讨TemplatedControl的概念.其带来的优 ...
- Push failed idea将项目发布到gitHub失败
此时需要点击VCS --> inport into version..-->create git ...重新生成仓库
- 实例讲解昇腾 CANN YOLOV8 和 YOLOV9 适配
本文分享自华为云社区<昇腾 CANN YOLOV8 和 YOLOV9 适配>,作者:jackwangcumt. 1 概述 华为昇腾 CANN YOLOV8 推理示例 C++样例 , 是基于 ...
- centos7或者centos8下安装google-chrome谷歌浏览器 亲测成功 20220302
第一步: wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm 第二步: 安装 Google ...
- 实训篇-Html-表单练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- java 后台获取文件上传的真实扩展名
package common.util; import java.io.File; import org.apache.commons.io.FileUtils; import org.apache. ...