layui表格的简单使用,layui table 数据展示，数据修改，数据更新。layui table的简单使用

电脑版发表于：2018/12/16 15:20

**前端代码如下：**
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="~/lib/layui/layui.js"></script>
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>土地数据管理(可以直接编辑修改数据)</legend>
    </fieldset>

    <table class="layui-hide" id="test" lay-filter="test"></table>

</body>
</html>

<script>
    layui.use('table', function () {
        var table = layui.table;
        var util = layui.util;

        table.render({
            elem: '#test'
            , url: '/home/GetList'
            , cellMinWidth: 130 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
                , { field: 'landName', title: '宗地位置', edit: 'text', fixed: 'left' }
                , { field: 'areaposition', title: '地块位置', edit: 'text', fixed: 'left' }
                , { field: 'kgnumber', title: '控规编号', sort: true, edit: 'text' }
                , { field: 'provideType', title: '供应方式', edit: 'text' } //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , { field: 'landarea', title: '土地面积', sort: true, edit: 'text' }
                , { field: 'floorarearatio', title: '平均容积率', sort: true, edit: 'text' }
                , { field: 'gfa', title: '规划计容建筑面积', edit: 'text' }
                , { field: 'landareaunit', title: '土地面积单位', edit: 'text' }
                , { field: 'gfaunit', title: '规划计容建筑面积单位', edit: 'text' }
                , { field: 'type', title: '用地性质', edit: 'text' }
                , { field: 'ispublish', title: '是否发布', edit: 'bool' }
                , { field: 'planyear', title: '年份', edit: 'text' }
                , { field: 'panoramicurl', title: '720地址', width: 150, edit: 'text' }
                , { field: 'tweetsurl', title: '推文地址', width: 150, edit: 'text' }
                , { field: 'regu_imagurl', title: 'regu_imagurl', width: 130, edit: 'text' }
                , { field: 'regu_zooms_data', title: 'regu_zooms_data', width: 130, edit: 'text' }
                , { field: 'contactsurl', title: 'contactsurl', width: 130, edit: 'text' }
                , { field: 'regu_bounds', title: 'regu_bounds', width: 130, edit: 'text' }
                , { field: 'status', title: '状态', edit: 'text' }
                , { field: 'lnglat_data', title: '经纬度', edit: 'text' }
            ]]
        });
        
        //监听单元格编辑
        table.on('edit(test)', function (obj) {

            console.log(obj);

            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            //layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改值为：' + util.escape(value));
            //console.log(value);

            layer.confirm("数据已经发生改变是否确认修改？", {
                btn: ["确定", "取消"] //按钮
            }, function (index) {
                $.post('/home/update', obj.data, function (result) {
                    if (result > 0) {
                        layer.msg("修改成功!");
                        //table.reload('test')
                    }
                })
                layer.close(index);
            }, function () {
                table.reload('test')
            });
        });

    });
</script>

```

tn4>注意定义列的时候逗号不要打多了，不要前面打了一次后面还打一次。不然会造成layui表头与内容对不齐，layui表头设置宽度无效等问题。

后台返回的数据格式
```
{"code":0,"msg":"","count":1000,"data":[]}
```

**要修改数据后端直接接收处理就行非常简单,简单处理一下demo：**
```
public JsonResult Update(LandInfoDto landInfoDto) 
{
    int result = _landInfoAppService.Update(landInfoDto);
    return Json(result);
}
```
**具体对数据库的更改也非常简单，直接使用ef的仓储更新即可，这里使用的abp的，非常简单，demo:**
```
public int Update(LandInfoDto landInfoDto)
{
    LandInfo landInfo = ObjectMapper.Map<LandInfoDto, LandInfo>(landInfoDto);

    LandInfo result = _landInfoRepository.UpdateAsync(landInfo, true).Result;
    if (result != null)
        return 1;
    else
        return 0;
}
```

剑轩

layui表格的简单使用,layui table 数据展示，数据修改，数据更新。layui table的简单使用

{{item.title}}