搜索到
1677
篇与
的结果
-
Layui颜色选择器的使用，如何使用layui的颜色选择器 效果展示：在使用layui框架的时候，我们有时候需要设置文本颜色，比如标题等，我们会设置一个字段来存储标题颜色，这回就可以使用到Layui自带的颜色选择器了，使用方法如下：html代码部分：<div class="layui-form-item"> <label class="layui-form-label required">颜色</label> <div class="layui-input-inline" style="width: 120px;"> <input type="text" name="color" value="#626061" placeholder="请选择颜色" class="layui-input" id="test-form-input"> </div> <div class="layui-inline" style="left: -11px;"> <div id="test-form"></div> </div> </div>js代码部分：<script> layui.use(['form','layer','colorpicker'], function () { var form = layui.form, layer = layui.layer, colorpicker = layui.colorpicker, $ = layui.$; //颜色 colorpicker.render({ elem: '#test-form' ,color: '#626061' ,done: function(color){ $('#test-form-input').val(color); } }); }); </script> -
Layui表格如何实现点击图片预览图片功能 在使用layui框架的时候，我们有时需要放大表格中的图片，可以使用下面的方法来实现。表格部分代码table.render({ elem: '#currentTableId', url: '{:url("union.customer.getCustomer")}', toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], cols: [[ {type: "checkbox", width: 50}, {field: 'id', width: 80, title: 'ID', sort: true}, {field: 'cate', width: 100, title: '问卷类型'}, {field: 'nick', minwidth: 80, title: '用户信息'}, {field: 'content', minwidth: 80, title: '服务评价'}, {field: 'other_proposal', minwidth: 80, title: '意见'}, { title: '图片' ,align: "center" ,width:300 ,templet: function (d) { return '<div >'+d.photo+'</div>'; } }, {field: 'created_at', title: '时间', width: 160, sort: true}, {title: '操作', width: 130, toolbar: '#currentTableBar', align: "center"} ]], limits: [5, 15, 20, 25, 50, 100], limit: 5, page: true, unresize: false, // skin: 'line', response: { statusName: 'code' //规定数据状态的字段名称，默认：code ,statusCode: 200 //规定成功的状态码，默认：0 ,msgName: 'msg' //规定状态信息的字段名称，默认：msg ,countName: 'count' //规定数据总数的字段名称，默认：count ,dataName: 'data' //规定数据列表的字段名称，默认：data } }); 点击图片预览放大图片//元素加载完成之后点击事件 $(document).on("click", ".layui-form img[name = 'coverUrl']", function (e) { console.log(e) layer.open({ type: 1, title: false, closeBtn: 0, shadeClose: true, //点击阴影关闭 area: ['50%', '50%'], content: "<img width='100%' height='auto' src="https://www.tpxhm.com/fdetail/ + $(this).context.currentSrc + " />", }); })
-
解决layui框架excel导出长数据科学计数法问题 Layui框架自带的导出excel数据默认导出的数据会以数字格式存放，比较长的数据存放后会经过科学计数法加工，从而导致数据错误解决方法：1、在/lib/layui-v2.5.5/lay/modules/table.js中搜索：d.exportFile2、将d.exportFile这个函数，用下面内容替换掉： d.exportFile = function (e, t, i) { t = t || d.clearCacheKey(d.cache[e]), i = i || "csv"; var a = c.config[e] || {}, // 分页按钮 l = {csv: "text/csv", xls: "application/vnd.ms-excel"}[i], // meta格式 n = document.createElement("a"), // a 标签 type = i, meta = l, title = a.title layui.each(t, function (ks, vs) { var inner = {} layui.each(vs, function (k, v) { if (/^\d{9,}$/.test(v)) { vs[k] = vs[k] + '\t' } inner[k] = vs[k] }); t[ks] = inner }) if (r.ie) { var i = [], a = []; layui.each(t, function (t, l) { var n = []; "object" == typeof e ? (layui.each(e, function (e, a) { 0 == t && i.push(a || "") }), layui.each(d.clearCacheKey(l), function (e, t) { n.push(t) })) : d.eachCols(e, function (e, a) { a.field && "normal" == a.type && !a.hide && (0 == t && i.push(a.title || ""), n.push(l[a.field])) }), a.push(n.join(",")) }); var data = i.join(",") + "\r\n" + a.join("\r\n") navigator.msSaveBlob(new Blob(['\ufeff' + data], {type: meta + ';charset=utf-8;'}), title + '.' + type) } else { return n.href = "data:" + l + ";charset=utf-8,\ufeff" + encodeURIComponent(function () { var i = [], a = []; return layui.each(t, function (t, l) { var n = []; "object" == typeof e ? (layui.each(e, function (e, a) { 0 == t && i.push(a || "") }), layui.each(d.clearCacheKey(l), function (e, t) { n.push(t) })) : d.eachCols(e, function (e, a) { a.field && "normal" == a.type && !a.hide && (0 == t && i.push(a.title || ""), n.push(l[a.field])) }), a.push(n.join(",")) }), i.join(",") + "\r\n" + a.join("\r\n") }()), n.download = (a.title || "table_" + (a.index || "")) + "." + i, document.body.appendChild(n), n.click(), void document.body.removeChild(n)} },
-
Layui修改刷新当前页面记录搜索值 在开发项目中，我们需要保存成功之后，刷新父页面，也就是重新加载并保存之前搜索数据，可以使用那面的代码实现1、监听搜索操作，保存到sessionStorage// 监听搜索操作 form.on('submit(data-search-btn)', function (data) { var result = JSON.stringify(data.field); // layer.alert(result, { // title: '最终的搜索信息' // }); // 将电话，卡号，姓名保存到sessionStorage sessionStorage.setItem('telValue', JSON.stringify(data.field.tel)); sessionStorage.setItem('cardValue', JSON.stringify(data.field.card)); sessionStorage.setItem('nameValue', JSON.stringify(data.field.name)); //执行搜索重载 table.reload('currentTableId', { page: { curr: 1 } , where: { searchParams: result } }, 'data'); return false; });2、刷新select选择框渲染，给表单赋值 // 刷新select选择框渲染 form.render('select'); //给表单赋值 form.val("filter", { //filter 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值 "tel": JSON.parse(sessionStorage.getItem('telValue')), "card": JSON.parse(sessionStorage.getItem('cardValue')), "name": JSON.parse(sessionStorage.getItem('nameValue')), }); //从表单取值 var data1 = form.val("filter");//filter 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值 console.log(data1); var result = {card: JSON.parse(sessionStorage.getItem('cardValue')), tel: JSON.parse(sessionStorage.getItem('telValue')), name: JSON.parse(sessionStorage.getItem('nameValue'))}; var result2 = JSON.stringify(result); console.log(result2) //执行搜索重载 table.reload('currentTableId', { page: { curr: 1 } , where: { searchParams: result2 } }, 'data');
-
