由于采用主流的风格 因此 采用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);
}