jquery 表格样式代码 jquery表格控件 |
您所在的位置：网站首页 › 表格css代码 › jquery 表格样式代码 jquery表格控件 |
|
网上类似的jQuery和非jQuery表格控件都非常多了，由于项目需要，我没有时间去找一个合适且小巧的表格控件，于是自己写了一个。这个表格控件要实现如下的目标： 1.列宽可以控制 2.有鼠标滑过和选中高亮效果 3.标题列支持添加排序回调函数 4.事件绑定要少，因为表格数据是ajax动态加载的 5.支持多选 首先用HTML写一个表格框架，这里表扬一下特别好用的Zen Coding插件，写table.colortable>thead>tr>th*4就可以生成所需的结构 列A 列B 列C 列D表格内容是动态生成的，因此只需要一个tbody标签即可，但为了调试方便，先给两行数据。 1 2 3 4 5 6 7 8接下来应用一些CSS让表格显得美观，由于要做成控件，因此CSS里也特意给每个选择器加了.colortable前缀。 .colortable{ border-collapse:collapse; display:inline-block; cursor:pointer; } .colortable tr{ text-align:center; height:22px; line-height:22px; } .colortable td,th{border:1px solid #000;overflow:hidden;} .colortable th.orderA,th.orderD{ background:url("../pic/common/table_order.gif") repeat-x; color:white; } .colortable tbody{background-color:#BBE0FF;} .colortable thead{background:url("../pic/common/table.gif") repeat-x;} .colortable tr.high{background-color:#E4F4FC;} .colortable tr.sel,td.order{background-color:#39B2E4;color:white;}这里用了两张图片：table_order.gif是在列排序时突出显示列标题用的，table.gif是标题的默认效果，我用了一点浅渐变来美化。 接下来就是js部分，考虑到要动态设置表格的列宽，因此要传入各个列宽的数组。再为排序传入两个回调函数。 代码的实现部分没有太多难度，主要就是在处理鼠标滑过效果时要区分该行是否被选中，选中行已经高亮了，就不需要滑过效果。 处理多选时也需要考虑两种情况，ctrl按下时是增加选择模式，不按则是单选模式。 处理排序时，对应每列的三种状态（默认，正序，逆序）要写三种不同的处理方式。 完整代码如下： (function($){ $.fn.initTable=function(width,orderA,orderD){ var that=this; that.children("thead").click(function(event){ var target=event.target; var index=$(target).index(); //干掉高亮行 var sel=getByClass("sel","tr"); for(var i=0,len=sel.length;i0) thd[0].className=""; //加类 target.className="orderA"; that.find("tbody tr").each(function(){ $(this).children("td").eq(index).attr("class","order"); }); orderA(index); }else if(target.className=="orderD"){ //取消排序 target.className=""; var td=getByClass("order","td"); for(var i=0,len=td.length;i |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |