jQuery之自定义datagrid控件

sldatagrid

效果:

图片 1

sldatagrid.js

(function($) {
    function loadColumns(sldatagrid, columns) {
        $(sldatagrid).empty();
        $(sldatagrid).append("<thead><tr></tr></thead>");
        var thead = $("thead", sldatagrid);
        var tr = $("tr", thead);
        $.each(columns, function(i, n) {
            if (n.field == "ck") {
                $("<th class='sldatagrid-header-check' field='ck' align='center' style='" + n.style + "'></th>").appendTo(tr);
                $("<input>", {
                    type : 'checkbox',
                    click : function() {
                        if (this.checked) {
                            $.each(thead.next().children(), function() {
                                $(this).addClass("sldatagrid-row-selected");
                                $("td :checkbox", this).attr("checked", "checked");
                            });
                        } else {
                            $.each(thead.next().children(), function() {
                                $(this).removeClass("sldatagrid-row-selected");
                                $("td :checkbox", this).removeAttr("checked");
                            });
                        }
                    }
                }).appendTo($("th", tr));
            } else if (n.field == "op") {
                $("<th class='sldatagrid-header-button' field='" + n.field + "' align='" + n.align + "' style='" + n.style + "'>" + n.title + "</th>").appendTo(tr).data("html", n.html);
            } else {
                $("<th class='sldatagrid-header-cell' field='" + n.field + "' align='" + n.align + "' style='" + n.style + "'>" + n.title + "</th>").appendTo(tr);
            }
        });
    }
    function loadDatas(sldatagrid, datas) {
        $("tbody", sldatagrid).remove();
        $(sldatagrid).append("<tbody></tbody>");
        var thead = $("thead", sldatagrid);
        var theadtr = $("tr", thead);
        var tbody = $("tbody", sldatagrid);
        $.each(datas, function(i, n) {
            var tr = $("<tr>", {
                mouseenter : function() {
                    if (!$(this).hasClass("sldatagrid-row-selected")) {
                        $(this).addClass("sldatagrid-row-enter");
                    }
                    $.fn.sldatagrid.property.enterRowIndex = $(this).prevAll().length;
                },
                mouseleave : function() {
                    $(this).removeClass("sldatagrid-row-enter");
                },
                click : function() {
                }
            }).data("bindData", n).appendTo(tbody);
            $("th", theadtr).each(function() {
                var field = $(this).attr('field');
                if (field == "ck") {
                    $("<td class='sldatagrid-row-check' align='center'></td>").appendTo(tr);
                    $("<input>", {
                        type : "checkbox",
                        click : function() {
                            tr.toggleClass("sldatagrid-row-selected");
                            if (tr.hasClass("sldatagrid-row-selected")) {
                                $("td :checkbox", tr).attr("checked", "checked");
                            } else {
                                $("td :checkbox", tr).removeAttr("checked");
                            }
                            if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
                                $(":checkbox", theadtr).attr("checked", "checked");
                            } else {
                                $(":checkbox", theadtr).removeAttr("checked");
                            }
                        }
                    }).appendTo($("td", tr));
                } else if (field == "op") {
                    $("<td>", {
                        "class" : "sldatagrid-row-button",
                        click : function() {

                        }
                    }).appendTo(tr).html($(this).data("html"));
                } else {
                    $("<td>", {
                        "class" : "'sldatagrid-row-cell",
                        click : function() {
                            $(this).parent().toggleClass("sldatagrid-row-selected");
                            if ($(this).parent().hasClass("sldatagrid-row-selected")) {
                                $("td :checkbox", $(this).parent()).attr("checked", "checked");
                            } else {
                                $("td :checkbox", $(this).parent()).removeAttr("checked");
                            }
                            if ($("tr td input:checked", tbody).length == $("tr", tbody).length) {
                                $(":checkbox", theadtr).attr("checked", "checked");
                            } else {
                                $(":checkbox", theadtr).removeAttr("checked");
                            }
                        }
                    }).text(n[field]).appendTo(tr);
                }
            });
        });
    }
    $.fn.sldatagrid = function(options, params) {
        if ($.type(options) == "string") {
            var method = $.fn.sldatagrid.methods[options];
            if (method) {
                return method(this, params);
            } else {
                return null;
            }
        }
        $.extend($.fn.sldatagrid.defaults, options);
        $(this).attr({
            border : 0,
            cellpadding : 0,
            cellspacing : 0,
            "class" : $.fn.sldatagrid.defaults.css,
            style : $.fn.sldatagrid.defaults.style
        });
        if ($.fn.sldatagrid.defaults.columns) {
            loadColumns(this, $.fn.sldatagrid.defaults.columns);
        }
        if ($.fn.sldatagrid.defaults.datas) {
            loadDatas(this, $.fn.sldatagrid.defaults.datas);
        }
    };
    $.fn.sldatagrid.methods = {
        getClickRow : function(sldatagrid) {
            return $("tbody tr", sldatagrid).eq($.fn.sldatagrid.property.enterRowIndex).data("bindData");
        },
        getSelectedRows : function(sldatagrid) {
            var selectedRows = new Array();
            $("tbody tr.sldatagrid-row-selected", sldatagrid).each(function(i) {
                selectedRows[i] = $(this).data("bindData");
            });
            return selectedRows;
        },
        loadColumns : function(sldatagrid, columns) {
            loadColumns(sldatagrid, columns);
        },
        loadDatas : function(sldatagrid, datas) {
            loadDatas(sldatagrid, datas);
        }
    };
    $.fn.sldatagrid.property = {
        enterRowIndex : -1
    };
    $.fn.sldatagrid.defaults = {
        css : "sldatagrid",
        style : "width:auto;",
        columns : undefined,
        datas : undefined
    };
})(jQuery);

