熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

左側是表頭的JS表格控件

2013-11-15 12:07:48  來源: JSP教程 

  今天項目中要用到該表格找了一遍發現沒有合適的於是自己動手豐衣足食  

左側是表頭的表格數據展現  支持多行多表頭  固定表頭的功能  能夠支持標題  獲取表格中的數據  支持IE/CHROME  表格能夠自適應根據內容行居中  代碼如下: <!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" " <html xmlns=" <head runat="server">  <title>Grid左側固定測試</title>  <script src=LeftHeadGridjs></script>  <link href="LeftHeadGridcss" rel="stylesheet" type="text/css" />  </head>  <body>  <form id="form" runat="server">  <div id="testdiv" align="center"></div>  </form>  </body>  <script type="text/javascript" >  var test = new LeftHeadGrid({  id: "leftHeadGrid"  width:   title:"danielinbiti"  perUnitWidth:  rowHeads:[{  width:""  rowname:[{name:"日期"}{name:"數值"}]  }]  columnDatas:[{  width:[]  rows:[[][]]  }]  });  testRenderTo("testdiv");  </script>  </html>    LeftHeadGridjs  復制代碼 代碼如下: var LeftHeadGrid = function(config) {  thisrowHeads = configrowHeads != null ? configrowHeads: [];//name  thiscolumnDatas = configcolumnDatas != null ? configcolumnDatas: [];  thiswidth = configwidth != null ? configwidth: "";  thisid = configid != null ? configid: "TreGrid";  thisperUnitWidth = configperUnitWidth != null ? configperUnitWidth: ;  thisinnerWidth = ;  thisinnerLWidth = ;  thisheight = ;  thistitle = configtitle != null ? configtitle: "";  thisnoDataStr = confignoDataStr != null ? confignoDataStr: "no data";  }  LeftHeadGridprototypecreateGrid = function(){  var totalwidth = ;  var tableHtml = "<table>";  for(var i=;i<thisrowHeadslength;i++){  var obj = thisrowHeads[i];  var width = objwidth;  totalwidth = totalwidth + parseInt(width);  var rownameobj = objrowname;    for(var j=;j<rownameobjlength;j++){  var nameobj = rownameobj[j];  if(j==rownameobjlength){  tableHtml = tableHtml + "<tr><td class=bluelast width=" + width + "px>" + nameobjname + "</td></tr>";  }else{  tableHtml = tableHtml + "<tr><td class=bluefirst width=" + width + "px>" + nameobjname + "</td></tr>";  }  thisheight = thisheight + ;  }  }  tableHtml = tableHtml + "</table>";  var headHtml = "<div class=leftheadcss style=width:" + totalwidth + "px;>";  headHtml = headHtml + tableHtml + "</div>";  thisinnerLWidth = totalwidth;  thisinnerWidth = thiswidthtotalwidth;  return headHtml;  }  LeftHeadGridprototypeRenderTo =function(divId){    //var innerWidth = thiswidth;  var headHtml = thiscreateGrid();  var html = "<div id=outframe class=outframecss style=width:" + thiswidth + "px;>"  + headHtml  + "<div id=dataframe class=dataframecss style=width:" + thisinnerWidth + "px;>"  + "<div id=leftgriddataview class=innerdivcss>"  + "</div>"  + "</div>"  + "</div>"  html = "<div id=divtitle class=grittitle style=width:" + thiswidth + "px;height:px><big>" + thistitle + "</big></div>"  + html + "</div>";  documentgetElementById(divId)innerHTML = html;  thisshow();  }  LeftHeadGridprototypeshow = function(){  if(thiscolumnDatas && thiscolumnDataslength>){  var obj = thiscolumnDatas[];  var widthArr = objwidth;  var rows = objrows;  var totalWidth = ;  for(var i=;i<widthArrlength;i++){  widthArr[i] = parseInt(widthArr[i])*thisperUnitWidth;  totalWidth = totalWidth + widthArr[i];  }  var tableHtml = "<table width="+totalWidth +">";  for(var i=;i<rowslength;i++){  var rowvalueArr = rows[i];  tableHtml = tableHtml + "<tr>";  for(var j=;j<rowvalueArrlength;j++){  tableHtml = tableHtml + "<td width="+widthArr[j]+"px>" + rowvalueArr[j] + "</td>";  }  tableHtml = tableHtml + "</tr>";  }  tableHtml = tableHtml + "</table>";  if(thisinnerWidth>totalWidth){  documentgetElementById("dataframe")stylewidth=(parseInt(totalWidth))+"px";  documentgetElementById("divtitle")stylewidth=(parseInt(thisinnerLWidth)+parseInt(totalWidth))+"px";  documentgetElementById("outframe")stylewidth=(parseInt(thisinnerLWidth)+parseInt(totalWidth)+)+"px";  }  documentgetElementById("leftgriddataview")innerHTML = tableHtml;  }else{  documentgetElementById("leftgriddataview")styleheight=(thisheight+)+"px";  documentgetElementById("leftgriddataview")innerHTML = thisnoDataStr;  }  }  LeftHeadGridprototypeaddData = function(data){  thiscolumnDatas = data;  thisshow();  }  LeftHeadGridprototypegetData = function(){  var rtnObj = new Array();  if(thiscolumnDatas && thiscolumnDataslength>){  var obj = thiscolumnDatas[];  var widthArr = objwidth;  var rows = objrows;  for(var i=;i<rowslength;i++){  var rowvalueArr = rows[i];  for(var j=;j<rowvalueArrlength;j++){  if(j==){  rtnObj[i] = rowvalueArr[j];  }else{  rtnObj[i] = rtnObj[i] + "" + rowvalueArr[j];  }  }  }  }  return rtnObj;  }  LeftHeadGridprototypegetHead = function(){  var rtnObj = new Array();  for(var i=;i<thisrowHeadslength;i++){  var obj = thisrowHeads[i];  var rownameobj = objrowname;    for(var j=;j<rownameobjlength;j++){  var nameobj = rownameobj[j];  if(j==){  rtnObj[i] = nameobjname;  }else{  rtnObj[i] = rtnObj[i] + "" + nameobjname;  }  }  }  return rtnObj;  }    如果有需要各位可以自己更改  完整源碼:   代碼如下: var LeftHeadGrid = function(config) {  thisrowHeads = configrowHeads != null ? configrowHeads: [];//name  thiscolumnDatas = configcolumnDatas != null ? configcolumnDatas: [];  thiswidth = configwidth != null ? configwidth: "";  thisid = configid != null ? configid: "TreGrid";  thisperUnitWidth = configperUnitWidth != null ? configperUnitWidth: ;  thisinnerWidth = ;  thisinnerLWidth = ;  thisheight = ;  thistitle = configtitle != null ? configtitle: "";  thisnoDataStr = confignoDataStr != null ? confignoDataStr: "no data";  }  LeftHeadGridprototypecreateGrid = function(){  var totalwidth = ;  var tableHtml = "<table>";  for(var i=;i<thisrowHeadslength;i++){  var obj = thisrowHeads[i];  var width = objwidth;  totalwidth = totalwidth + parseInt(width);  var rownameobj = objrowname;    for(var j=;j<rownameobjlength;j++){  var nameobj = rownameobj[j];  if(j==rownameobjlength){  tableHtml = tableHtml + "<tr><td class=bluelast width=" + width + "px>" + nameobjname + "</td></tr>";  }else{  tableHtml = tableHtml + "<tr><td class=bluefirst width=" + width + "px>" + nameobjname + "</td></tr>";  }  thisheight = thisheight + ;  }  }  tableHtml = tableHtml + "</table>";  var headHtml = "<div class=leftheadcss style=width:" + totalwidth + "px;>";  headHtml = headHtml + tableHtml + "</div>";  thisinnerLWidth = totalwidth;  thisinnerWidth = thiswidthtotalwidth;  return headHtml;  }  LeftHeadGridprototypeRenderTo =function(divId){    //var innerWidth = thiswidth;  var headHtml = thiscreateGrid();  var html = "<div id=outframe class=outframecss style=width:" + thiswidth + "px;>"  + headHtml  + "<div id=dataframe class=dataframecss style=width:" + thisinnerWidth + "px;>"  + "<div id=leftgriddataview class=innerdivcss>"  + "</div>"  + "</div>"  + "</div>"  html = "<div id=divtitle class=grittitle style=width:" + thiswidth + "px;height:px><big>" + thistitle + "</big></div>"  + html + "</div>";  documentgetElementById(divId)innerHTML = html;  thisshow();  }  LeftHeadGridprototypeshow = function(){  if(thiscolumnDatas && thiscolumnDataslength>){  var obj = thiscolumnDatas[];  var widthArr = objwidth;  var rows = objrows;  var totalWidth = ;  for(var i=;i<widthArrlength;i++){  widthArr[i] = parseInt(widthArr[i])*thisperUnitWidth;  totalWidth = totalWidth + widthArr[i];  }  var tableHtml = "<table width="+totalWidth +">";  for(var i=;i<rowslength;i++){  var rowvalueArr = rows[i];  tableHtml = tableHtml + "<tr>";  for(var j=;j<rowvalueArrlength;j++){  tableHtml = tableHtml + "<td width="+widthArr[j]+"px>" + rowvalueArr[j] + "</td>";  }  tableHtml = tableHtml + "</tr>";  }  tableHtml = tableHtml + "</table>";  if(thisinnerWidth>totalWidth){  documentgetElementById("dataframe")stylewidth=(parseInt(totalWidth))+"px";  documentgetElementById("divtitle")stylewidth=(parseInt(thisinnerLWidth)+parseInt(totalWidth))+"px";  documentgetElementById("outframe")stylewidth=(parseInt(thisinnerLWidth)+parseInt(totalWidth)+)+"px";  }  documentgetElementById("leftgriddataview")innerHTML = tableHtml;  }else{  documentgetElementById("leftgriddataview")styleheight=(thisheight+)+"px";  documentgetElementById("leftgriddataview")innerHTML = thisnoDataStr;  }  }  LeftHeadGridprototypeaddData = function(data){  thiscolumnDatas = data;  thisshow();  }  LeftHeadGridprototypegetData = function(){  var rtnObj = new Array();  if(thiscolumnDatas && thiscolumnDataslength>){  var obj = thiscolumnDatas[];  var widthArr = objwidth;  var rows = objrows;  for(var i=;i<rowslength;i++){  var rowvalueArr = rows[i];  for(var j=;j<rowvalueArrlength;j++){  if(j==){  rtnObj[i] = rowvalueArr[j];  }else{  rtnObj[i] = rtnObj[i] + "" + rowvalueArr[j];  }  }  }  }  return rtnObj;  }  LeftHeadGridprototypegetHead = function(){  var rtnObj = new Array();  for(var i=;i<thisrowHeadslength;i++){  var obj = thisrowHeads[i];  var rownameobj = objrowname;    for(var j=;j<rownameobjlength;j++){  var nameobj = rownameobj[j];  if(j==){  rtnObj[i] = nameobjname;  }else{  rtnObj[i] = rtnObj[i] + "" + nameobjname;  }  }  }  return rtnObj;  }     
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20355.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.