爱学记
您现在的位置是：首页
>
winform表格控件 左侧是表头的JS表格控件
左侧是表头的JS表格控件 左侧是表头的表格数据展现 支持多行 多表头 固定表头的功能 能够支持标题 获取表格中的数据 支持IE/CHROME 表格能够自适应根据内容行居中 代码如下: lt !DOCT
左侧是表头的JS表格控件
左侧是表头的表格数据展现 支持多行 多表头 固定表头的功能 能够支持标题 获取表格中的数据 支持IE/CHROME 表格能够自适应根据内容行居中 代码如下: <!DOCTYPE PUBLIC " //W C//DTD XHTML Transitional//EN" " < xmlns=" <head runat="server"> <title>Grid左侧固定测试</title> <script src=LeftHeadGrid js></script> <link href="LeftHeadGrid css" 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:[[ ] [ ]] }] }); test RenderTo("testdiv"); </script> </> LeftHeadGrid js 复制代码 代码如下: var LeftHeadGrid = function(config) { this rowHeads = config rowHeads != null ? config rowHeads: [];//name this columnDatas = config columnDatas != null ? config columnDatas: []; this width = config width != null ? config width: ""; this id = config id != null ? config id: "TreGrid"; this perUnitWidth = config perUnitWidth != null ? config perUnitWidth: ; this innerWidth = ; this innerLWidth = ; this height = ; this title = config title != null ? config title: ""; this noDataStr = config noDataStr != null ? config noDataStr: "no data"; } LeftHeadGrid prototype createGrid = function(){ var totalwidth = ; var tableHtml = "<table>"; for(var i= ;i<this rowHeads length;i++){ var obj = this rowHeads[i]; var width = obj width; totalwidth = totalwidth + parseInt(width); var rownameobj = obj rowname; for(var j= ;j<rownameobj length;j++){ var nameobj = rownameobj[j]; if(j==rownameobj length ){ tableHtml = tableHtml + "<tr><td class= bluelast width= " + width + "px >" + nameobj name + "</td></tr>"; }else{ tableHtml = tableHtml + "<tr><td class= bluefirst width= " + width + "px >" + nameobj name + "</td></tr>"; } this height = this height + ; } } tableHtml = tableHtml + "</table>"; var headHtml = "<div class= leftheadcss style= width:" + totalwidth + "px; >"; headHtml = headHtml + tableHtml + "</div>"; this innerLWidth = totalwidth; this innerWidth = this width totalwidth ; return headHtml; } LeftHeadGrid prototype RenderTo =function(divId){ //var innerWidth = this width ; var headHtml = this createGrid(); var = "<div id= outframe class= outframecss style= width:" + this width + "px; >" + headHtml + "<div id= dataframe class= dataframecss style= width:" + this innerWidth + "px; >" + "<div id= leftgriddataview class= innerdivcss >" + "</div>" + "</div>" + "</div>" = "<div id= divtitle class= grittitle style= width:" + this width + "px;height: px ><big>" + this title + "</big></div>" + + "</div>"; document getElementById(divId) innerHTML = ; this show(); } LeftHeadGrid prototype show = function(){ if(this columnDatas && this columnDatas length> ){ var obj = this columnDatas[ ]; var widthArr = obj width; var rows = obj rows; var totalWidth = ; for(var i= ;i<widthArr length;i++){ widthArr[i] = parseInt(widthArr[i])*this perUnitWidth; totalWidth = totalWidth + widthArr[i]; } var tableHtml = "<table width= "+totalWidth +" >"; for(var i= ;i<rows length;i++){ var rowvalueArr = rows[i]; tableHtml = tableHtml + "<tr>"; for(var j= ;j<rowvalueArr length;j++){ tableHtml = tableHtml + "<td width= "+widthArr[j]+"px >" + rowvalueArr[j] + "</td>"; } tableHtml = tableHtml + "</tr>"; } tableHtml = tableHtml + "</table>"; if(this innerWidth>totalWidth){ document getElementById("dataframe") style width=(parseInt(totalWidth))+"px"; document getElementById("divtitle") style width=(parseInt(this innerLWidth)+parseInt(totalWidth))+"px"; document getElementById("outframe") style width=(parseInt(this innerLWidth)+parseInt(totalWidth)+ )+"px"; } document getElementById("leftgriddataview") innerHTML = tableHtml; }else{ document getElementById("leftgriddataview") style height=(this height+ )+"px"; document getElementById("leftgriddataview") innerHTML = this noDataStr; } } LeftHeadGrid prototype addData = function(data){ this columnDatas = data; this show(); } LeftHeadGrid prototype getData = function(){ var rtnObj = new Array(); if(this columnDatas && this columnDatas length> ){ var obj = this columnDatas[ ]; var widthArr = obj width; var rows = obj rows; for(var i= ;i<rows length;i++){ var rowvalueArr = rows[i]; for(var j= ;j<rowvalueArr length;j++){ if(j== ){ rtnObj[i] = rowvalueArr[j]; }else{ rtnObj[i] = rtnObj[i] + " " + rowvalueArr[j]; } } } } return rtnObj; } LeftHeadGrid prototype getHead = function(){ var rtnObj = new Array(); for(var i= ;i<this rowHeads length;i++){ var obj = this rowHeads[i]; var rownameobj = obj rowname; for(var j= ;j<rownameobj length;j++){ var nameobj = rownameobj[j]; if(j== ){ rtnObj[i] = nameobj name; }else{ rtnObj[i] = rtnObj[i] + " " + nameobj name; } } } return rtnObj; } 如果有需要 各位可以自己更改 完整源码: 代码如下: var LeftHeadGrid = function(config) { this rowHeads = config rowHeads != null ? config rowHeads: [];//name this columnDatas = config columnDatas != null ? config columnDatas: []; this width = config width != null ? config width: ""; this id = config id != null ? config id: "TreGrid"; this perUnitWidth = config perUnitWidth != null ? config perUnitWidth: ; this innerWidth = ; this innerLWidth = ; this height = ; this title = config title != null ? config title: ""; this noDataStr = config noDataStr != null ? config noDataStr: "no data"; } LeftHeadGrid prototype createGrid = function(){ var totalwidth = ; var tableHtml = "<table>"; for(var i= ;i<this rowHeads length;i++){ var obj = this rowHeads[i]; var width = obj width; totalwidth = totalwidth + parseInt(width); var rownameobj = obj rowname; for(var j= ;j<rownameobj length;j++){ var nameobj = rownameobj[j]; if(j==rownameobj length ){ tableHtml = tableHtml + "<tr><td class= bluelast width= " + width + "px >" + nameobj name + "</td></tr>"; }else{ tableHtml = tableHtml + "<tr><td class= bluefirst width= " + width + "px >" + nameobj name + "</td></tr>"; } this height = this height + ; } } tableHtml = tableHtml + "</table>"; var headHtml = "<div class= leftheadcss style= width:" + totalwidth + "px; >"; headHtml = headHtml + tableHtml + "</div>"; this innerLWidth = totalwidth; this innerWidth = this width totalwidth ; return headHtml; } LeftHeadGrid prototype RenderTo =function(divId){ //var innerWidth = this width ; var headHtml = this createGrid(); var = "<div id= outframe class= outframecss style= width:" + this width + "px; >" + headHtml + "<div id= dataframe class= dataframecss style= width:" + this innerWidth + "px; >" + "<div id= leftgriddataview class= innerdivcss >" + "</div>" + "</div>" + "</div>" = "<div id= divtitle class= grittitle style= width:" + this width + "px;height: px ><big>" + this title + "</big></div>" + + "</div>"; document getElementById(divId) innerHTML = ; this show(); } LeftHeadGrid prototype show = function(){ if(this columnDatas && this columnDatas length> ){ var obj = this columnDatas[ ]; var widthArr = obj width; var rows = obj rows; var totalWidth = ; for(var i= ;i<widthArr length;i++){ widthArr[i] = parseInt(widthArr[i])*this perUnitWidth; totalWidth = totalWidth + widthArr[i]; } var tableHtml = "<table width= "+totalWidth +" >"; for(var i= ;i<rows length;i++){ var rowvalueArr = rows[i]; tableHtml = tableHtml + "<tr>"; for(var j= ;j<rowvalueArr length;j++){ tableHtml = tableHtml + "<td width= "+widthArr[j]+"px >" + rowvalueArr[j] + "</td>"; } tableHtml = tableHtml + "</tr>"; } tableHtml = tableHtml + "</table>"; if(this innerWidth>totalWidth){ document getElementById("dataframe") style width=(parseInt(totalWidth))+"px"; document getElementById("divtitle") style width=(parseInt(this innerLWidth)+parseInt(totalWidth))+"px"; document getElementById("outframe") style width=(parseInt(this innerLWidth)+parseInt(totalWidth)+ )+"px"; } document getElementById("leftgriddataview") innerHTML = tableHtml; }else{ document getElementById("leftgriddataview") style height=(this height+ )+"px"; document getElementById("leftgriddataview") innerHTML = this noDataStr; } } LeftHeadGrid prototype addData = function(data){ this columnDatas = data; this show(); } LeftHeadGrid prototype getData = function(){ var rtnObj = new Array(); if(this columnDatas && this columnDatas length> ){ var obj = this columnDatas[ ]; var widthArr = obj width; var rows = obj rows; for(var i= ;i<rows length;i++){ var rowvalueArr = rows[i]; for(var j= ;j<rowvalueArr length;j++){ if(j== ){ rtnObj[i] = rowvalueArr[j]; }else{ rtnObj[i] = rtnObj[i] + " " + rowvalueArr[j]; } } } } return rtnObj; } LeftHeadGrid prototype getHead = function(){ var rtnObj = new Array(); for(var i= ;i<this rowHeads length;i++){ var obj = this rowHeads[i]; var rownameobj = obj rowname; for(var j= ;j<rownameobj length;j++){ var nameobj = rownameobj[j]; if(j== ){ rtnObj[i] = nameobj name; }else{ rtnObj[i] = rtnObj[i] + " " + nameobj name; } } } return rtnObj; } lishixinzhi/Article/program/Java/JSP/201311/20355 很赞哦！ (1059)
微信收款码
支付宝收款码