layui [记录]

<table class="layui-table tbList" lay-skin="line">
    <colgroup>
        <col width="25%"><col width="200px"><col>
    </colgroup>
    <thead>
    　　<tr>
        　　<th>会员等级</th>
    　　</tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="lyt">
                    <img src="/def/mem.png" alt="img">
                    <h3>初级会员</h3>
                </div>
            </td>
            <td><button class="layui-btn layui-btn-sm" data-id='${regularMem.id}' onclick="modify(this)">编辑</button></td>
        </tr>
        <tr><td colspan="5" class="tbNodata">未查询到数据</td></tr>
    </tbody>
</table>

<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">会员等级：</label>
        <div class="layui-input-inline">
            <span class="layui-btn layui-btn-sm">${member.grade}</span>
        </div>
    </div>
</div>

layui-input-inline

<input type="text"  name="manageArea" value="${customer.contactAddress}" required  lay-verify="vManage" placeholder="请输入详细地址" autocomplete="off" class="layui-input">

<input type="text" name="name" required lay-verify="required" value="" placeholder="请输入名称" class="layui-input">

<div class="layui-form-item">
    <label class="layui-form-label"><em>*</em>现价/年：</label>
    <div class="layui-input-inline">
        <input type="number" name="price" required lay-verify="required" value="${member.price}" placeholder="请输入数量" class="layui-input">
    </div>
    <div class="layui-form-mid">元</div>
</div>

<span class="layui-form-mid layui-word-aux">建议图片宽度750</span>

<button class="layui-btn" lay-submit="submit" lay-filter="save">保存</button>

省市区联动  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('<option value="">'+(!_.isEmpty(nullStr)?nullStr:'请选择')+'</option>');
    $.each(dt, function (i, el) {
        dom.append('<option value="' + el + '" '+ (el==slt?"selected":"") +'>' + el + '</option>')
    })
}
function removeItems(dom,nullStr) {
    dom.empty();
    dom.append('<option value="">'+(!_.isEmpty(nullStr)?nullStr:'请选择')+'</option>');
}

HTML:

<div class="layui-form-item w120">
    <label class="layui-form-label">*经营地区</label>
    <div class="layui-input-inline">
        <select data-slt="${customer.contactProvince}" name="adrProvince" required lay-verify="required" id="adrProvince" lay-filter="adrProvince">
            <option value="">省</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select data-slt="${customer.contactCity}" name="adrCity"  required lay-verify="required" id="adrCity" lay-filter="adrCity">
            <option value="">市</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select data-slt="${customer.contactArea}"  name="adrArea"  required lay-verify="required" id="adrArea">
            <option value="">区</option>
        </select>
    </div>
</div>

<button class="layui-btn layui-btn-normal" lay-submit lay-filter="userEntering">确定</button>

 $.ajaxSetup({async:false});

<select name="companyType" required lay-verify="required">
    <option value="">请选择</option>
    <option value="连锁商超">连锁商超</option>
</select>

<div class="layui-input-block">
    <input type="checkbox" name="kind[连衣裙]" title="连衣裙" lay-skin="primary">
    <input type="checkbox" name="kind[其他]" title="其他" lay-skin="primary">
</div>

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;
}

<input type="radio" name="sales" value="1万件以下" title="1万件以下">

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：

<div class="rooted layui-form">
    <div>[${role.name}]：${role.remark}</div>
    <%var i=0;for(el in root){%>
    <div class="rootWrap">
        <div class="layui-row rootTit">
            <div class="allCheck"><input type="checkbox" name="title[全选]" data-i="${i}" data-tit="${el.name}" title="全选" lay-skin="primary" lay-filter="allChoose"></div>
            <h3>${el.name}</h3>
        </div>
        <div class="layui-row rootCon">
            <%for(ell in el.accredit){%>
                <div class="layui-col-md2"><input type="checkbox" name="kind${i}[${ell.name}]" data-i="${i}" title="${ell.name}" ${ell.rooted==true?'checked':''} lay-skin="primary"></div>
            <%}%>
        </div>
    </div>
    <%i++;}%>
    <div class="btnRWrap">
        <button class="layui-btn" lay-submit="submit" lay-filter="accredit">确认</button>
        <button class="layui-btn layui-btn-primary">取消</button>
    </div>
</div>

JSON:

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}
    ]}
];

<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 class="layui-inline">
      <label class="layui-form-label">验证邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>

关于 button

　　<button type="reset" class="layui-btn layui-btn-primary" onclick="resetSearch()">重置</button>
　　　　　　放于 form 表单 起作用
　　<button type="button" class="layui-btn fr" onclick="exportResult()">导出报表</button>
　　　　　　type="button"  防止 或许会自动刷新

layui  table css 提取

.tbList{table-layout: fixed;margin: 0; 100%;background-color: #fff;color: #666;border-collapse: collapse;border-spacing: 0;border-top: 3px solid #a10816;}
        .tbList td,.tbList th{border- 1px;border-style: solid;border-color: #e6e6e6;border- 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;}




<table class="tbList">
            <colgroup>
                <col style="50px;"/>
                <col>
                <col style="30%;"/>
            </colgroup>
            <thead>
            <tr>
                <th>666</th>
                <th>emmmm</th>
                <th>放不了几个字</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    6666
                </td>
                <td>手机端真的不适合表格，你看看才多少个字，手机端真的不适合表格，你看看才多少个字</td>
                <td>放不了几个字</td>
            </tr>
            </tbody>
        </table>