最近由于项目需要被迫自己写一个 ajax gird 记录-1-优快云博客

本文介绍了如何使用主流的Bootstrap样式来动态构造表格，并通过Flexigird实现数据展示。包括了构建步骤、模板实例和样式应用。

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

由于采用主流的风格因此采用bootstrap样式

参考flexigird

第一步先根据数据动态构造一个表格

 var col =[
            {
                      display : '登录名',
                      name : 'baseAccount',
                      width : 120,
                      sortable : true,
                      align : 'left'
                  }, {
                      display : '用户姓名',
                      name : 'baseAccountName',
                      width : 120,
                      sortable : true,
                      align : 'left'
                  }, {
                      display : '性别',
                      name : 'baseAccountSex',
                      width : 80,
                      sortable : true,
                      align : 'left'
                  }, {
                      display : '创建时间',
                      name : 'createDate',
                      width : 80,
                      sortable : true,
                      align : 'center'
                 } 
       ];
 var data = [
            {
                      baseAccount : 'aaa1',
                      baseAccountName : 'bbb1',
                      baseAccountSex : "",
       createDate : "2013-09-09"
                  },{
                      baseAccount : 'aaa2',
                      baseAccountName : 'bbb2',
                      baseAccountSex : 10,
       createDate : "2013-09-09"
                  }
       ];
 function createTable(col, data){
        $("#myGird").addClass("container");
     $("#myGird").css("margin-top","10px");
     //定义网格元素
     var table = "";
     var thead = "";
     var tbody = "";
     table += '<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-hover">';
           //定义网格头
     thead += "<thead>";
     thead += "<tr>";
     $.each(col,function(n,v) {
        var th = "";
     th += "<th id="+v.name+">"+v.display+"</th>"
     if(v.width) $("#"+v.name).css("width",v.width);
     if(v.align) $("#"+v.name).attr("align",v.align);
     thead += th;
     });
     thead += "</tr>";
     thead += "</thead>";
     table += thead;
     //定义网格数据
     tbody += "<tbody>";
     $.each(data,function(n,v) {
           tbody += "<tr>"
           $.each(col,function(i,k) {
                    tbody += "<td>"+  ((typeof(v[""+k.name+""]) === "undefined" || v[""+k.name+""] ===null || v[""+k.name+""] === "")?"--":v[""+k.name+""])  +"</td>"
           });
     tbody += "</tr>";
     });
     tbody += "</tbody>";
     table += tbody;
     table += "</table>";
           $("#myGird").append(table);
 }