通过js动态生成表格并初始化,最近正好做了一个点击按钮弹出日志表格的功能,献上一个例子给大家。
首先是动态生成表头
function createDivHtml(){
if($('#logTable').length == 0){
var aHtml="<table cellSpacing=1 cellPadding=1 width='100%' class='basictable' id='logTable'>";
aHtml += "<tr><th nowrap='nowrap' width='15%' align='center'>操作员工</th>";
aHtml += "<th nowrap='nowrap' width='25%' align='center'>操作时间</th>";
aHtml += "<th nowrap='nowrap' width='15%' align='center'>操作</th>";
aHtml += "<th width='45%' align='center'><div id='logComm'>备注</div></th></tr></table>";
$("#divLogListShow").append(aHtml);
}
}
然后是表格每一行的模板
function logTrHtml(){
return '<tr>'
+'<td align="center" id="item_<n>-employee-empName"></td>'
+'<td align="center" id="item_<n>-slChangeTime"></td>'
+'<td align="center" id="item_<n>-slAction"></td>'
+'<td align="center" id="item_<n>-slComments"></td>'
+'</tr>';
}
接下来去后台获取数据,返回的是一个syslog系统日志对象的list,表格的模板里面要显示的就是syslog的对象的某些属性。姓名,修改时间,执行的动作,备注。
拿到list后接下来是回调函数
function(syslogList){
var tableId="logTable"; //表格id
if(model.simple.getObjectType(syslogList)=="Array" && syslogList.length>0){
model.simple.initTableByList(tableId,"item",syslogList,logTrHtml());
var trNum = $("#logTable").find("tr:gt(0)").length;
for(var a=0;a<trNum;a++){
var mes = $('#item_'+a+'-slComments').html().replace(/\n/g,'<br>');
$('#item_'+a+'-slComments').html(mes);
}
}else{
var table=$("#"+tableId);
table.find("tr:gt(0)").remove(); //移除标题以外的行
<span style="white-space:pre"> </span>table.append('<tr><td align="center" colspan="4">没有此条记录相关信息</td></tr>');
}
$('#divLogListShow').show();
}
通过list初始化表格最核心的代码就是
initTableByList
/**
* 根据输入数组list来初始化某个table
* @param tableId: table id
* @param listNamePrefix 子元素id前缀
* @param list 导入的数据对象
* param trHtml 每个tr的模板内容
*/
model.simple.initTableByList = function (tableId,listNamePrefix,list,trHtml){
if(!list.length){
return;
}
var regS = new RegExp(model.simple.indexReg,"gi");
var table=$("#"+tableId);
//移除标题以外的行
table.find("tr:gt(0)").remove();
//设定初始html
var tableHtml="";
for(var i=0;i<list.length;i++){
tableHtml+=trHtml.replace(regS,i);
}
table.append(tableHtml);
//设定初始值
model.simple.initByList(tableId,listNamePrefix,list);
}
/**
* 根据输入数组list来初始化某个globalId下属的子元素值(listNamePrefix前缀)。
* @param globalId: html里面某个头元素id,如某个formId,或者某个tableId。
* @param listNamePrefix 子元素id前缀
* @param list 导入的数据对象
*/
model.simple.initByList = function (globalId,listNamePrefix,list){
var regS = new RegExp(model.simple.fieldSeperator,"gi");
var elementsAll=$("#"+globalId+" [id^='"+listNamePrefix+model.simple.listIndexSeperator+"']");
for(var i=0;i<elementsAll.size();i++){
var ele=elementsAll.get(i);
var fieldName=ele.id.substring(listNamePrefix.length+1);
var num=fieldName.substring(0,fieldName.indexOf(model.simple.fieldSeperator));
fieldName=fieldName.substring(num.length+1);
fieldName=fieldName.replace(regS,".");
var value=eval("list["+num+"]."+fieldName);
if(value==null){
value="";
}
if(ele.tagName=="SELECT"){
valueMap=eval("list["+num+"]."+fieldName+"Map");
if(valueMap){
DWRUtil.removeAllOptions(ele.id);
DWRUtil.addOptions(ele.id, valueMap, false);
}
}
model.simple.setElementValue(ele,value);
}
}
/**
* 设定元素的值,如果是div之类的则设定里面的html
*/
model.simple.setElementValue = function (idOrElement,value){
var ele = model.simple.getElement(idOrElement);
if(ele==null){
//alert("type of idOrElement is wrong: model.simple.getElementValue");
return;
}
if(ele.tagName == "INPUT" || ele.tagName == "TEXTAREA"){
if(ele.type == "checkbox"){
if(value && value!=null){
ele.checked=true;
}else{
ele.checked=false;
}
}else{
ele.value=value;
}
}else if(ele.tagName=="SELECT"){
if(ele.type == "select-one" && value !=null && (value || value===0)){
ele.value=value;
}
}else if(ele.tagName=="IMG"){
ele.src=value;
} else{
ele.innerHTML=value;
}
}
通过这样的js方法可以实现如图的效果,当然样式可以自己随意添加