sldatagrid.css

table,thead,tr,th,td,input {
    margin: 0; padding: 0;font-family:verdana;
}

.sldatagrid {
    border: solid 1px #B4B4B4; border-collapse: collapse;
}

.sldatagrid tr th {
    height: 27px; border: solid 1px #B4B4B4; background-color: #F4F4F4;
}

.sldatagrid tr td {
    height: 25px; border: solid 1px #B4B4B4;
}

.sldatagrid-header-check {
    width: 20px;
}

.sldatagrid-header-button {
    width: auto;
}

.sldatagrid-header-cell {
    min-width: 50px;
}

.sldatagrid-row-check {
    width: 20px;
}

.sldatagrid-row-button {

}

.sldatagrid-row-cell {
    padding: 0 5px 0 5px;
}

.sldatagrid-row-selected {
    background-color: yellow;
}

.sldatagrid-row-enter {
    background-color: red;
}

testsldatagrid.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="sldatagrid.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="sldatagrid.js"></script>
</head>
<body>
    <table id="sl">
    </table>
    <script type="text/javascript">
        $(function() {
            $("#sl").sldatagrid({
                columns : [ {
                    field : "ck",
                    style : ""
                }, {
                    title : "列1",
                    field : "col1",
                    align : "center",
                    style : "width:100px;"
                }, {
                    title : "列2",
                    field : "col2",
                    align : "center",
                    style : "width:100px;"
                }, {
                    title : "",
                    field : "op",
                    align : "center",
                    style : "",
                    html : "<input type='button' value='编辑' onclick='a()'/><input type='button' value='删除' onclick='b()'/>"
                } ],
                datas : [ {
                    "col1" : "列1数据1",
                    "col2" : "列2数据1"
                }, {
                    "col1" : "列1数据2",
                    "col2" : "列2数据2"
                }, {
                    "col1" : "列1数据3",
                    "col2" : "列2数据3"
                } ]
            });
        });
        function a() {
            var rowData = $("#sl").sldatagrid("getClickRow");
            $.each(rowData, function(i, n) {
                alert(i + ":" + n)
            });
        }
        function b() {
            var rowDatas = $("#sl").sldatagrid("getSelectedRows");
        }
    </script>
