123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- {extend name="public/layout" /} {block name="title"}风格测一测列表{/block} {block name="body"}
- <style type="text/css">
- .layui-fluid {
- display: block;
- box-shadow: 0 0 4px 0 #B6CADE;
- border-radius: 5px;
- margin: 15px;
- background-color: #ffffff;
- }
- .layui-card .layui-table-view{margin: 10px 0;}
- .layui-table thead tr, .layui-table-header {
- background-color: #D4E4ED !important;
- border-color: #D4E4ED !important;
-
- }
- .layui-card-body{padding:0px 10px !important;}
- .layui-btn-xs,.layui-btn-xs:hover {
- border: 1px solid #249EFB;
- background-color: #fff;
- color: #249EFB;
- padding: 0px 10px;
- }
- .layui-btn-danger,.layui-btn-danger:hover{
- color: #FF5722;
- background-color: #fff;
- border: 1px solid #FF5722;
- padding: 0px 10px;
- }
- .layui-btn-primary {
- color: #249EFB;
- border: 1px solid #249EFB;
- }
- .layui-btn-primary:hover {
- background-color: #E3F7FF;
- color: #249EFB;
- }
- </style>
- <body>
- <div class="layui-fluid">
- <div class="layui-card">
- <div class="layui-form layui-card-header layuiadmin-card-header-auto">
- <div class="layui-form-item">
- <div class="layui-inline" style="float: left;">
- {auth:check name="tool/styleTestAddSave"}
- <button class="layui-btn layuiadmin-btn-list layui-btn-primary" data-type="add">添加风格图片</button>
- {/auth:check}
- </div>
- <div class="flex-sub" style="float:right;">
- <div class="layui-inline" style="margin-right: 0px;">
- <label class="layui-form-label">风格</label>
- <div class="layui-input-inline">
- <select name="type" lay-filter="type" id="type">
- <option value="">请选择风格</option>
- {volist name="type" id="v" key="k"}
- <option value="{$k}">{$v}</option>
- {/volist}
- </select>
- </div>
- </div>
- <div class="layui-inline" style="margin-right: 0;">
- <button class="layui-btn layuiadmin-btn-list submitbtn" lay-submit lay-filter="LAY-app-contlist-search">
- <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="layui-card-body">
- <!-- <div style="padding: 15px 0;">
- {auth:check name="tool/styleTestAddSave"}
- <button class="layui-btn layuiadmin-btn-list layui-btn-primary" data-type="add">添加风格图片</button>
- {/auth:check}
- </div> -->
- <table id="style-test-table" lay-filter="style-test-table"></table>
- <script type="text/html" id="img">
- <img src="{{d.img}}" alt="图片" style="height: 100%;weight:50px"/>
- </script>
- <script type="text/html" id="table-pointsmall-edit">
- {auth:check name="tool/styleTestAddSave"}
- <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
- {/auth:check}
- {auth:check name="tool/del"}
- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
- {/auth:check}
- </script>
- </div>
- </div>
- </div>
- {/block} {block name="js"}
- <script>
- layui.config({
- base: '__LAYUI__/',
- urlbase: '/sys'
- }).extend({
- index: 'lib/index' //主入口模块
- }).use(['index', 'form', 'table'], function() {
- var $ = layui.$,
- table = layui.table,
- form = layui.form;
- //监听搜索
- form.on('submit(LAY-app-contlist-search)', function(data) {
- var field = data.field;
- //执行重载
- table.reload('style-test-table', {
- where: field
- });
- });
- active = {
- add: function() {
- layer.open({
- type: 2,
- title: ['添加风格图片', 'color:#333333;background-color:#D8E6F1;'],
- content: '{:url("tool/styleTestAdd")}',
- maxmin: true,
- area: ['80%', '80%'],
- btn: ['确定', '取消'],
- yes: function(index, layero) {
- //点击确认触发 iframe 内容中的按钮提交
- var submit = layero.find('iframe').contents().find("#styleimg-submit");
- submit.click();
- }
- });
- }
- };
- document.onkeydown=function(event){
- var e = event || window.event || arguments.callee.caller.arguments[0];
- if(e && e.keyCode==13){
- $(".submitbtn").trigger("click");
- }
- };
- table.render({
- elem: '#style-test-table',
- url: "{:url('tool/styleTest')}",
- cols: [
- [ {
- field: 'type',
- title: '风格'
- }, {
- title : '图片',
- templet: '#img'
- }, {
- title : '操作',
- width : 150,
- align : 'center',
- fixed : 'right',
- toolbar: '#table-pointsmall-edit'
- }]
- ],
- page: false,
- limit: 10,
- limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
- text: '对不起,加载出现异常!'
- });
- //监听工具条
- table.on('tool(style-test-table)', function(obj) {
- var data = obj.data;
- if(obj.event === 'del') {
- layer.confirm('确定删除该内容?',{title: ['信息', 'color:#333333;background-color:#D8E6F1;']}, function(index) {
- $.ajax({
- type: 'post',
- url: "{:url('tool/del')}",
- data: {
- key: data.key
- },
- success: function(res) {
- if(res.code == 0) {
- layer.msg(res.msg, {
- anim: 0
- });
- } else {
- layer.msg(res.msg, {
- anim: 6
- });
- }
- }
- });
- obj.del();
- layer.close(index);
- });
- } else if(obj.event === 'edit') {
- layer.open({
- type: 2,
- title: ['修改图片内容', 'color:#333333;background-color:#D8E6F1;'],
- content: "{:url('tool/styleTestEdit')}?key=" + data.key,
- area: ['80%', '80%'],
- btn: ['确定', '取消'],
- yes: function(index, layero) {
- var submit = layero.find('iframe').contents().find("#styleimg-submit");
- submit.click();
- }
- })
- }
- });
- $('.layui-btn.layuiadmin-btn-list').on('click', function() {
- var type = $(this).data('type');
- active[type] ? active[type].call(this) : '';
- });
- });
- </script>
- </body>
- {/block}
|