jquery layui 用法示例 point
积分列表：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="/public/plugins/layui/css/layui.css?v=v1.3.0" media="all"> <link rel="stylesheet" href="/public/static/admin/css/admin.css?v=v1.3.0" media="all"> <link rel="stylesheet" href="/public/static/admin/css/ey_layui.css?v=v1.3.0" media="all"> <script type="text/javascript"> var timestamp=new Date().getTime() var eyou_basefile = "http://house.amicrogift.com/login.php?t="+ {timestamp}; //var module_name = "admin{timestamp}"; var __root_dir__ = ""; </script> <script type="text/javascript" src="/public/static/admin/js/base64.js"></script> <script type="text/javascript" src="/public/static/admin/js/jquery.js?v=v1.3.0"></script> <script type="text/javascript" src="/public/static/admin/js/jquery-ui/jquery-ui.min.js?v=v1.3.0"></script> <script type="text/javascript" src="/public/plugins/layer-v3.1.0/layer.js?v=v1.3.0"></script> <script type="text/javascript" src="/public/static/admin/js/jquery.cookie.js?v=v1.3.0"></script> <script type="text/javascript" src="/public/plugins/laydate/laydate.js?v=v1.3.0"></script> <script src="/public/plugins/layui/layui.js?v=v1.3.0"></script> </head> <body> <div class="head-oper demoTable" > <div class="fl" id="addgift"> <a data-type="Article_add" data-url="http://house.amicrogift.com/login.php?m=admin&c=Article&a=add" class="layui-btn mt5 "> 增减积分 </a> </div> <div class="fr"> <!--<form method="get" id="jifen_form" >--> <div class="fl"> <div class="layui-input-inline mt5"> <select name="points_exchange" id="points_exchange"> <option value="">积分类型</option> <option value="checkin">签到</option> <option value="share">邀请好友</option> <option value="ordersee">点评楼盘</option> <!--<option value="system">系统管理</option>--> <option value="ordersee">预约看房</option> <option value="recommend">推荐客户</option> <option value="selfbuy">自己认购</option> <option value="custbuy">客户认购</option> <option value="exchange">积分兑换</option> </select> </div> <div class="layui-input-inline mt5 w240"> <input id="demoReload" type="text" name="keyword" id="" value placeholder="昵称/姓名/手机号" class="layui-input"> </div> </div> <div class="layui-input-inline w50 mt5 fr"> <button class=" input-btn-search layui-btn " data-type="reload" id="searchclick"> <i class="layui-icon layui-icon-search"></i> </button> </div> <!--</form>--> </div> <!--<div class="fr">--> <!-- <form action="http://house.amicrogift.com/login.php?m=admin&c=Article&a=index" id="searchForm" method="get" onsubmit="layer_loading();">--> <!-- <input type="hidden" name="m" value="admin"><input type="hidden" name="c" value="Article"><input type="hidden" name="a" value="index"> <div class="fl ">--> <!-- <div class="layui-input-inline mt5">--> <!-- <select name="typeid" id="searchTypeid">--> <!-- <option value="">--所有文档--</option>--> <!-- <option value="2" data-grade="0" data-current_channel="1">楼市</option><option value="4" data-grade="1" data-current_channel="1"> 楼盘动态</option><option value="5" data-grade="1" data-current_channel="1"> 购房指南</option><option value="6" data-grade="1" data-current_channel="1"> 最新资讯</option><option value="14" data-grade="0" data-current_channel="1">楼盘动态</option> </select>--> <!-- </div>--> <!-- <div class="layui-input-inline w240 mt5">--> <!-- <input type="text" name="keywords" id="keywords" value="" placeholder="标题搜索" class="layui-input">--> <!-- </div>--> <!-- </div>--> <!-- <div class="layui-input-inline w50 mt5">--> <!-- <button class="layui-btn input-btn-search" type="submit"><i class="layui-icon layui-icon-search"></i></button>--> <!-- </div>--> <!-- </form>--> <!--</div>--> </div> <link rel="stylesheet" href="/public/static/admin/css/page.css" media="all"> <!--test--> <table class="layui-hide" id="test"></table> <script> $('form').submit(function (event) { console.log('form表单提交了......') console.log(event) console.log($('form').serialize()) let aadata = $('form').serialize(); // console.log(JSON.parse('aadata') ) // 终止默认事件的传递 event.preventDefault() }) function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); } layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'/login.php?m=admin&c=Points&a=query&actid='+getQueryVariable("actid") ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增 ,cols: [[ {field:'id', width:80, title: 'ID', sort: true} ,{field:'typename', width:150, title: '积分类型'} ,{field:'litpic', width:150, title: '头像'} ,{field:'nickname', width:150, title: '昵称'} ,{field:'real_name', width:150, title: '真实姓名'} // ,{field:'nickname', title: '昵称', Width: 200} // ,{field:'',width:'40%', title: '', minWidth: 200}//minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增 ,{field:'createtime', width:200, title: '创建时间'} // ,{field:'openid', width:140, title: 'openid'} // ,{field:'name', width:80, title: '姓名'} // ,{field:'mobile', width:180, title: '手机号'} // ,{field:'open_id', width:280, title: 'open_id'} // ,{field:'openid', width:180, title: 'openid'} ,{field:'phone', width:130, title: '手机号'} ,{field:'sum_num', title: '总积分'} ,{field:'num', title: '积分'} // ,{field:'name', width:140, title: '姓名'} // ,{field:'experience', title: '积分', sort: true} // ,{field:'score', title: '评分', sort: true} // ,{field:'classify', title: '职业'} // ,{field:'wealth', width:137, title: '财富', sort: true} ]] ,page: true ,limit:20 ,id: 'testReload' }); var $ = layui.$, active = { reload: function(){ var demoReload = $('#demoReload'); //执行重载 table.reload('testReload', { page: { curr: 1 //重新从第 1 页开始 } ,where: { keyword: demoReload.val(), type:$("#points_exchange").find("option:selected").val() } }, 'data'); } }; $('.demoTable .layui-btn').on('click', function(){ console.log('aaa') var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); }); $('#addgift').on('click', function(){ layer.open({ type: 2, title: "增减积分", area: ['100%', '100%'], content: '/login.php?m=admin&c=points&a=add', success: function (layero, index) { var body = layer.getChildFrame('body', index); var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();比如iframeWin.alert11(); // console.log(body.html()) //得到iframe页的body内容 body.find('.btn').hide();//隐藏class为btn的元素 // window.location.reload() } }); }); // 下拉选择框 $(document).on('change', '#points_exchange', function(){ // 获取value值赋值给type便于传递给后台 // var type = $("#points_exchange").find("option:selected").val(); $("#searchclick").trigger("click"); // console.log(type) }); </script> </body> </html>
增减积分页面及代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="/public/plugins/layui/css/layui.css?v=v1.3.0" media="all"> <link rel="stylesheet" href="/public/static/admin/css/admin.css?v=v1.3.0" media="all"> <link rel="stylesheet" href="/public/static/admin/css/ey_layui.css?v=v1.3.0" media="all"> <link rel="stylesheet" href="/public/static/admin/css/page.css" media="all"> <script type="text/javascript"> var timestamp=new Date().getTime() var eyou_basefile = "http://house.amicrogift.com/login.php?t="+ {timestamp}; //var module_name = "admin{timestamp}"; var __root_dir__ = ""; </script> <script type="text/javascript" src="/public/static/admin/js/base64.js"></script> <script type="text/javascript" src="/public/static/admin/js/jquery.js?v=v1.3.0"></script> <script type="text/javascript" src="/public/static/admin/js/jquery-ui/jquery-ui.min.js?v=v1.3.0"></script> <script type="text/javascript" src="/public/plugins/layer-v3.1.0/layer.js?v=v1.3.0"></script> <script type="text/javascript" src="/public/static/admin/js/jquery.cookie.js?v=v1.3.0"></script> <script type="text/javascript" src="/public/plugins/laydate/laydate.js?v=v1.3.0"></script> <script src="/public/plugins/layui/layui.js?v=v1.3.0"></script> <script type="text/javascript"> $(document).ready(function(){ console.log('11111111111') }) </script> </head> <body> <div style="width:100%;display:flex;"> <div style="width:900px;"> <!--<div class="head-oper">--> <!-- <div class="fl" id="addgift">--> <!-- <a data-type="Article_add" data-url="http://house.amicrogift.com/login.php?m=admin&c=Article&a=add" class="layui-btn mt5 ">--> <!-- 新增礼品--> <!-- </a>--> <!-- </div>--> <!--</div>--> <div class="head-oper demoTable"> <div class="fl"> <div class="fl mt5"> <div class="layui-input-inline w800"> <input id="demoReload" autocomplete="off" type="text" name="keywords" value="" placeholder="昵称/姓名/手机号" class="layui-input"> </div> </div> <div class="layui-input-inline w50 mt5"> <button class=" input-btn-search layui-btn " data-type="reload" id="searchclick"> <i class="layui-icon layui-icon-search"></i> </button> </div> </div> </div> <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> </script> <script> // function getQueryVariable(variable) // { // var query = window.location.search.substring(1); // var vars = query.split("&"); // for (var i=0;i<vars.length;i++) { // var pair = vars[i].split("="); // if(pair[0] == variable){return pair[1];} // } // return(false); // } // </script> <!-- <div style="margin-bottom: 5px;"> --> <!-- 示例-970 --> <!--<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>--> <!--</div>--> <!--<div class="layui-btn-group demoTable">--> <!-- <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>--> <!-- <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>--> <!-- <button class="layui-btn" data-type="isAll">验证是否全选</button>--> <!--</div>--> <!--<table class="layui-table" lay-data="{width: 840, height:900, url:'/login.php?m=admin&c=users&a=query&keyword=', page:true, limit:20,id:'idTest'}" lay-filter="demo">--> <!-- <thead>--> <!-- <tr>--> <!--<th lay-data="{type:'checkbox', fixed: 'left'}"></th>--> <!--<th lay-data="{field:'id', width:80, sort: true,}">ID</th>--> <!--<th lay-data="{field:'username', width:80}">用户名</th>--> <!--<th lay-data="{field:'sex', width:80, sort: true}">性别</th>--> <!-- <th lay-data="{field:'litpic', width:80}">图标</th>--> <!-- <th lay-data="{field:'nickname', width:200}">昵称</th>--> <!-- <th lay-data="{field:'real_name', width:150}">姓名</th>--> <!-- <th lay-data="{field:'phone', width:180}">手机</th>--> <!-- <th lay-data="{field:'sum_num', width:100, sort: true}">总积分</th>--> <!--<th lay-data="{field:'classify', width:80}">职业</th>--> <!--<th lay-data="{field:'wealth', width:135, sort: true}">财富</th>--> <!--<th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">评分</th>--> <!--<th lay-data="{fixed: 'right', width:80, align:'center', toolbar: '#barDemo'}"></th>--> <!-- </tr>--> <!-- </thead>--> <!--</table>--> <!--<script type="text/html" id="barDemo">--> <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>--> <!--</script>--> </div> <div style="margin-top:60px;width:500px;"> <!--background-color: #fff;--> <form class="layui-form" action="" id="isformid"> <div class="layui-form-item"> <label class="layui-form-label">openid</label> <div class="layui-input-block"> <input style="background-color:#f2f2f2;" type="text" id="isopenid" readonly name="openid" lay-verify="title" autocomplete="off" placeholder="" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">昵称</label> <div class="layui-input-block"> <input style="background-color:#f2f2f2;" type="text" id="isnickname" disabled="" name="nickname" lay-verify="required" lay-reqtext="请点击左边某项编辑" placeholder="" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">手机号</label> <div class="layui-input-block"> <input style="background-color:#f2f2f2;" type="text" id="isphone" readonly name="phone" lay-verify="required" lay-reqtext="请点击左边某项编辑" placeholder="" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input style="background-color:#f2f2f2;" type="text" id="isrealname" disabled="" name="real_name" placeholder="" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">总积分</label> <div class="layui-input-block"> <input style="background-color:#f2f2f2;" type="text" id="issumnum" disabled="" name="sum_num" placeholder="" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item isshow" style="margin-top:100px;display:none;" > <label class="layui-form-label">增减积分值</label> <div class="layui-input-block"> <input type="text" name="num" id="sendnum" lay-verify="required" lay-reqtext="增减积分值是必填项，岂能为空？" placeholder="负数为减少积分" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item isshow" style="display:none;"> <label class="layui-form-label">积分类型</label> <div class="layui-input-block"> <select name="type" lay-filter="aihao"> <!--<option value=""></option>--> <!--<option value="0">签到</option>--> <!--<option value="1" selected="">邀请好友</option>--> <option value="selfbuy">自己认购</option> <!--<option value="3">自己认购</option>--> <!--<option value="4">兑换礼品</option>--> </select> </div> </div> <!--<div class="layui-form-item">--> <!-- <div class="layui-inline">--> <!-- <label class="layui-form-label">验证手机</label>--> <!-- <div class="layui-input-inline">--> <!-- <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">--> <!-- </div>--> <!-- </div>--> <!--</div>--> <div class="layui-form-item isshow" style="display:none;"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </div> <!--<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>--> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <script> layui.use('table', function(){ var table = layui.table; //方法级渲染 table.render({ elem: '#LAY_table_user' ,url: '/login.php?m=admin&c=users&a=query&keyword=' ,cols: [[ {field:'litpic', title: '图标', width:80} ,{field:'nickname', title: '昵称', width:200} ,{field:'real_name', title: '姓名', width:150} ,{field:'phone', title: '手机', width:180} ,{field:'sum_num', title: '总积分', width:100} ,{fixed: 'right', title:'操作', align:'center',toolbar: '#barDemo', width:100} ]] ,id: 'testReload' ,page: true ,limit:20 ,height: 900 ,width: 860 }); var $ = layui.$, active = { reload: function(){ var demoReload = $('#demoReload'); //执行重载 table.reload('testReload', { page: { curr: 1 //重新从第 1 页开始 } ,where: { keyword: demoReload.val() } }, 'data'); } }; $('.demoTable .layui-btn').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); table.on('tool(user)', function(obj){ console.log(obj) var data = obj.data; if(obj.event === 'detail'){ layer.msg('ID：'+ data.id + ' 的查看操作'); } else if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ // obj.del(); // layer.close(index); console.log(index) console.log(obj.data.id) $.post("/login.php?m=admin&c=Gift&a=del&id="+obj.data.id,{},function(result){ console.log(result) obj.del(); layer.close(index); }) }); } else if(obj.event === 'edit'){ // layer.alert('编辑行：<br>'+ JSON.stringify(data)) // layer.alert('编辑行：<br>'+ JSON.stringify(data)) $(".isshow").show(); console.log(data) $("#isopenid").attr("value",data.open_id); $("#isnickname").attr("value",data.nickname); $("#isphone").attr("value",data.phone); $("#isrealname").attr("value",data.real_name); $("#issumnum").attr("value",data.sum_num); } }) }); </script> <script> layui.use('table', function(){ var table = layui.table; //监听表格复选框选择 table.on('checkbox(demo)', function(obj){ console.log(obj) }); //监听工具条 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ layer.msg('ID：'+ data.id + ' 的查看操作'); } else if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ // obj.del(); // layer.close(index); console.log(index) console.log(obj.data.id) $.post("/login.php?m=admin&c=Gift&a=del&id="+obj.data.id,{},function(result){ console.log(result) obj.del(); layer.close(index); }) }); } else if(obj.event === 'edit'){ // layer.alert('编辑行：<br>'+ JSON.stringify(data)) // layer.alert('编辑行：<br>'+ JSON.stringify(data)) console.log(data) $("#isopenid").attr("value",data.open_id); $("#isnickname").attr("value",data.nickname); $("#isphone").attr("value",data.phone); $("#isrealname").attr("value",data.real_name); $("#issumnum").attr("value",data.sum_num); // layer.open({ // type: 2, // title: "礼品内容", // area: ['100%', '100%'], // content: '/login.php?m=admin&c=Gift&a=add&id='+data.id, // success: function (layero, index) { // var body = layer.getChildFrame('body', index); // var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();比如iframeWin.alert11(); // // console.log(body.html()) //得到iframe页的body内容 // body.find('.btn').hide();//隐藏class为btn的元素 // // window.location.reload() // } // }); } }); }); //监听提交 $('form').submit(function (event) { console.log('form表单提交了......') console.log(event) console.log($('form').serialize()) let aadata = $('form').serialize(); // console.log(JSON.parse('aadata') ) // 终止默认事件的传递 // event.preventDefault() $(document).ready(function(){ $.post(" /login.php?m=admin&c=points&a=change",aadata,function(result){ // console.log(result) // parent.location.reload(); // let searchtext = $('#demoReload').val() // window.location.reload() let stext = $('#isphone').val() console.log('ccccccccccccccccccc'); $('#demoReload').val(stext) $("#searchclick").trigger("click"); console.log('ccccccccccccccccccc'); $("#sendnum").attr("value",''); // $("#issumnum").val('555'); layer.msg('修改成功') // $('#searchclick').on('click', function(){ // console.log($('#iskeywords').val()); // // $.post("/login.php?m=admin&c=users&a=query&keyword=",{},function(result){ // // var listdata = JSON.parse(result).data; // // }) // }) }) }) return false; // $.ajax({ // type : 'post', // url : "/login.php?m=admin&c=points&a=change", // data : aadata, // dataType : 'json', // success : function(res){ // // layer.close(load); //关闭loading // if(res.code == 0){ // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 // parent.layer.close(index); // // window.location.reload() // parent.location.reload(); // // parent.window.location.href = res.url; // }else{ // // showErrorMsg(res.msg); // } // }, // error: function(e){ // // layer.close(load); //关闭loading // // showErrorAlert(); // } // }); // return false; }) // $(function () { // form.on('submit(formSubmit)', function(data){ // console.log('提交测试数据：') // console.log('textarea值：' +$('#addonFieldExt_content').val()) // console.log('编辑器内容：') // console.log(UE.getEditor('addonFieldExt_content').getContent()) // // data.field.title= 'aaa' // // data.field.addonFieldExt[content] = UE.getEditor('addonFieldExt_content').getContent() // console.log(data) // // var load = layer_loading(); // // data.field._ajax = 1; // // $.ajax({ // // type : 'post', // // url : "/login.php?m=admin&c=Gift&a=upd&id="+getQueryVariable("id"), // // data : data.field, // // dataType : 'json', // // success : function(res){ // // layer.close(load); //关闭loading // // if(res.code == 0){ // // href = "www.baidu.com"; // // // window.location.reload() // // // showErrorAlert(); // // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 // // parent.layer.close(index); // // // window.location.reload() // // parent.location.reload(); // // // parent.window.location.href = res.url; // // }else{ // // showErrorMsg(res.msg); // // } // // }, // // error: function(e){ // // layer.close(load); //关闭loading // // showErrorAlert(); // // } // // }); // // return false; // }); // }) </script> </body> </html>
浙公网安备 33010602011771号