zoukankan      html  css  js  c++  java
  • 自己写了一个解析json为table的工具类

    还需要完善的包括,css的封装,触发事件,数据的获得处理:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
    
            </style>
            <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
            <script>
                var getColumns = [{
                    title: '商品代码',
                    field: 'PARTCODE',
                    hide: true
                }, {
                    title: '品名',
                    field: 'PARTNAME',
                    hide: true
                }, {
                    title: '名牌',
                    field: 'BRAND',
                    hide: true
                }, {
                    title: '出库设备',
                    field: 'EQUIPNAME'
                }, {
                    title: '规格',
                    field: 'FORMAT'
                }, {
                    title: '工厂',
                    field: 'FACTORY',
                    hide: true
                }];
    
                //json字符串数组
                var dataArr = [{
                        "FACTORY": "BTSL1",
                        "PARTCODE": "p1",
                        "PARTNAME": "f1",
                        "FORMAT": "b1",
                        "BRAND": "pa",
                        "PLACE": "fangzhi",
                        "OUTNUMBERS": "12",
                        "OUTTIME": "20171212",
                        "WARENAME": "c1",
                        "EQUIPNAME": "as",
                        "CLASSNAME": "1",
                        "OUTUSE": "定期更换"
                    },
                    {
                        "FACTORY": "BTSL2",
                        "PARTCODE": "p1",
                        "PARTNAME": "f12",
                        "FORMAT": "",
                        "BRAND": "名称",
                        "PLACE": "防止",
                        "OUTNUMBERS": "12",
                        "OUTTIME": "20161216",
                        "WARENAME": "c1",
                        "EQUIPNAME": "as",
                        "CLASSNAME": "1",
                        "OUTUSE": "损坏更换"
                    },
                    {
                        "FACTORY": "BTSL12",
                        "PARTCODE": "p2",
                        "PARTNAME": "f12",
                        "FORMAT": "b12",
                        "BRAND": "",
                        "PLACE": "102",
                        "OUTNUMBERS": "12",
                        "OUTTIME": "20151216",
                        "WARENAME": "c1",
                        "EQUIPNAME": "as",
                        "CLASSNAME": "1",
                        "OUTUSE": "出库玩一玩"
                    }
                ];
                //根据key值获取对应的value
                function getValue(jsonObj, key) {
                    return jsonObj[key];
                }
    
                function getData() {
                    //定义标题数组
                    var tilteArr = new Array();
                    //定义数据数组
                    var fieldArr = new Array();
                    //是否隐藏数组
                    var hideArr = new Array();
                    //遍历给定的数组抽出标题和字段
                    for(var j = 0; j < getColumns.length; j++) {
                        tilteArr[j] = getColumns[j].title;
                        fieldArr[j] = getColumns[j].field;
                        hideArr[j] = getColumns[j].hide;
                    }
    
                    //动态设置table的位位置
                    //先获得参照物的位子
                    var X = $('#id').offset().top;
                    var Y = $('#id').offset().left;
                    $("#tab").css({
                        position: "absolute",
                        'top': X + 20,
                        'left': Y,
                        'z-index': 2,
                        'display': 'block'
                    });
    
                    //将json字符串数组解析为
                    //<tr><td></td></tr>的格式
                    var html = "";
                    //初始化标题行
                    html += "<tr>";
                    for(var j = 0; j < tilteArr.length; j++) {
                        if(hideArr[j]) {
                            html += "<td style='display:none;'>" + tilteArr[j] + "</td>";
                        } else {
                            html += "<td>" + tilteArr[j] + "</td>";
                        }
    
                    }
                    html += "</tr>";
                    //初始化数据行
                    for(var i = 0; i < dataArr.length; i++) {
    
                        html += "<tr>";
                        //遍历列
                        for(var j = 0; j < fieldArr.length; j++) {
                            if(hideArr[j]) {
                                html += "<td style='display:none;'>" + getValue(dataArr[i], fieldArr[j]) + "</td>";
                            } else {
                                html += "<td>" + getValue(dataArr[i], fieldArr[j]) + "</td>";
                            }
    
                        }
                        html += "</tr>";
                    }
                    //先找到文本的元素
                    //删除table的所有行
                    $("#tab  tr").remove();
                    //将htmlStr添加到标题行后面
                    $("#tab").append(html);
                    //为table添加样式
                    //给class为stripe的表格的偶数行添加class值为odd
                    //$("#tab tr:even").addClass("myred");
                    //给class为stripe的表格的奇数行添加class值为alt
                    //$("#tab tr:odd").addClass("mygreen"); text-align:center
    
                    $("#tab tr:even").css("backgroundColor", "lightskyblue");
                    $("#tab tr:odd").css("backgroundColor", "gainsboro");
                    $("#tab tr td").css("text-align", "center");
                    $("#tab tr td").css("margin;", "9");
                    $("table tr:eq(0) td").each(function() {
                        $(this).css("font-weight", "bold");
                    });
                    //动态为table的td添加双击事件
                    $("#tab  tr td").dblclick(function() {
                        //$("#id").val($(this).html());
    
                        //$("#table1 tr:eq(1) td:nth-child(1)").html();
                        //$("#id").val($("this:nth-child(1)").html());
    
                        var wid = $(this).parents("tr").children(0).html();
                        //alert(wid);
                        $("#id").val(wid);
                        $("#tab").hide();
                    });
    
                }
            </script>
        </head>
    
        <body>
    
            <input id="id" class="a" type="text" onkeyup="getData()" />
            <table id="tab" style="position: absolute;display: none;" cellspacing="0"></table>
            <p>zheshi yige </p>
            <br />
            <br />
            <br />
            <br />
            <br />
            <input type="button" /> www.baidu.com
        </body>
    
    </html>
  • 相关阅读:
    线程安全
    线程控制(阻塞、睡眠、让步)
    防止代码被扒
    一个demo学会js
    移动端Web页面问题解决方案
    利用ajax实现和后台交互的模糊搜索
    纯前端实现模糊搜索
    用Jquery控制文本框只能输入数字和字母
    博主收藏的前端框架,极力推荐!
    将阿拉伯数字转换为大写
  • 原文地址:https://www.cnblogs.com/wanjn/p/8078471.html
Copyright © 2011-2022 走看看