代码改变世界

3.16

2020-03-16 17:33  Robortxin  阅读(173)  评论(0)  编辑  收藏  举报

  1. layUI 表格追加显示数据

    layUI的表格一般是用table模块，该模块集成了很多方法和属性，可以方便的使用table表格来展示数据。

    table模块加载数据有两种方式，一种是异步api获取数据加载；一种是在使用时直接把数据赋值到data属性即可。前者的数据追加直接按文档返回count和数据即可，这里着重说一下后者的数据追加。

  2.  

    初始化模块

    我们采用方案2直接赋值data为数据

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

      table = layui.table;

      //第一个实例

      table.render({

        elem: '#demo',

        height: 312,

        // 方案1 异步接口api返回数据，设置接口url即可

        // url: '/demo/table/user/', //数据接口

        // 方案2 直接把数据赋值data即可

        data: data,

        page: true, //开启分页

        cols: [[ //表头

          {field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'},

          {field: 'username', title: '用户名', width:100}

        ]]

      });

     

     

     

     

     

    !DOCTYPE html>
    <html>
    <head th:include="common/header::commonHeader">
    <!-- <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" /> -->
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    </head>
    <body>
    <blockquote class="layui-elem-quote news_search">
    <div class="layui-row">
    <form class="layui-form layui-col-md12 x-so" id="complain_search">
    服务编号:
    <div class="layui-input-inline">
    <input type="text" name="serviceCode" id="serviceCode"
    placeholder="请输入服务编号" autocomplete="off" class="layui-input">
    </div>
    订单号:
    <div class="layui-input-inline">
    <input type="text" name="compOrder" id="compOrder"
    placeholder="请输入订单号" autocomplete="off" class="layui-input">
    </div>
    投诉类型:
    <div class="layui-input-inline">
    <select name="compType" id="compType">
    <option value="">---请选择---</option>
    <option value="0">医院</option>
    <option value="1">科室</option>
    <option value="2">医生</option>
    </select>
    </div>
    投诉状态:
    <div class="layui-input-inline">
    <select name="complainState" id="complainState">
    <option value="">---请选择---</option>
    <option value="0">未处理</option>
    <option value="1">已处理</option>
    </select>
    </div>
    <button id="search" class="layui-btn" lay-submit
    lay-filter="provinceSearch">
    <i class="layui-icon">&#xe615;</i>
    </button>
    </form>
    </div>
    <table class="layui-hide" id="complainTable" lay-filter="complainList"></table>
    </blockquote>

    <script type="text/html" id="complain_toolbar">
    <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon"></i>添加</button>
    </div>
    </script>

    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <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>

    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-1.4.4.min.js}"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script type="text/javascript" >
    layui.use(['table','layer','form','laypage'], function(){
    var table = layui.table,
    layer = layui.layer,
    form = layui.form,
    laypage = layui.laypage;

    table.render({
    id:"provinceReload"
    ,elem: '#complainTable'
    ,url:'/medicaladmin/complain/list'
    ,page: true
    ,method:'post'
    ,toolbar: '#complain_toolbar'
    ,limit:10
    ,response:{
    statusName:'code',
    msgName:'message',
    statusCode:200,
    dataName:'beans',
    countName:'page',
    }
    ,request:{
    pageName: 'page',
    limitName: 'size'
    }
    ,cols: [
    [
    {checkbox:true}//开启多选框
    ,{field:'id', width:150,title: '投诉ID'}
    ,{field:'serviceCode',width:150, title: '服务编号'}
    ,{field:'compType',width:150, title: '服务类型' , templet : function (d){
    if(d.compType == 0){
    return '<span style="color: #D03948;">医院</span>';
    }else if(d.compType == 1){
    return '<span style="color: #18A4D0;">科室</span>';
    }else if(d.compType == 2){
    return '<span style="color: #5CD03F;">医生</span>';
    }
    }}
    ,{field:'compOrder',width:150, title: '投诉订单号'}
    ,{field:'compReason',width:150,title: '投诉原因'}
    ,{field:'compDetail',width:150, title: '投诉详情'}
    ,{field:'complainState', width:150, title: '投诉状态', templet : function(d){
    if(d.complainState == 0){
    return '<span style="color: #D03948;">未处理</span>';
    }else if(d.complainState == 1){
    return '<span style="color: #18A4D0;">已处理</span>';
    }
    }}
    ,{field:'validFlag', width:150, title: '数据状态',templet: function (d) {
    if(d.validFlag == true){
    return '<span style="color: #18A4D0;">有效</span>';
    }else{
    return '<span style="color: #D03948;">无效</span>';
    }
    }},
    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
    ]
    ]
    ,limits: [5,10,20,50]
    });

    table.on('toolbar(complainList)', function(obj) {
    var checkStatus = table.checkStatus(obj.config.id),
    data = checkStatus.data;
    data = eval("(" + JSON.stringify(data) + ")");
    switch(obj.event) {
    case 'add':
    layer.open({
    type: 2,
    title: "添加省份页面",
    area: ['35%', '60%'],
    fix: false,
    maxmin: true,
    shadeClose: true,
    shade: 0.4,
    skin: 'layui-layer-rim',
    content:["/medicaladmin/complain/complainAdd", "no"],
    });
    break;
    }
    });


    table.on('tool(complainList)', function(obj) {
    var data = obj.data;
    json = JSON.stringify(data);
    switch(obj.event) {
    case 'detail':
    console.log("投诉详情");
    var index = layer.open({
    type: 2,
    title: "投诉详情页面",
    area: ['30%', '60%'],
    fix: false,
    maxmin: true,
    shadeClose: true,
    shade: 0.4,
    skin: 'layui-layer-rim',
    content: ["/medicaladmin/complain/complainRead", "no"],
    });
    break;
    case 'edit':
    var index = layer.open({
    type: 2,
    title: "编辑投诉页面",
    area: ['30%', '60%'],
    fix: false,
    maxmin: true,
    shadeClose: true,
    shade: 0.4,
    skin: 'layui-layer-rim',
    content: ["/medicaladmin/complain/complainEdit", "no"],
    });
    break;
    case 'del':
    var delIndex = layer.confirm('真的删除id为' + data.id + "的信息吗?", function(delIndex) {
    $.ajax({
    url: '/medicaladmin/complain/delete/'+data.id,
    type: "post",
    success: function(suc) {
    if(suc.code == 200) {
    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
    layer.close(delIndex);
    console.log(delIndex);
    layer.msg("删除成功", {
    icon: 1
    });
    } else {
    layer.msg("删除失败", {
    icon: 5
    });
    }
    }
    });
    layer.close(delIndex);
    });
    break;
    }
    });

    form.render();
    form.on('submit(provinceSearch)', function(data) {
    var formData = data.field;
    console.debug(formData);
    var serviceCode = formData.serviceCode,
    compOrder = formData.compOrder,
    compType = formData.compType,
    complainState = formData.complainState;

    table.reload('provinceReload', {
    page: {
    curr: 1
    },
    where: {
    serviceCode:serviceCode,
    compOrder:compOrder,
    compType:compType,
    complainState:complainState
    },
    method: 'post',
    contentType: "application/json;charset=utf-8",
    url: '/medicaladmin/complain/queryComplainByCondition',
    });
    return false;
    });

    });
    </script>


    </body>
    </html>
    原文链接：https://blog.csdn.net/DCFANS/article/details/91895820

     

     

    根据csdn上的一篇博客 解决了layuitable的一个查询的bug。