Layui表格按JSON格式导入导出

本文介绍了一个基于layui的前端页面实现图层字段的导入与导出功能,通过JSON文件交互,利用前后端分离的方式实现了数据的批量操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端代码
  1. html

    <div id="importFieldCatalog" class="layui-btn layui-btn-sm layui-btn-primary">
        导 入
    </div>
    <div id="exportFieldCatalog" class="layui-btn layui-btn-sm layui-btn-primary">
        导 出
    </div>
    
  2. js

    var table, form, layer;
    var layerFieldCatalogQuery = {}; // 图层字段目录列表过滤条件
    var selectedIdList = []; // 所有选中的图层字段目录id列表
    ...
    
    layui.use(['table', 'form', 'layer', 'upload'], function () {
        table = layui.table,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload
        ...
        monitor();
        ...
    });
    
    /**
     * 监听事件
     */
    function monitor() {
        ...
        upload.render({
            elem: '#importFieldCatalog',
            url: resBaseUrl + '/dict/importLayerField',
            accept: 'file',
            auto: true,
            acceptMime: 'application/json',
            exts: 'json',
            before: function () {
                this.data = {
                    parentId: layerFieldCatalogQuery.parentId,
                }
            },
            done: function (res) {
                if (res.success) {
                    layer.msg("导入成功", {icon: 1, time: 1500});
                    initLayerFieldCatalogTable();
                } else {
                    layer.msg(res.message, {icon: 2, time: 1500});
                }
            }
        });
    
        $("#exportFieldCatalog").click(function () {
            selectedIdList = [];
            var selectedList = table.checkStatus('layerFieldCatalogID').data;
            if (selectedList.length > 0) {
                selectedIdList = selectedList.map((item) => {
                    return item.id;
                })
            }
            postDataToServer('/dict/exportLayerField?parentId=' + layerFieldCatalogQuery.parentId, JSON.stringify(selectedIdList), function (res) {
                if (res.success) {
                    var filename = "图层字段导出文件.json";
                    var text = JSON.stringify(res.data);
                    downloadJson(filename, text);
                } else {
                    layer.msg("导出数据失败", {icon: 2, time: 1500});
                }
            })
        })
        ...
    }
    
    /**
     * 下载为json文件
     * @param filename
     * @param text
     */
    function downloadJson(filename, text) {
        var pom = document.createElement('a');
        pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        pom.setAttribute('download', filename);
        if (document.createEvent) {
            var event = document.createEvent('MouseEvents');
            event.initEvent('click', true, true);
            pom.dispatchEvent(event);
        } else {
            pom.click();
        }
    }
    
