Grid控件，相信很多人都已经写过，或者重构过了。
对于Grid中的某些功能，实现起来会比较头疼。其中很重要的一个就是定制列样式的实现，如将列设为单选框，下拉框…等等。网上的Grid控件的做法，几乎都是使用的内部定义好的一些样式，使用时进行指定，虽说实现了大部分的需求功能，但对于某些特殊的自定义功能，想实现起来就很没什么办法了，只有扩展源代码。
做Grid控件有一段时间了，被这个问题烦了有一段时间。开始的时候也是模拟网上部分Grid的实现方式，自定义了部分列样式，封装在Grid中，但面对着各种需求的自定义样式，感觉越来越力不从心。
经过一段时间的摸索之后，终找到了一种个人最好的实现方式，对于实现某些自定义样式很方便，也很灵活。可以有效的将列的样式和Grid控件分离开来。实现了高定制化的Grid。
还是用代码来说明吧：
Grid控件中用实现自定义表格的伪代码：
function myGridConfig(id){
this.__id=id;
var _self=this;
...
_self.createHead=function(titles){
this.titles=titles;//设列标题以数组形式存储
...
}
_self.getdata=function(){
//从数据库读取数据，并以二维数组的方式返回。
}
_self.createBody=function(){
...
var grid=...//表格对象。
var data=getdata();
for(var i=0;i<data.length;i++){
var cells=data[i];
var tr = grid.insertRow();//添加一行。
for(var j=0;j<this.titles.length;j++){
var td=document.createElement("td");
if(document.all[this.__id+"_col_"+j]){//查找页面中有没有id为 id_col_index 形式的元素.这里使用了IE特有的document.all语法。
var customHtml = document.all[this.__id+"_col_"+j].innerHTML;
/**替换掉指定部分（即"_id_","_value_"）的值。
通常的数据中，第一行都是从数据库中读取出来的id，所以此处将_id_替换为cells[0].**/
customHtml = customHtml.replace(/_id_/g,cells[0]).replace(/_value_/g,cells[j]);
td.innerHTML=customHtml;
}else{
td.innerHTML=cells[j]?cells[j]:"";
}
tr.appendChild(td);//将单元格TD加入TR。
}
grid.appendChild(tr);//将TR加入表格。
}
...
}
...
}
有了以上的代码，那么在调用Grid的页面，就可以很方便的实现自定义列样式了。假设从数据库中通过getdata()方法得到的数据为以下形式：
[
["001","张三","男"],
["002","李四","男"],
["003","王五","男"]
]
如想在最后一列加上一个“操作”列。则可以写一个div,将所要实现的功能放在div之中：
//这里是myGrid_col_3..如果Grid控件的__id为"myGrid",它的第四列就会被替换成为其内部的内容。
<div id="myGrid_col_3" style="display:none;">
<a onclick="edit('_id_');">编辑</a>
<a onclick="del('_id_');">删除</a>
//由于在上面的代码中，_id_会被替换为data中的第一列的值，并赋到相应的单元格内。
//所以每点击编辑，就会调用edit方法。并将当前行的第一列值传进去。就可以对专门的某一条数据进行操作。
</div>
<script>
function.onload=function(){
var gridConfig=new myGridConfig("myGrid");
var titles=["编号","姓名","性别","操作"]//存储Grid标题的数组
gridConfig.createHead(titles);
gridConfig.createBody();
}
</script>
是不是很方便呢？
这样这种方式的好处就是，样式代码和Grid控件分离开了，两者不再耦合在一起，当想要修改某一列的样式时，只要修改那一列的样式所在的div的内容即可。你想到什么样的样式，就可以写什么样的样式，只要你想得到，几乎都可以通过相应的方式实现。
当然，一般当前行数据的id是不会显示在代码中，而是是被隐藏起来的。隐藏的功能只要在myGridConfig中编写相应的代码进行实现就可以了，这里只是讨论自定义列样式的功能，所以就不涉及那方面了。
如果各位对我这个实现有什么看法和建议或者不清楚的地方，欢迎交流和讨论。
另外如果各位有各好的定制列样式的方法，各位是怎么做的呢？
------------------------------------------------------------------------------------------------
本来想把Grid的代码也共享过来，但由公司是使用的平台的特殊性，我写的那些控件都是以特定的格式编写和调用的，Grid控件离开平台就无法运行，要修改很大一部分代码，所以就没做这方面的工作。
(08-20 1:08 by ham)
分享到：
相关推荐
5种最流行好用的表格grid控件
GRID控件删除之前确认GRID控件删除之前确认GRID控件删除之前确认GRID控件删除之前确认GRID控件删除之前确认GRID控件删除之前确认GRID控件删除之前确认
PropertyGrid控件使用教程 PropertyGrid控件使用教程
Delphi Grid控件源码
Intouch SQL GRID 控件 for Intouch 8.0 以上 .
MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC grid 控件MFC ...
不错的grid控件，晚上下载的，值得推广个共享。
.NET 框架 PropertyGrid 控件是 Visual Studio .NET 属性浏览器的核心。PropertyGrid 控件显示对象或类型的属性，并主要通过使用反射来检索项目的属性。 本电子书旨在帮助您了解 Microsoft .NET 框架中的 Property...
一个不错的Grid控件,一个不错的Grid控件
一个非常简单的GRID控件, WINFORM
自定义查询GRID内数据 点击标题自动排序 打印内容 添加、修改、更新内容 右键菜单、 适用于DELPHI7.0
vfp grid 内添加自定义控件，随绑定的字段值显示不同外观
asp.net GRID控件删除之前确认.rar
在网上找了一些PropertyGrid的文章，也有可以实现多语言版本的，但是那种方法使PropertyGrid无法传值，没有实际意义。这个demo可以将CategoryName、PropertyName、PropertyDescription设置多国语言。并且不会出现...
非常好的.net的grid控件,支持子表，图片显示，排序等等很多功能
PropertyGrid属性控件 学习PropertyGrid控件很好的例子 c# 共享ing
griddatepickercustomfiltering,动态设置显示kendoui grid控件某一列的格式
angularjs ui-grid datepicker 日期控件 ui-grid 双击弹出时间选择框
VFP GRID 合计行，与双层表头控件
SmartGrid控件的页面就是一个SmartGrid控件和一个保存按钮。以下是后台代码，仅提参考哦