CMDB (后台管理) CURD 插件

查

a. 基本实现
CMDB (后台管理) CURD 插件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
    <div style="width: 700px;margin: 0 auto">
        <table class="table table-bordered table-striped">
            <thead id="tbHead">
                <tr>

                </tr>
            </thead>
            <tbody id="tbBody">

            </tbody>
        </table>
    </div>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            initial();
        });

        function initial(){
            $.ajax({
                url: '/backend/curd_json.html',
                type: 'GET',
                dataType:'JSON',
                success:function(arg){
                    
                    initTableHeader(arg.table_config);
                    initTableBody(arg.server_list,arg.table_config);
                }
            })
        }

        function initTableHeader(tableConfig){
            
            $.each(tableConfig,function(k,v){
                    // table_config = [
                    //    {'q':'id','title':'ID'},
                    //    {'q':'hostname','title':'主机名'}
                    // ]

                var tag = document.createElement('th');
                tag.innerHTML = v.title;
                $('#tbHead').find('tr').append(tag);
            })
        }

        function initTableBody(serverList,tableConfig){
                //  serverList = [
                //    {'hostname': 'c2.com', 'asset__cabinet_num': 'B12', 'id': 1,  },
                //    {'hostname': 'c2.com', 'asset__cabinet_num': 'B12', 'id': 1,  }
                //  ]
            $.each(serverList,function(k,row){
                var tr = document.createElement('tr');
                $.each(tableConfig,function(kk,rrow){
                    
                    var td = document.createElement('td');
                    td.innerHTML = row[rrow.q];
                    $(tr).append(td);
                });
                $('#tbBody').append(tr);

            })
        }
    </script>
</body>
</html>
curd.html