后端代码
  1. controller

    @Autowired
    ConfigDictService configDictService;
    
    /**
     * 向数据字典中导入图层字段
     *
     * @param file
     * @param request
     * @return
     * @throws IOException
     */
    @RequestMapping("/importLayerField")
    ResponseData importLayerField(@RequestPart(name = "file") MultipartFile file, HttpServletRequest request) throws IOException {
        String parentId = request.getParameter("parentId");
        StringBuilder layerFieldInfoStr = null;
        try {
            if (file != null) {
                InputStream stream = file.getInputStream();
                InputStreamReader streamReader = new InputStreamReader(stream, StandardCharsets.UTF_8);
                BufferedReader reader = new BufferedReader(streamReader);
                String line;
                layerFieldInfoStr = new StringBuilder();
                while ((line = reader.readLine()) != null) {
                    layerFieldInfoStr.append(line);
                }
                reader.close();
                stream.close();
                boolean flag = configDictService.savelayerFieldInfo(layerFieldInfoStr.toString(), parentId);
                if (!flag) {
                    return fail("导入失败");
                }
            } else {
                return fail("上传的数据为空");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return successWithData(true);
    }
    
    /**
     * 将选中的图层字段导出,若未选中,则导出所有的图层字段
     *
     * @param selectedIdList
     * @param parentId
     * @return
     */
    @PostMapping("/exportLayerField")
    public ResponseData exportLayerField(@RequestBody List<String> selectedIdList,
                                         @RequestParam(name = "parentId") String parentId) {
        // 根据selectedIdList查询图层字段目录
        List<ConfigDict> layerFieldCatalogList = configDictService.selectByIdList(selectedIdList, parentId);
        JSONObject exportJson = new JSONObject();
        List<JSONObject> layerFieldCatalogJSONList = new ArrayList<>();
        // 遍历层字段目录,查询每个目录下的图层字段,构造JSON
        for (ConfigDict layerFieldCatalog : layerFieldCatalogList) {
            JSONObject layerFieldCatalogJSON = (JSONObject) JSONObject.toJSON(layerFieldCatalog);
            layerFieldCatalogJSON.remove("updateAt");
            layerFieldCatalogJSON.remove("createAt");
            layerFieldCatalogJSON.remove("operator");
            layerFieldCatalogJSON.remove("id");
            layerFieldCatalogJSON.remove("parentId");
            List<ConfigDict> layerFieldItemList = configDictService.findItemByParentId(layerFieldCatalog.getId());
            List<JSONObject> layerFieldItemJSONList = new ArrayList<>();
            for (ConfigDict layerFieldItem : layerFieldItemList) {
                JSONObject layerFieldItemJSON = (JSONObject) JSONObject.toJSON(layerFieldItem);
                layerFieldItemJSON.remove("updateAt");
                layerFieldItemJSON.remove("createAt");
                layerFieldItemJSON.remove("operator");
                layerFieldItemJSON.remove("id");
                layerFieldItemJSON.remove("parentId");
                layerFieldItemJSONList.add(layerFieldItemJSON);
            }
            layerFieldCatalogJSON.put("layerFieldList", layerFieldItemJSONList);
            layerFieldCatalogJSONList.add(layerFieldCatalogJSON);
        }
        exportJson.put("gt_layer_Field", layerFieldCatalogJSONList);
        return successWithData(exportJson);
    }
    
  2. service接口

    /**
     * 向数据字典中保存图层字段信息
     *
     * @param layerFieldInfoStr
     * @param parentId
     * @return
     */
    boolean savelayerFieldInfo(String layerFieldInfoStr, String parentId);
    
    /**
     * 根据selectedIdList查询图层字段目录,若selectedIdList为空,则查询所有的图层字段目录
     *
     * @param selectedIdList
     * @param parentId
     * @return
     */
    List<ConfigDict> selectByIdList(List<String> selectedIdList, String parentId);
    
    /**
     * 根据parentId获取所有item字典项
     *
     * @param parentId
     * @return
     */
    List<ConfigDict> findItemByParentId(String parentId);
    
  3. service接口实现类

    @Autowired
    ConfigDictService configDictService;
    
    /**
     * 向数据字典中保存图层字段信息
     *
     * @param layerFieldInfoStr
     * @param parentId
     * @return
     */
    @Override
    public boolean savelayerFieldInfo(String layerFieldInfoStr, String parentId) {
        try {
            // 查询出当前所有的图层字段目录编码,若导入信息的编码已经存在,则不进行导入
            QueryWrapper<ConfigDict> queryWrapper = new QueryWrapper<>();
            if (StringUtils.isNotBlank(parentId)) {
                queryWrapper.eq(ConfigDict.PARENT_ID, parentId);
            }
            queryWrapper.eq(ConfigDict.TYPE, CATALOG);
            List<ConfigDict> curLayerFieldList = baseMapper.selectList(queryWrapper);
            List<String> curLayerFieldCodeList = curLayerFieldList.stream().map(ConfigDict::getCode).collect(Collectors.toList());
            // 遍历导入的JSON,将需要插入的信息保存到数据库
            List<ConfigDict> insertLayerFieldItemList = new LinkedList<>();
            Map<String, List<Map>> layerFieldJSON = JSON.parseObject(layerFieldInfoStr, Map.class);
            List<Map> layerFieldCatalogMapList = layerFieldJSON.get("gt_layer_Field");
            if (ObjectUtil.isNotEmpty(layerFieldCatalogMapList)) {
                for (Map layerFieldCatalogMap : layerFieldCatalogMapList) {
                    List<ConfigDict> layerFieldItemList = JSON.parseArray(JSON.toJSONString(layerFieldCatalogMap.get("layerFieldList")), ConfigDict.class);
                    layerFieldCatalogMap.keySet().removeIf(key -> key == "layerFieldList");
                    ConfigDict layerFieldCatalog = JSON.parseObject(JSON.toJSONString(layerFieldCatalogMap), ConfigDict.class);
                    if (!curLayerFieldCodeList.contains(layerFieldCatalog.getCode())) {
                        layerFieldCatalog.setParentId(parentId);
                        layerFieldCatalog.setType(CATALOG);
                        ConfigDict insertLayerFieldCatalog = configDictService.saveAndUpdate(layerFieldCatalog);
                        if (ObjectUtil.isNotEmpty(layerFieldItemList)) {
                            for (ConfigDict layerFieldItem : layerFieldItemList) {
                                layerFieldItem.setParentId(insertLayerFieldCatalog.getId());
                                layerFieldItem.setType(ITEM);
                                insertLayerFieldItemList.add(layerFieldItem);
                            }
                        }
                    }
                }
            }
            configDictService.saveBatch(insertLayerFieldItemList);
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }
    
    /**
     * 根据selectedIdList查询图层字段目录,若selectedIdList为空,则查询所有的图层字段目录
     *
     * @param selectedIdList
     * @param parentId
     * @return
     */
    @Override
    public List<ConfigDict> selectByIdList(List<String> selectedIdList, String parentId) {
        List<ConfigDict> selectedList = new LinkedList<>();
        QueryWrapper<ConfigDict> queryWrapper = new QueryWrapper<>();
        if (selectedIdList.size() == 0) {
            if (StringUtils.isNotBlank(parentId)) {
                queryWrapper.eq(ConfigDict.PARENT_ID, parentId);
            }
            queryWrapper.eq(ConfigDict.TYPE, CATALOG);
            selectedList = baseMapper.selectList(queryWrapper);
        } else {
            selectedList = baseMapper.selectBatchIds(selectedIdList);
        }
        return selectedList;
    }
    
    /**
     * 根据parentId获取所有item字典项
     *
     * @param parentId
     * @return
     */
    @Override
    public List<ConfigDict> findItemByParentId(String parentId) {
        QueryWrapper<ConfigDict> queryWrapper = new QueryWrapper<>();
        if (StringUtils.isNotBlank(parentId)) {
            queryWrapper.eq(ConfigDict.PARENT_ID, parentId);
        }
        queryWrapper.eq(ConfigDict.TYPE, ITEM);
        return baseMapper.selectList(queryWrapper);
    }
    
layui表格通常通过前端JavaScript库layui来实现动态数据加载,包括分页功能。你可以按照以下步骤配置分页和使用JSON格式数据: 1. 首先,在HTML中创建一个layui表格元素: ```html <table id="Demo" lay-filter="table"> </table> ``` 2. 引入layui和相关的js文件,例如分页插件`laypage.js`: ```html <script src="layui/layui.all.min.js"></script> <script src="laypage/layui-laypage.min.js"></script> ``` 3. 使用JavaScript获取数据,假设你有一个JSON数组存储所有数据,并且有对应的分页函数: ```javascript var dataList = []; // 这里存放你的JSON格式数据 function getData(page) { var offset = (page - 1) * pageSize; // pageSize是你设定的每页显示条数 return JSON.parse(dataList.slice(offset, offset + pageSize)); } // 分页配置 var pageSize = 10; // 每页显示的记录数 ``` 4. 初始化表格并绑定分页事件: ```javascript layui.use(['table', 'laypage'], function() { var table = layui.table; var laypage = layui.laypage; table.render({ elem: '#Demo', url: 'getData', // 这是你的服务器端API地址,实际场景下需要替换 method: 'post', // 或者get data: { pageNum: 1 }, // 初始请求第一页数据 cols: [ // 表格列配置... ], page: true, // 显示分页 limit: pageSize, done: function(res, setting) { getData(res.pageNum).forEach(function(item) { table.add(index, item); // 将数据添加到表格中 }); laypage.render(); // 更新分页控件 } }); laypage({ cont: '#DemoPage', // 容器ID total: Math.ceil(dataList.length / pageSize), // 总页数 jump: function(param) { // 点击分页按钮的回调 getData(param.page).forEach(function(item) { table.add(index, item); }); } }); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值