左侧是表头的JS表格控件(自写,网上没有的)
2013-06-04 00:00
531 查看
今天,项目中要用到该表格,找了一遍,发现没有合适的,于是自己动手丰衣足食。
最终呈现效果如上图,
1、左侧是表头的表格数据展现,
2、支持多行,多表头
3、固定表头的功能
4、能够支持标题
5、获取表格中的数据
6、支持IE/CHROME
7、 表格能够自适应根据内容行居中
LeftHeadGrid.js
如果有需要,各位可以自己更改
完整源码:
http://xiazai.jb51.net/201306/yuanma/LeftHeadGrid_jb51net.rar
最终呈现效果如上图,
1、左侧是表头的表格数据展现,
2、支持多行,多表头
3、固定表头的功能
4、能够支持标题
5、获取表格中的数据
6、支持IE/CHROME
7、 表格能够自适应根据内容行居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Grid左侧固定测试</title> <script src=LeftHeadGrid.js></script> <link href="LeftHeadGrid.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div id="testdiv" align="center"></div> </form> </body> <script type="text/javascript" > var test = new LeftHeadGrid({ id: "leftHeadGrid", width: 800, title:"danielinbiti", perUnitWidth:300, rowHeads:[{ width:"60", rowname:[{name:"日期"},{name:"数值"}] }], columnDatas:[{ width:[1,1], rows:[[10130501,101011],[2,3]] }] }); test.RenderTo("testdiv"); </script> </html>
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: 10; this.innerWidth = 0; this.innerLWidth = 0; this.height = 0; this.title = config.title != null ? config.title: ""; this.noDataStr = config.noDataStr != null ? config.noDataStr: "no data"; } LeftHeadGrid.prototype.createGrid = function(){ var totalwidth = 0; var tableHtml = "<table>"; for(var i=0;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=0;j<rownameobj.length;j++){ var nameobj = rownameobj[j]; if(j==rownameobj.length-1){ 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 + 40; } } tableHtml = tableHtml + "</table>"; var headHtml = "<div class='leftheadcss' style='width:" + totalwidth + "px;'>"; headHtml = headHtml + tableHtml + "</div>"; this.innerLWidth = totalwidth; this.innerWidth = this.width-totalwidth-5; return headHtml; } LeftHeadGrid.prototype.RenderTo =function(divId){ //var innerWidth = this.width-100; var headHtml = this.createGrid(); var html = "<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>" html = "<div id='divtitle' class='grittitle' style='width:" + this.width + "px;height:30px'><big>" + this.title + "</big></div>" + html + "</div>"; document.getElementById(divId).innerHTML = html; this.show(); } LeftHeadGrid.prototype.show = function(){ if(this.columnDatas && this.columnDatas.length>0){ var obj = this.columnDatas[0]; var widthArr = obj.width; var rows = obj.rows; var totalWidth = 0; for(var i=0;i<widthArr.length;i++){ widthArr[i] = parseInt(widthArr[i])*this.perUnitWidth; totalWidth = totalWidth + widthArr[i]; } var tableHtml = "<table width='"+totalWidth +"'>"; for(var i=0;i<rows.length;i++){ var rowvalueArr = rows[i]; tableHtml = tableHtml + "<tr>"; for(var j=0;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)+4)+"px"; } document.getElementById("leftgriddataview").innerHTML = tableHtml; }else{ document.getElementById("leftgriddataview").style.height=(this.height+4)+"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>0){ var obj = this.columnDatas[0]; var widthArr = obj.width; var rows = obj.rows; for(var i=0;i<rows.length;i++){ var rowvalueArr = rows[i]; for(var j=0;j<rowvalueArr.length;j++){ if(j==0){ rtnObj[i] = rowvalueArr[j]; }else{ rtnObj[i] = rtnObj[i] + "," + rowvalueArr[j]; } } } } return rtnObj; } LeftHeadGrid.prototype.getHead = function(){ var rtnObj = new Array(); for(var i=0;i<this.rowHeads.length;i++){ var obj = this.rowHeads[i]; var rownameobj = obj.rowname; for(var j=0;j<rownameobj.length;j++){ var nameobj = rownameobj[j]; if(j==0){ rtnObj[i] = nameobj.name; }else{ rtnObj[i] = rtnObj[i] + "," + nameobj.name; } } } return rtnObj; }
如果有需要,各位可以自己更改
完整源码:
http://xiazai.jb51.net/201306/yuanma/LeftHeadGrid_jb51net.rar
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: 10; this.innerWidth = 0; this.innerLWidth = 0; this.height = 0; this.title = config.title != null ? config.title: ""; this.noDataStr = config.noDataStr != null ? config.noDataStr: "no data"; } LeftHeadGrid.prototype.createGrid = function(){ var totalwidth = 0; var tableHtml = "<table>"; for(var i=0;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=0;j<rownameobj.length;j++){ var nameobj = rownameobj[j]; if(j==rownameobj.length-1){ 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 + 40; } } tableHtml = tableHtml + "</table>"; var headHtml = "<div class='leftheadcss' style='width:" + totalwidth + "px;'>"; headHtml = headHtml + tableHtml + "</div>"; this.innerLWidth = totalwidth; this.innerWidth = this.width-totalwidth-5; return headHtml; } LeftHeadGrid.prototype.RenderTo =function(divId){ //var innerWidth = this.width-100; var headHtml = this.createGrid(); var html = "<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>" html = "<div id='divtitle' class='grittitle' style='width:" + this.width + "px;height:30px'><big>" + this.title + "</big></div>" + html + "</div>"; document.getElementById(divId).innerHTML = html; this.show(); } LeftHeadGrid.prototype.show = function(){ if(this.columnDatas && this.columnDatas.length>0){ var obj = this.columnDatas[0]; var widthArr = obj.width; var rows = obj.rows; var totalWidth = 0; for(var i=0;i<widthArr.length;i++){ widthArr[i] = parseInt(widthArr[i])*this.perUnitWidth; totalWidth = totalWidth + widthArr[i]; } var tableHtml = "<table width='"+totalWidth +"'>"; for(var i=0;i<rows.length;i++){ var rowvalueArr = rows[i]; tableHtml = tableHtml + "<tr>"; for(var j=0;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)+4)+"px"; } document.getElementById("leftgriddataview").innerHTML = tableHtml; }else{ document.getElementById("leftgriddataview").style.height=(this.height+4)+"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>0){ var obj = this.columnDatas[0]; var widthArr = obj.width; var rows = obj.rows; for(var i=0;i<rows.length;i++){ var rowvalueArr = rows[i]; for(var j=0;j<rowvalueArr.length;j++){ if(j==0){ rtnObj[i] = rowvalueArr[j]; }else{ rtnObj[i] = rtnObj[i] + "," + rowvalueArr[j]; } } } } return rtnObj; } LeftHeadGrid.prototype.getHead = function(){ var rtnObj = new Array(); for(var i=0;i<this.rowHeads.length;i++){ var obj = this.rowHeads[i]; var rownameobj = obj.rowname; for(var j=0;j<rownameobj.length;j++){ var nameobj = rownameobj[j]; if(j==0){ rtnObj[i] = nameobj.name; }else{ rtnObj[i] = rtnObj[i] + "," + nameobj.name; } } } return rtnObj; }
相关文章推荐
- 左侧是表头的JS表格控件(自写,网上没有的)
- 左侧是表头的JS表格控件
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)
- 关于MFC控件删除出现“具有该ID的控件已存在”这样的情况的解决方案,详细,网上都没有这么详细的,我是“深受其害”,所以想将详细的方法分享出去。
- Js全局和局部变量_this关键字_《没有控件的ASPDONET》
- 固定表头和左侧列的表格插件DataTable
- JS各种iframe弹出控件没有滚动条或者失灵的解决办法
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- [JQuery插件] 固定表头, 左侧某些列的表格
- tbl.js div实现的表格控件,完全免费,不依赖jquery
- js+json用表格实现简单网站左侧导航
- 用jQuery合并表格中左侧表头同列相同文本的相邻单元格(二)
- GridView控件在没有数据时显示表头和没有数据
- 纯js,table表格,没有封装,可以自行按照需求封装,有不足之处还请指出
- js获取表格第一行数据(不包括表头)
- Java表格控件支持多表头列锁定
- 浅谈js中如何动态添加表头/表列/表格内容
- 表格添加固定表头,js 实现 tableFixedHead.js
- 推荐几款JS表格控件