ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

layui制作数据表格

2022-03-02 20:03:58  阅读:187  来源: 互联网

标签:code 表格 layui request data user msg sex 制作


显示效果

在这里插入图片描述

前端代码

{% extends "base.html" %}
{% block content %}
<div class="layui-card">
    <table id="demo" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
        <input type="text" name="user" class="layui-input" style="width: 150px; float: left">
        <button class="layui-btn" style="float: left" id="searchBtn">搜索</button>
{#        <div class="layui-btn-container">#}
{#            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>#}
{#            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>#}
{#            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>#}
{#        </div>#}
        <div class="layui-input-inline">
            <select name="sex" lay-verify="required" lay-search="" lay-filter="sex">
                <option value="">直接选择或输入性别</option> <option value="男">男</option> <option value="女">女</option>
            </select>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
<button type="submit" class="layui-btn" id="registerBtn">注册用户</button>
{% endblock %}

{% block js %}
<script>
layui.use(['layer','table','form'], function(){
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;
    var form = layui.form;

    $("#registerBtn").click(function () {
        // 加载层
        layer.open({
            type: 2,
            content: "{% url 'register_user' %}",
            area: ['50%','80%'],
            title: ['注册用户', 'font-size:28px;'],
            btn: ['提交','关闭']
        })
    });

  table.render({
    elem: '#demo'  // 元素ID
    ,url: "{% url 'list_user' %}"
    ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [[
        {type: 'checkbox', fixed: 'left'}
      ,{field:'user', title:'用户名', width:120,}
      ,{field:'name', title:'名字', width:120, }
      ,{field:'sex', title:'性别', width:120,templet: function (d) {
                if (d.sex == "女") {
                    return '<span style="color: red">' + d.sex + '</span>'
                } else {
                    return '<span style="color: blue">' + d.sex + '</span>'
                }
              }}
      ,{field:'age', title:'年龄', width:120,}
      ,{field:'role', title:'角色', width:120,}
      ,{field:'label', title:'标签', width:120,}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
      ,page: true
      ,id: "user_table"     //用于表格重载
  });

  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了:'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选');
      break;

      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break;
    };
  });

  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        csrfmiddlewaretoken = $('input[name=csrfmiddlewaretoken]').val();
        var post_data = {'user':data.user, 'csrfmiddlewaretoken':csrfmiddlewaretoken}
        $.ajax({
            type: "POST",
            url: "{% url 'list_user' %}",
            data: post_data,
            success: function (result) {
                if (result.code == "0") {
                    layer.msg(result.msg, {icon: 6})
                } else {
                    layer.msg(result.msg, {icon: 5})
                }
            }
        })
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2
        ,value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      });
    }
  });

  $(document).on('click', "#searchBtn",function () {    //解决第二次搜索失效的问题
  // $("#searchBtn").click(function () {
      var search_var = $('input[name=user]').val();
      table.reload('user_table', {
          where: { //设定异步数据接口的额外参数,任意设
            searchKey: search_var
          }
          ,page: {
            curr: 1 //重新从第 1 页开始
          }
        }); //只重载数据
  })

    form.on('select(sex)', function(data){
      {#console.log(data);#}
      table.reload('user_table', {
          where: { //设定异步数据接口的额外参数,任意设
            sexKey: data.value,
          }
          ,page: {
            curr: 1 //重新从第 1 页开始
          }
        }); //只重载数据
    });
});
</script>

{% endblock %}

后端代码

# 用户管理
@self_login_required
def manage_users(request):
    return render(request,"manage_users.html")

# 注册用户
@self_login_required
def register_user(request):
    if request.method == "GET":
        return render(request, "register_user.html")
    elif request.method == "POST":
        # 从数据库获取所有用户名
        user_list = []  # 用户名列表
        for users in User.objects.all():
            user_list.append(users.user)

        # 判断数据库是否有该用户
        user = request.POST.get("user", None)
        if user in user_list:
            code = 1
            msg = f"{user}用户已存在"
            result = {"code": code, "msg": msg}
            return JsonResponse(result)
        password = request.POST.get("password", None)
        name = request.POST.get("name", None)
        sex = request.POST.get("sex", None)
        age = request.POST.get("age", None)
        role = request.POST.get("role", None)
        label = request.POST.get("label", None)
        try:
            User.objects.create(
                user=user,password=password,name=name,sex=sex,age=age,role=role,label=label
            )
            code = 0
            msg = f"{user}用户注册成功"
        except Exception as e:
            print(e)
            code = 1
            msg = "注册失败"
        result = {"code":code, "msg": msg}
        return JsonResponse(result)

# 查看用户
@self_login_required
def list_user(request):
    user_list = []  # 用户名列表
    user_dt = {}    # 单个用户信息字典
    data = []       # 存放所有用户的信息
    if request.method == "GET":
        try:
            for users in User.objects.all():
                user_list.append(users.user)
            for username in user_list:
                user_info = User.objects.get(user='%s' % username)
                user_dt["user"] = user_info.user
                user_dt["name"] = user_info.name
                user_dt["sex"] = user_info.sex
                user_dt["age"] = user_info.age
                user_dt["role"] = user_info.role
                user_dt["label"] = user_info.label
                # 根据查询关键字返回数据
                search_key = request.GET.get('searchKey',None)
                sex_key = request.GET.get('sexKey',None)
                if search_key or sex_key:
                    if search_key in user_info.user:
                        data.append(user_dt)
                    if sex_key == user_info.sex:
                        data.append(user_dt)
                else:
                    data.append(user_dt)
                user_dt = {}    # 清空
            # 分页
            count = len(data)
            page = int(request.GET.get('page',1))
            limit = int(request.GET.get('limit'))
            start = (page-1)*limit
            end = page*limit
            data = data[start:end]
            code = 0
            msg = "获取数据成功"
        except Exception as e:
            print(e)
            code = 1
            msg = "获取数据失败"
            count = 0
        result = {"code":code, "data":data, "msg":msg, "count": count}
        return JsonResponse(result)
    elif request.method == "POST":
        user = request.POST.get('user',None)
        try:
            if user:
                User.objects.filter(user=user).delete()
                code = 0
                msg = "用户刪除成功"
        except Exception as e:
            print(e)
            code = 0
            msg = "用户删除失败"
        result = {"code": code,"msg": msg}
        return JsonResponse(result)

标签:code,表格,layui,request,data,user,msg,sex,制作
来源: https://blog.csdn.net/anqixiang/article/details/123238706

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有