LAYUI

FORM 验证

两次密码输入一致

第一个密码输入框加 required lay-verify=“required”
第二个密码输入框加 required lay-verify=“required|confirmPass”,然后在js中定义一个confirmPass方法,用于密码验证

<div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
               autocomplete="off" class="layui-input login_input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">重复密码</label>
    <div class="layui-input-inline">
        <input type="password" name="password2" required lay-verify="required|confirmPass" placeholder="请重复密码"
               autocomplete="off" class="layui-input login_input">
    </div>
</div>

// 验证两次密码是否一致
layui.use(['form','layedit'],function () {

    var form = layui.form;

    form.verify({

        confirmPass:function (value) {

            if ($('input[name=password]').val() !==value){

                return '两次密码输入不一致'
            }

        }

    });
    
});

CSRF

HTML

{% csrf_token %}
<button type="button" class="layui-btn layui-btn-sm" id="data_content_upload_file">
    <i class="layui-icon">&#xe67c;</i>导入数据
</button>

JS

layui.use('upload', function () {


    var
        upload = layui.upload,
        layer = layui.layer,
        $ = layui.$;

    var token_value = $('[name="csrfmiddlewaretoken"]').val();

    upload.render({ //允许上传的文件后缀
        elem: '#data_content_upload_file'
        , url: `/upload_file/upload/?project_pk=${project_pk}` //改成您自己的上传接口
        , accept: 'file' //普通文件
        , size: 1024 * 5 //限制文件大小，单位 KB
        , exts: 'xlsx' //只允许上传压缩文件
        {#,exts: 'zip|rar|7z' //只允许上传压缩文件#}
        , data: {'csrfmiddlewaretoken': token_value}
        , done: function (res) {
            layer.msg('上传成功');
            console.log(res)
        }
    });
});

自定义弹出框的位置

case'DeleteKws':
    var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
    var data = checkStatus.data;  //获取选中行数据
    data = data[0];  // 由于data是一个list,因此要切片
    var jsonData = JSON.stringify(data);// 转成JSON格式
    var result = $.parseJSON(jsonData);// 转成JSON对象
    var name = result['name'];
    //询问框
    layer.confirm(`删除数据：${name}
                        `, {
        offset: ['10%',],  // 距离上边框10%，不再居中显示
        shade: 0.8,         // 背景变暗系数为0.8
        btn: ['确定', '取消'] //按钮
    }, function () {

        window.location.href = `/literature/delete_keyword/?name=${name}`;
    });
    break;

    layer.open({

        type: 1,
        title: '新建关键词',
        closeBtn: 0,
        shadeClose: true, //开启遮罩关闭
        // area: ['50%', '80%'],
        offset: ['10%',],
        shade: 0.8,
        id: id,
        // btn:['确定','取消'],
        content: tpl,

    });

手风琴

HTML

<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">杜甫</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">李清照</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">鲁迅</h2>
        <div class="layui-colla-content layui-show">内容区域</div>
    </div>
</div>

JS

合并

// 只需要添加'element'就好，不需要在函数内部写任何代码，就可以实现基本的手风琴效果
layui.use(['table', 'layer','element'], function () {……});

单独

layui.use('element', function(){
  var element = layui.element;
  
  //…
});

手动关闭comfirm,并重新加载table

JS

layer.confirm('确定要删除这张图片么?', function (index) {

    layer.close(index);
    table.reload()

})

标题 单元格点击事件监听

HTML

<table class="layui-hide" id="data_contents" lay-filter="data_contents">
</table>

JS

layui.use(['table', 'layer', 'laydate'], function () {

    var table = layui.table,
        laydate = layui.laydate,
        layer = layui.layer;

    // 所有研究项目的数据
    table.render({
        elem: '#data_contents'
        , url: api //数据接口
        , page: true //开启分页
        , toolbar: '#toolbarDemo' // 工具栏
        , cols: [[ //表头

            {field: 'username', title: '用户名', sort: true, width: 120}

          , {field: 'explainations_length', title: '解析', sort: true,event: 'showExplaination',style:'cursor: pointer;'}


        ]]
    });

    //监听单元格事件

    table.on('tool(data_contents)', function (obj) {
        var data = obj.data;
        var uid = data.uid;
        var username = data.username;
        var performance = data.performance;
        if (obj.event === 'showExplaination') {
            var url = `/question_bank/check_questions/?mode=explaination&pk=${uid}`;
            window.open(url, '_blank')
        }
    });