</body>
</html>

繁多景况下,通过js(jQuery1.10)动态来创建一些样式,对页面包车型大巴动态交互来讲是很有益于的

表头固定应该是多个用得相当多的职能,仿照效法了网络多少个例子,在多少个常用浏览器下显得不是很周密。而且多数都以基于固定的表格,在编码时多写贰个一定的表头,对于动态变化的不晓得有个别列的表格就不可能入手。况且例子中几近只可以满意限定中度的动静,要是限制宽度,出现横向滚动条就无法了。

API文档

表格属性:  

属性名 属性值类型 描述 默认值
css string 应用到表格整体的css文件 sldatagrid
style string 应用到表格整体的样式 width:auto;
columns array 列配置对象 undefined
datas array 数据 undefined

  列属性:  

属性名 属性值类型 描述 默认值
title string 列标题
field string 列字段("ck":checkbox列,"op":自定义列)
align string 水平位置("center","left","right")
style string 列样式
html string 自定义html

  方法:  

方法名 参数 返回值 描述
getClickRow 行数据对象 var rowData=$("#sl").datagrid("getClickRow");
rowData:
{
    "col1" : "列1数据1",
    "col2" : "列2数据1"
}
getSelectedRows 行数据对象数据 var rowDatas=$("#sl").datagrid("getSelectedRows");
rowDatas:
[
    {"col1" : "列1数据1", "col2" : "列2数据1"},
    {"col1" : "列1数据2", "col2" : "列2数据2"}
]
loadColumns 列数据 [{
    field:"ck",
    style:""
},{
    title:"列1",
    field:"col1",
    align:"center",
    style:"width:100px;"
},{
    title:"列2",
    field:"col2",
    align:"center",
    style:"width:100px;"
},{
    title:"",
    field:"op",
    align:"center",
    style:"",
    html:"<input type=’button’ value=’编辑’ onclick=’a()’/><input type=’button’ value=’删除’ onclick=’b()’/>"
}]
loadDatas 行数据 [{
    "col1":"列1数据1",
    "col2":"列2数据1"
},{
    "col1":"列1数据2",
    "col2":"列2数据2"
}]

