| 会员等级 | ||||
|---|---|---|---|---|
 初级会员 | ||||
| 未查询到数据 | ||||
${member.grade}
layui-input-inline
元
建议图片宽度750
省市区联动 Json get/js
var form; var _jsonCity; function getCity() { $.ajaxSettings.async = false; $.getJSON("/city.json", function (data) { _jsonCity = data; adrP=$('#adrProvince').attr('data-slt'); adrC=$('#adrCity').attr('data-slt'); adrA=$('#adrArea').attr('data-slt'); addItem($('#adrProvince'), _jsonCity.p,'省',adrP); addItem($('#adrCity'), _jsonCity.c[adrP],'市',adrC); addItem($('#adrArea'), _jsonCity.a[adrP + "-" + adrC],'区',adrA); }) } getCity(); var adrP,adrC,adrA; layui.use('form', function () { form = layui.form; //注册 form.render(); //渲染 form.on('select(adrProvince)', function (data) { adrP=data.value removeItems($('#adrCity'),'市'); removeItems($('#adrArea'),'区'); if(!_.isEmpty(adrP)){ addItem($('#adrCity'),_jsonCity.c[adrP],'市'); addItem($('#adrArea'),[],'区'); } form.render(); }); form.on('select(adrCity)', function (data) { removeItems($('#adrArea'),'区'); adrC=data.value; if(!_.isEmpty(adrC)){ addItem($('#adrArea'), _jsonCity.a[adrP + "-" + adrC],'区'); } form.render(); }); //监听提交 form.on('submit(userEntering)', function (data) { ModifyUser(data.field); return false; }); form.verify({ vName: [/(.+){2,6}$/, '请输入2-6位汉字或字母的姓名'], vLenBrand: function (value) { if (!vValLen(value, 30)) { return "输入过长,限30字符"; } } }); }); lay-verify="required|phone|number" vDate: [/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/, '请输入正确格式,如：2018-01-01 11:11:11'] vPrice:[/^(0|[1-9][0-9]{0,9})(\.[0-9]{1,2})?$/, '请输入正确价格格式!'] function addItem(dom, dt,nullStr,slt) { dom.empty(); dom.append(''); $.each(dt, function (i, el) { dom.append('') }) } function removeItems(dom,nullStr) { dom.empty(); dom.append(''); } HTML: $.ajaxSetup({async:false});
var arr = ['kind[连衣裙]', 'kind[丝巾]', 'kind[旗袍]', 'kind[睡衣]', 'kind[短衫]', 'kind[其他]']; function handleCheck(obj) { var back = []; $.each(arr, function (i, el) { if (obj[el] == 'on') { back.push(el.substring(5, (el.length - 1))) } }) return back; }
layui 全选 反选
that.form.on('checkbox', function (data) { const el = $(data.elem); const state = data.elem.checked; const inps = el.closest('.jsRangWrap').find('input[type="checkbox"]'); if (el.attr('lay-filter') === 'allChoose') { for (let i = 0, len = inps.length; i < len; i++) { inps[i].checked = state; } } else { let bool = true; for (let i = 1, len = inps.length; i < len; i++) { if (!inps[i].checked) { bool = false; break; } } inps[0].checked = bool; } that.form.render('checkbox'); }); ------------------------------------------------------------- JS：
layui.use(['form'], function () { form = layui.form; form.render(); form.on('checkbox(allChoose)', function (data) { var state = data.elem.checked; var inps = $(data.elem).closest('.rootWrap').find('input[type="checkbox"]'); inps.each(function (i, el) { el.checked = state; }); form.render('checkbox'); }); form.on('submit(accredit)', function (data) { accredit(data.field); return false; }); }); function accredit(obj) { console.log(obj); var root = []; $.each($(".rootWrap"), function (i, el) { var obj={ "name": $(el).find('.rootTit input[type="checkbox"]').attr('data-tit'), "accredit": [] }; $.each($(el).find('.rootCon input[type="checkbox"]'), function (ii, ell) { obj.accredit.push({ "name": $(ell).attr('title'), "rooted": ell.checked }); }); root.push(obj); }) console.log(root); } HTML：
JSON:[${role.name}]：${role.remark}<%var i=0;for(el in root){%><%i++;}%>${el.name}
<%for(ell in el.accredit){%><%}%>
var root=[ {"name":"用户中心","accredit":[ {"name":"用户中心1","rooted":false},{"name":"用户中心2","rooted":true},{"name":"用户中心3","rooted":true} ]}, {"name":"商品中心","accredit":[ {"name":"商品中心1","rooted":false},{"name":"商品中心2","rooted":true},{"name":"商品中心3","rooted":true} ]} ];
关于 button 放于 form 表单 起作用 type="button" 防止 或许会自动刷新
layui table css 提取
.tbList{table-layout: fixed;margin: 0;width: 100%;background-color: #fff;color: #666;border-collapse: collapse;border-spacing: 0;border-top: 3px solid #a10816;} .tbList td,.tbList th{border-width: 1px;border-style: solid;border-color: #e6e6e6;border-width: 0 0 1px;position: relative;padding: 4px 8px;min-height: 20px;line-height: 20px;font-size: 14px;} .tbList tr{transition: all .3s;-webkit-transition: all .3s;} .tbList th{text-align: left;font-weight: 400;line-height: 35px;} .tbList thead tr{background: #f2f2f2;} | 666 | emmmm | 放不了几个字 |
|---|---|---|
| 6666 | 手机端真的不适合表格，你看看才多少个字，手机端真的不适合表格，你看看才多少个字 | 放不了几个字 |