Custom datagrid Control of jQuery

Sldatagrid

Effect:

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> API documentation
Table attributes:
 

 

 
  
 
   
 
    
Attribute name
 
    
Attribute Value Type
 
    
Description
 
    
Default Value
 
   
 
   
 
    
Css
 
    
String
 
    
Css files applied to the entire table
 
    
Sldatagrid
 
   
 
   
 
    
Style
 
    
String
 
    
Apply the overall style to the table
 
    
Width: auto;
 
   
 
   
 
    
Columns
 
    
Array
 
    
Column configuration object
 
    
Undefined
 
   
 
   
 
    
Datas
 
    
Array
 
    
Data
 
    
Undefined
 
   
 
  

 
 
Column attributes:
 

 

 
  
 
   
 
    
Attribute name
 
    
Attribute Value Type
 
    
Description
 
    
Default Value
 
   
 
   
 
    
Title
 
    
String
 
    
Column Title
 
    
None
 
   
 
   
 
    
Field
 
    
String
 
    
Column field ("ck": checkbox column, "op": Custom column)
 
    
None
 
   
 
   
 
    
Align
 
    
String
 
    
Horizontal position ("center", "left", "right ")
 
    
None
 
   
 
   
 
    
Style
 
    
String
 
    
Column Style
 
    
None
 
   
 
   
 
    
Html
 
    
String
 
    
Custom html
 
    
None
 
   
 
  

 
 
Method:
 

 

 
  
 
   
 
    
Method Name
 
    
Parameters
 
    
Return Value
 
    
Description
 
   
 
   
 
    
GetClickRow
 
    
None
 
    
Row Data Object
 
    
Var rowData = $ ("# sl"). datagrid ("getClickRow ");
RowData:
{
"Col1": "column 1 data 1 ",
"Col2": "column 2 data 1"
}
 
   
 
   
 
    
GetSelectedRows
 
    
None
 
    
Row Data Object Data
 
    
Var rowDatas = $ ("# sl"). datagrid ("getSelectedRows ");
RowDatas:
[
{"Col1": "column 1 data 1", "col2": "column 2 data 1 "},
{"Col1": "column 1 Data 2", "col2": "column 2 Data 2 "}
]
 
   
 
   
 
    
LoadColumns
 
    
Column data
 
    
None
 
    
[{
Field: "ck ",
Style :""
},{
Title: "column 1 ",
Field: "col1 ",
Align: "center ",
Style: "width: 100px ;"
},{
Title: "column 2 ",
Field: "col2 ",
Align: "center ",
Style: "width: 100px ;"
},{
Title :"",
Field: "op ",
Align: "center ",
Style :"",
Html: "<input type = 'button 'value = 'edit 'onclick = 'a () '/> <input type = 'button' value = 'Delete 'onclick =' B () '/>"
}]
 
   
 
   
 
    
LoadDatas
 
    
Row data
 
    
None
 
    
[{
"Col1": "column 1 data 1 ",
"Col2": "column 2 data 1"
},{
"Col1": "column 1 Data 2 ",
"Col2": "column 2 Data 2"
}]