效果: sldatagrid.js ( function ($) {
function loadColumns(sldatagrid, columns) { $(sldatagrid).empty();
$(sldatagrid).append( “theadtr/tr/thead” ); var thead = $(“th…

可是不一致的浏览器针对动态变化的不是很匹配,在此遇见的不包容ie8,跟各位分享下

小编的指标便是要像jquery-ui那样,找到页面上设有的报表,调用三个办法就能够落成稳定表头的机能。趁着动手学习写jquery插件的火候,自身写了三个表头固定的插件。
动用办法和jquery-ui中的插件同样,只需求一行代码
$(‘#table1’).fixHeader({height:100});

代码:

下列浏览器测验通过 IE7 IE8 firefox16.0 chrome22.0
现阶段已知IE9下列不能够对齐,手头权且没有IE9来调度,以后再设法消除。

json数据

说明:
1 供给jquery,开垦测量试验用的jquery-1.8.2,别的版本应该比很小
2 表底部分的<tr>须要写在<thead>里
3
不限制宽度情形下,自动适应表格宽度(倘若滚动条宽度为20px,实际增长幅度为表格宽度+20px)
4 帮助多行表头固定
5
经常表格全数列都呈现,无横向滚动条,只须求竖向滚动条的效用。该插件帮忙范围宽度规格下的表头固定。
6
限定宽度和高度的尺度下稳定表头显示时,表头固定成效不恐怕单独通过css来落实,须求经过js完成,会有一线闪烁
7 已经思虑table和th,td的border-width设置成差异值的情况
8 已经思索了表头中绑定的风云,原表头中绑定的风云照旧保留

data.json

极度注意:IE浏览器下,必需要设置表格中td和th的border-width,不然不只怕精确安装列宽,表头和多少部分会错位
使用格局:
界定高度:$(‘#table1’).fixHeader({height:100});
范围中度和增长幅度:$(‘#table3’).fixHeader({height:100,width:500});

[{“name”:”ajax”,”job”:”manong”},{“name”:”js”,”job”:”diaosi”}]

上边为全体代码

html页面

复制代码 代码如下:

js文件

/*!
* fixHeader 1.0.0
* Copyright 2012 chokobo
*
* make table header fixed
*
* notice: set th,id border-width in IE
*
* tested browser: IE7 IE8 firefox16.0 chrome22.0
*/
(function( $, undefined ) {

$document.ready(function(){

$.fn.fixHeader = function(options){
var defaults = {
width: ”,
height: ”

.ajax(function(){

};

type:”post”,

options = $.extend({}, defaults, options);
var elem = this;

url:”data.json”,

if(options.height == ”){
return this;
}

success:function(data){

var thead = elem.find(‘thead’);
var fixTable = elem.clone().empty().removeAttr(‘id’);
//set head default background-color
if(fixTable.css(‘background-color’) == ‘transparent’ ||
fixTable.css(‘background-color’) == ”){
fixTable.css(‘background-color’, ‘#fff’);
}
fixTable.css({
‘position’: ‘absolute’,
‘top’: ‘0px’,
‘border-bottom’: $(‘tr:eq(0)’, thead).find(‘th:eq(0),
td:eq(0)’).css(‘border-bottom-width’)
});

$(“.ajaxappend tbody”).append(“

$(‘tr:eq(0)’, thead).find(‘th, td’).each(function(){
var col = $(this);

“);

if($.browser.mozilla){
col.width(col.width());
}
else if($.browser.chrome){
var colBorderWidth = parseInt(col.css(‘border-width’));
col.width(col.width()+colBorderWidth);
}
else if($.browser.msie){
var colBorderWidth = parseInt(col.css(‘border-width’));
if(colBorderWidth){
col.width(col.width()+colBorderWidth+colBorderWidth/2);//IE7??
}
}
});

$(“.ajaxappend thead”).append(“

//make head
var dummyHead = thead.clone();
thead.appendTo(fixTable);
dummyHead.prependTo(elem);

name

var tbodyWrapper = elem.wrap(‘<div
class=”body-wrapper”></div>’).parent();
var tableWrapper = tbodyWrapper.wrap(‘<div class=”table-wrapper”
style=”position:relative;”/>’).parent();
setTableWidth();
setWrapperSize();

“);

fixTable.prependTo(tableWrapper);

$(“.ajaxappend thead”).append(“

return this;

job

function setTableWidth(){
if($.browser.mozilla){
elem.width(elem.width());
fixTable.css(‘width’,elem.css(‘width’));
}
else if($.browser.chrome){
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
}
else if($.browser.msie){
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
}
else{
elem.width(elem.outerWidth());
fixTable.width(elem.outerWidth());
}
}
function setWrapperSize(){
var elemWidth = elem.outerWidth(true);
var elemHeight = elem.outerHeight(true);
var scrollBarWidth = 20;

“);

if(options.width == ”){
tbodyWrapper.css({
‘width’: (elemWidth+scrollBarWidth) + ‘px’,
‘height’: options.height,
‘overflow-x’: ‘hidden’,
‘overflow-y’: ‘auto’
});
}
else{
if(elemWidth <= options.width){
tbodyWrapper.css({
‘width’: options.width+’px’,
‘height’: options.height,
‘overflow-x’: ‘hidden’,
‘overflow-y’: ‘auto’
});
}
else{
tableWrapper.css({
‘width’: options.width,
‘height’: options.height,
‘overflow’: ‘auto’
});
tableWrapper.scroll(function(){
fixTable.css(‘top’,tableWrapper.scrollTop()+’px’);
});
}
}
}
};

$(“.ajaxappend tbody”).append(“”);

})( jQuery );

发表评论

电子邮件地址不会被公开。 必填项已用*标注