关于如何编写灵活定制列样式的Grid控件

最新推荐文章于 2025-01-16 14:02:24 发布

iteye_17163

最新推荐文章于 2025-01-16 14:02:24 发布

阅读量271

点赞数

分类专栏： Javascript 文章标签： Ajax JavaScript ASP PHP JSP ViewUI

Javascript 专栏收录该内容

8 篇文章

订阅专栏

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)