数据表格展示，读取xml文件 | 代码示例

最新推荐文章于 2023-07-12 10:52:40 发布

Aimyone

最新推荐文章于 2023-07-12 10:52:40 发布

阅读量493

点赞数

分类专栏： layui xml

本文链接：https://blog.csdn.net/qq_36636312/article/details/113503301

版权

layui 同时被 2 个专栏收录

46 篇文章 5 订阅

订阅专栏

xml

3 篇文章 0 订阅

订阅专栏

1，效果图

第一页面 list：
在这里插入图片描述
第二页面 demo：

2，xml数据


<validatedata>
    <validateitem name="邮政编码格式" errorinfo="邮政编码格式不正确.">
        <![CDATA[
            function fo(){
                var value='#{字段名}';
                var valueTrim=value.replace("/^(\s|\u00A0)+|(\s|\u00A0)+$/g", "" );
                return /^[1-9]\d{5}$/i.test(valueTrim);
            }
        ]]>
    </validateitem>
    <validateitem name="IP地址格式" errorinfo="IP地址格式不正确.">
        <![CDATA[
            function fo(){
                var value='#{字段名}';
                var valueTrim=value.replace("/^(\s|\u00A0)+|(\s|\u00A0)+$/g", "" );
                return /d+.d+.d+.d+/i.test(valueTrim);
            }
        ]]>
    </validateitem>
</validatedata>

3，第一页面 List.js 代码


<div class="colorred marginleft10"  id="jsmsg" style="display: none">* 代码的结果只能为true或false
    <a href="javascript:;" style="color: #1e9fff;" onclick="showJsDemo()" title="">
       <span style="font-size: 14px;">【代码示例】</span>
    </a>
</div>

 function showJsDemo(){
     layeropen(width,height,"校验demo","/../demo")
 }

4，Java页面传输


 @RequestMapping({"/demo"})
    public String toDemo() {
        return "../Demo";
    }

5，第二页面 Demo.js 代码


<link href="${ctx}/static/js/plugins/codemirror-5.14.2/theme/eclipse.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/static/js/plugins/codemirror-5.14.2/lib/codemirror.css" rel="stylesheet" />
<link href="${ctx}/static/js/plugins/codemirror-5.14.2/addon/display/fullscreen.css" rel="stylesheet" />
<script src="${ctx}/static/js/plugins/codemirror-5.14.2/lib/codemirror.js" type="text/javascript"></script>
<script src="${ctx}/static/js/plugins/codemirror-5.14.2/mode/sql/sql.js" type="text/javascript"></script>
    
<body>
<div class="flex flex-jusity-betreen wrap">
    <div>
        <div class="backgroundf">
            <table id="mygrid" lay-filter="mygrid"></table>
        </div>

    </div>
    <div class="rightform layui-form" lay-filter="form">
        <div class="layui-form-item height26">
            <label class="layui-form-label">校验名称</label>
            <div class="layui-input-inline marginleft10" style="width:250px">
                <input type="name" name="name" id="name"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item height26">
            <label class="layui-form-label">消息提示</label>
            <div class="layui-input-inline marginleft10" style="width:250px">
                <input type="errorinfo" name="errorinfo" id="errorinfo"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="padding100 flex">
            <div class="">代码</div>
            <div class="colorred marginleft10" id="ckmsg"></div>
        </div>
        <div class="layui-input-block" style="margin-left: 0;font-size: 13px;">
            <textarea name="content" id="content" placeholder="" class="layui-textarea textheight"></textarea>
        </div>

    </div>
</div>
</body>
<script type="text/html" id="toolbardiv">
    <div class="layui-btn-container">
        <button lay-event="selbtn"  class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">选择</button>
    </div>
</script>

<script>


    var height = dlCommon.getWinHeight();
    var width=dlCommon.getWinWidth();
    var editor;
    $(function(){
        initGrid();
        initEvent();

    });

// codemirror控件初始化
    function initEvent(){
        editor = CodeMirror.fromTextArea(document.getElementById("content"), {
            lineNumbers: true,
            matchBrackets: true,
            lineWrapping:true,
            mode: "text/x-mssql",
            extraKeys: {

                "Esc": function(cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                }
            }
            // mode: "text/x-sql"
        });
        editor.setOption("theme", "eclipse");
        editor.setSize('auto', height-190);



    }

// 表格加载
    function initGrid(){
        layui.table.render({
            elem: '#mygrid',
            height: height-20,
            size: 'sm', //小尺寸的表格
            url: '/../getDemo', //数据访问地址
            loading:true,
            where:{search:""},
            page: false, //开启分页
            cols: [
                [ //表头
                    //{field: 'id', title: '分类', width:80, fixed: 'left'}
                    {field: 'name', title: '校验名称',},
                    { field: 'opear', title: '操作',width:"20%", toolbar: '#toolbardiv' }
                ]
            ],
            done:function(){
                dlCommon.layerSelectTable("mygrid");
            }
        });
        // 单击依旧同选择事件
        dlCommon.layerTableOn("mygrid",function(obj){
            selectTable(obj.data);
        })

        // 选择监听事件
        layui.table.on('tool(mygrid)', function(obj){
            switch(obj.event){
                case 'selbtn':
                    selectTable(obj.data);
                    break;
            };
        });
    }

// 选择事件填充
	 function selectTable(currentRow){
        editor.setValue(currentRow.content);
        $("#name").val(currentRow.name);
        $("#errorinfo").val(currentRow.errorinfo);
    }
    
</script>
</html>

6，第二页面Java，读取xml文件数据，加载数据

注意： ApplicationHome.getApplicationConfig()+"/validatedata.xml" 为文件所在地址
在这里插入图片描述

还要引入4个jar包


import com.dldata.base.utils.Result;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
 
    @RequestMapping("/getDemo")
    @ResponseBody
    public Result getCheckDemo(String search, @RequestParam Map<String, String> paramMap) throws IOException {
        search = search == null ? "" : search;
        LinkedList dataList = new LinkedList();
        SAXReader reader = new SAXReader();

        try {
            Document document = reader.read(ApplicationHome.getApplicationConfig()+"/validatedata.xml");
            List<Element> elements = document.getRootElement().elements("validateitem");


            for(int i = 0; i < elements.size(); ++i) {
                Element element = (Element)elements.get(i);
                HashMap dataMap = new HashMap();
                dataMap.put("name", element.attributeValue("name", ""));
                dataMap.put("errorinfo", element.attributeValue("errorinfo", ""));
                dataMap.put("content", element.getText().replaceAll("\\\\t", "").replaceAll("            ", ""));
                dataList.add(dataMap);
            }

            return Result.ok(dataList);
        } catch (Exception e) {
            log.error("系统错误！" + e.getMessage(), e);
            return Result.error("系统错误，请稍候再试！");
        }
    }