Search jQuery

jQuery Forum

Screen name:
coder37

coder37's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Grid in jQuery based on Flex Grid
[2Replies]
- 29-Aug-2012 12:07 PM
- Forum: Developing jQuery Plugins
Below is the code which converts html table to jquery grid. I am using custom attributes like dataField, Sortable, ItemRendererFunction to display grid rows. Please copy the code to create test html file. I would appreciate feed back. Thanks!

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>FlexLikeGrid</title>

<style type="text/css">
body
{
font-family:Arial;
font-size:12px;
color:#000000;

}
.Rowgradient
{

background-color: #FFFFFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#C3CFD6)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #FFFFFF, #C3CFD6); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #FFFFFF, #C3CFD6); /* FF3.6 */
background-image:-ms-linear-gradient(top, #FFFFFF, #C3CFD6); /* IE10 */
background-image:-o-linear-gradient(top, #FFFFFF, #C3CFD6); /* Opera 11.10+ */
background-image: linear-gradient(top, #FFFFFF, #C3CFD6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF90,endColorstr=#C3CFD690); /* GradientType=0 : vertical, 1:horizontal IE6–IE9 */

}
.GridStyle{
border:solid 0px #8AABBD;
table-layout:fixed;
width:100%;
text-indent:0.5em;
}
.GridStyle td
{
white-space:nowrap;
overflow:hidden;
-ms-text-overflow:ellipsis;
text-overflow:ellipsis;
padding:3px 0px 3px 0px;
}
.GridStyle TR.EvenRow
{
background-color:#FFFFFF;
}
.GridStyle TR.EvenRow:hover
{
background-color: #FFFFE0;/*#FFFACD;*/
}
.GridStyle TR.OddRow
{
background-color:#E4E8EB;
}
.GridStyle TR.OddRow:hover
{
background-color:#FFFFE0; /*#FFFACD;*/
}
.GridStyle TR.GridHeaderStyle
{
font-weight:bold;
font-size:11px;
}
.GridStyle TR.GridHeaderStyle td.Sortable
{
background-image : url("../images/sort.png");
background-position:right;
background-repeat:no-repeat;

}
.GridStyle TR.GridHeaderStyle td.Sortable:hover
{
background-color:#C3CFD6;
color:#444444;
}

input[type='text']
{
border : 1px solid silver;
background-color:#FFFFFF;
}
input[type='text']:focus
{
background-color: #ffa;/*#EFEFEF;*/
}
input[type='text']:hover
{
background-color: #ffa; /*#EFEFEF;*/
}
input[type='text']:disabled
{
background-color: #EEEEEE; /*#EFEFEF;*/
}
input[type='text']:disabled:hover
{
background-color: #EEEEEE; /*#EFEFEF;*/
}

a
{
color:#002EB8;
text-decoration:underline;
}
a:hover
{
color:#002EB8;
text-decoration:none;
}
a:visited
{
color:#002EB8;
text-decoration:underline;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript">/********** SIMPLE GRID **********************/
(function ($) {

var SmartGridSettings ;

$.fn.ConvertToSmartGrid = function (arrData, settings) {
SmartGridSettings = settings;
var tgtGrid = this;
var tgtPrnt = tgtGrid.parent();
var prntTag = tgtPrnt.prop("tagName");

if (prntTag != "DIV") {
alert("Grid needs to be inside block element div");
return;
}

var tblWdth; var hdrClss; var evenRowClss; var oddRowClss;
var tblHt; var showGridLines

tblWdth = tgtGrid.outerWidth();
tblHt = tgtGrid.css("height");

evenRowClss = tgtGrid.attr("evenRowClass");
oddRowClss = tgtGrid.attr("oddRowClass");
hdrClss = tgtGrid.attr("headerClass");
tblClss = tgtGrid.attr("class");
showGridLines = tgtGrid.attr("showGridLines") == "true" ? true : false;

hdrClss = typeof (hdrClss) == "undefined" ? "GridHeaderStyle" : "GridHeaderStyle " + hdrClss;
evenRowClss = typeof (evenRowClss) == "undefined" ? "EvenRow" : evenRowClss;
oddRowClss = typeof (oddRowClss) == "undefined" ? "OddRow" : oddRowClss;
tblClss = typeof (tblClss) == "undefined" ? "GridStyle" : "GridStyle " + tblClss;

var arrTrs = tgtGrid.find('tr');
var gridTr = arrTrs[0];
gridTr = $(gridTr);
var gridTds = gridTr.children(['td']);

//creating header grid
var hdrTblTr = document.createElement("tr");
hdrTblTr = $(hdrTblTr);
hdrTblTr.addClass(hdrClss);

var SortData = function(event){
event.data.JqTBody = $("#_t_b_dy");
GridHandler.SortTable(event);
event.stopImmediatePropagation();
};

var tdWidth;
var tdStyle;
var ntd;
var srtble;


//creating header row and td
gridTds.each(function (idx) {
tdWidth = $(this).attr("width");
tdStyle = $(this).attr("style");
ntd = document.createElement("td");
ntd = $(ntd);
typeof (tdWidth) != "undefined" ? ntd.attr("width", tdWidth) : "";
showGridLines == true ? ntd.css("border-right", "solid 1px silver") : "";

ntd.text($(this).attr("headerText"));
ntd.css("padding", "3px 0px 3px 0px");

srtble = typeof($(this).attr("Sortable"))
srtble != "undefined" ? ntd.addClass("Sortable") : "";
if(srtble != "undefined")
{
var evData =new Object();
// evData.jqTBody = ntd.parent().parent();
evData.ColIdx = idx;
evData.EvenRowClss = evenRowClss;
evData.OddRowClss = oddRowClss;
ntd.bind("click", evData, SortData);
}

hdrTblTr.append(ntd);
});

ntd = document.createElement("td");
$(ntd).attr("width", "16px");
hdrTblTr.append($(ntd));

var hdrTbl = document.createElement("table");
var jhdrTbl = $(hdrTbl);
jhdrTbl.addClass(tblClss);



jhdrTbl.attr("cellpadding", "2");
jhdrTbl.attr("cellspacing", "0");
jhdrTbl.append(hdrTblTr);

var hdrDiv = document.createElement("div");
$(hdrDiv).append(hdrTbl);

tgtGrid.css("display", "none");

tgtPrnt.width(tblWdth); // setting parent width to width of grid width

tgtPrnt.append($(hdrDiv)); // adding header

//********starting building grid Rows*************

var getPropertyValue = function (dataField, data) {
var retVal;
var arrDataField;
arrDataField = dataField.split(".");

if (arrDataField.length > 1) {
for (var x in arrDataField) {
data = data[arrDataField[x]];
}
retVal = data;
}
else {
retVal = data[dataField];
}

return retVal;
};

var ctntTbl = document.createElement("table");
var tbody = document.createElement("tbody");
$(tbody).attr("id", "_t_b_dy");

ctntTbl = $(ctntTbl);
ctntTbl.append(tbody);
ctntTbl.addClass(tblClss);
ctntTbl.attr("cellpadding", "2");
ctntTbl.attr("cellspacing", "0");

var PopulateGridContent = function (arrData) {
var ctntTr; var data; var propVal; var ctntTd; var lblFn;
var dataField; var iRend; var thsObj;
var elem; var rendFn;
for (var i in arrData) {
data = arrData[i];
ctntTr = document.createElement("tr");
ctntTr = $(ctntTr);
i % 2 == 0 ? ctntTr.addClass(oddRowClss) : ctntTr.addClass(evenRowClss);

gridTds.each(function (idx) {
thsObj = $(this);
dataField = thsObj.attr("dataField");
propVal = getPropertyValue(dataField, data);

ctntTd = document.createElement("td");
ctntTd = $(ctntTd)
tdWidth = thsObj.attr("width");
tdStyle = thsObj.attr("style");
typeof (tdWidth) != "undefined" ? ctntTd.attr("width", tdWidth) : "";
typeof(tdStyle) != "undefined" ? ctntTd.attr("style", tdStyle) : "";

showGridLines == true ? ctntTd.css({
"border-right" : "solid 1px silver",
"border-bottom" : "solid 1px silver",
}) : "";

rendFn = thsObj.attr("itemRendererFunction");
typeof(rendFn) != "undefined" && rendFn != "" ? window[rendFn](data, ctntTd, idx) : ctntTd.text(propVal);

ctntTr.append(ctntTd);
});

ctntTbl.append(ctntTr);


}
};

PopulateGridContent(arrData);
var ctntDiv = document.createElement("div");
ctntDiv = $(ctntDiv);
ctntDiv.css({
"height": tblHt,
"overflow-y": "scroll",
"overflow-x": "auto"
});

ctntDiv.append(ctntTbl);

tgtPrnt.append(ctntDiv); // adding content

if (settings.ShowPagination) {
var pgDiv = document.createElement("div");
pgDiv = $(pgDiv);
pgDiv.css({
"position": "relative",
"height": "25px",
"border": "solid 0px red"
});

tgtPrnt.append(pgDiv);
if(SmartGridSettings.PaginationType == "AppendToExistingRecord")
{
var spn = document.createElement("span");
spn = $(spn);
spn.css({
"position" : "absolute",
"right" : "2px"
});

spn.append("<label>Total Record: " + SmartGridSettings.MaxRecord + "</label>" );

var ancr = document.createElement("a");
ancr = $(ancr);
ancr.attr("href", "#");
ancr.css("margin-left", "15px");
ancr.text("Get Next " + SmartGridSettings.RecordsPerPage + " Records");
ancr.bind("click",SmartGridSettings.GetMoreFn);
spn.append(ancr);

pgDiv.append(spn);


}
else
{
pgDiv.GetPaginationUI(SmartGridSettings.MaxRecord, SmartGridSettings.RecordsPerPage, SmartGridSettings.GetMoreFn, 'dropdown', "0-" + SmartGridSettings.RecordsPerPage);
}

}

tgtPrnt.css("border", "solid 1px silver");

this.refresh = function (arrData) {
if(SmartGridSettings.PaginationType != "AppendToExistingRecord")
{
$("#_t_b_dy").empty();
}
PopulateGridContent(arrData);
}

return this;
};
})(jQuery);

//*************** Simple Data Grid Ends********************

var GridHandler = {
SortByColIdx: null,

SortDirection: null,

AscendDataCompareFunction: function (jqTrA, jqTrB) {
var a = jqTrA.text().toLowerCase();
var b = jqTrB.text().toLowerCase();

var aDtMillsec = Date.parse(a)
if (isNaN(aDtMillsec) == false) {
a = aDtMillsec;

b = Date.parse(b);
}
if (isNaN(parseInt(a))) {

if (a > b) {
return -1
}
if (a < b) {
return 1
}

return 0;
}
else {
return a - b;
}
},

DescendDataCompareFunction: function (jqTrA, jqTrB) {

var a = jqTrA.text().toLowerCase();
var b = jqTrB.text().toLowerCase();

var aDtMillsec = Date.parse(a)
if (isNaN(aDtMillsec) == false) {
a = aDtMillsec;

b = Date.parse(b);
}
if (isNaN(parseInt(a))) {
if (a > b) {
return 1
}
if (a < b) {
return -1
}
return 0;
}
else {
return b - a;
}
},

SortTable: function (event) {

var jqTBody = event.data.JqTBody;
var colIdx = event.data.ColIdx;

GridHandler.SortByColIdx = colIdx;

var arrTrs = jqTBody.find("TR");

var arrTds = new Array();
var ntd;
var len = arrTrs.length;

for (var i = 0; i < len; i++) {
$(arrTrs[i]).removeAttr("class");
ntd = $(arrTrs[i]).find("td").get(colIdx);

$(ntd).attr("idx", i);

arrTds.push($(ntd));
}

if (GridHandler.SortDirection == null || GridHandler.SortDirection == "D") {
GridHandler.SortDirection = "A"
arrTds.sort(GridHandler.AscendDataCompareFunction);
}
else {
GridHandler.SortDirection = "D"
arrTds.sort(GridHandler.DescendDataCompareFunction);
}

var oRowCls = event.data.EvenRowClss;
var eRowClss = event.data.OddRowClss;
jqTBody.empty();

$(arrTds).each(function (idx) {
ix = $(this).attr("idx");
if (idx % 2 == 0) {
$(arrTrs[ix]).addClass(eRowClss);
}
else {
$(arrTrs[ix]).addClass(oRowCls);

}
jqTBody.append(arrTrs[ix]);
});

}
};

/********** SIMPLE GRID ENDS **********************/

(function ($) {
$.fn.GetPaginationUI = function (totalRecCount,
noRecPerPage,
onPageSelectionHandler,
type,
selectedRangeVal) {

if($.isEmptyObject($("#_pge_div")) == false)
{
$("#_pge_div").remove();
}
var str = new StringBuilder();
str.append("<div id='_pge_div' style='position:absolute;top:2px;" +
"border:solid 0px red;" +
"right:15px;'>");

str.append("<input type='hidden' name='sRange' id='sRange' value='' />");
var ctr = Math.ceil(totalRecCount / noRecPerPage);

var strNum = 0;
var endNum = noRecPerPage;

str.append("<span style='margin-right:30px;'><b>Total Records:</b> " + totalRecCount + "</span>");

str.append("<span style='margin-right:50px'>" +
"<input type='text' onkeyup=\"PaginationValidation('_recsPerPage')\" id='_recsPerPage' name='_recsPerPage' size='4' style='text-align:right' value='" + noRecPerPage + "' /> <b>records per page</b>" +
"</span>");

if (type == "numbers") {
for (var i = 0; i < ctr; i++) {
str.append("<span style='margin-left:2px;padding:0px 2px 0px 2px;" +
"text-decoration:underline;" +
"cursor:pointer;" +
"font-weight:bold;" +
"margin-right:4px;" +
"border:solid 1px #999999' onclick='" + onPageSelectionHandler + "(" + strNum + "," + endNum + ")'>" + (i + 1) + "</span>")
strNum = endNum;
endNum = endNum + noRecPerPage;
}
}
else if (type == "dropdown") {
var rangeval;
var strSelected = "";

var selectElem = document.createElement("SELECT");
$(selectElem).attr("id", "pdwn");

for (var i = 0; i < ctr; i++) {

rangeval = strNum.toString() + "-" + endNum.toString();

if (rangeval == selectedRangeVal) {
strSelected = " SELECTED ";
}
else {
strSelected = "";
}

$(selectElem).append("<option " + strSelected + " value ='" + rangeval + "'>" + (i + 1) + "</option>");

strNum = endNum;
endNum = parseInt(endNum) + parseInt(noRecPerPage);

}
str.append("show page ");

str.append(selectElem.outerHTML);
str.append(" of " + i);
}
str.append("</div>");

$(this).append(str.toString());
$("#pdwn").bind("change", onPageSelectionHandler);
str.clear();
};
})(jQuery);

function StringBuilder(value)
{
this.strings = new Array("");
this.append(value);
}

// Appends the given value to the end of this instance.

StringBuilder.prototype.append = function (value)
{
if (value)
{
this.strings.push(value);
}
}

// Clears the string buffer

StringBuilder.prototype.clear = function ()
{
this.strings.length = 1;
}

// Converts this instance to a String.

StringBuilder.prototype.toString = function ()
{
return this.strings.join("");

}</script>
<script language="javascript" type="text/javascript">

var sGrid;

function CreateMockData() {
var GridDP = new Array();
var obj;
for (var i = 0; i < 5; i++) {

obj = new Object();
obj.Person = {
FirstName: "First Name" + i,
Address: {
City: "Boston" + i
}
};
obj.LastName = "Last Name " + i;
obj.Title = "Sr.Software Engg";
obj.Address1 = "Address1";
obj.Address2 = "Address2";
obj.MobilePhone = "555 555 5 55"
obj.LanPhone = "22 2222 2222";

GridDP.push(obj);

};

return GridDP;
}

function LoadData() {

SmartGridSettings = new Object();
SmartGridSettings.MaxRecord = 100;
SmartGridSettings.RecordsPerPage = 10;
SmartGridSettings.GetMoreFn = GetMoreFunction;
SmartGridSettings.ShowPagination = true;
SmartGridSettings.PaginationType = ""; // use 'AppendToExistingRecord' if you want to keep appending record to existing result set when click GetMoreFunction is called

var GridDP = CreateMockData();
sGrid = $("#mGrid").ConvertToSmartGrid(GridDP, SmartGridSettings);
}

function MyItemRendererFunction(data,colTd, colIdx){

if (data.Person.FirstName == "First Name0")
{
colTd.append("<input type='text'style='width:90%;padding:0 0 0 0' value='" + data.Person["FirstName"] + "' />");
}
else{
colTd.text(data.Person["FirstName"]);
}
}

function GetMoreFunction() {
var GridDP = new Array();
var obj;
for (var i = 0; i < 5; i++) {
obj = new Object();
obj.Person = {
FirstName: "New FirstName" + i,
Address: {
City: "Bangkok" + i
}
};
obj.LastName = "Last Name " + i;
obj.Title = "CFA";
obj.Address1 = "Address1";
obj.Address2 = "Address2";
obj.MobilePhone = "555 555 5 55"
obj.LanPhone = "22 2222 2222";

GridDP.push(obj);

};

// call .refresh method if you want to refresh data
sGrid.refresh(GridDP);
}


</script>
</head>
<body onload="LoadData()">
<div id='mgridDiv' style="border:solid 1px silver;">
<table id = "mGrid"
showGridLines = "true"
contentEvenRowClass="EvenRow"
contentOddRowClass = "OddRow"
headerClass="Rowgradient"
style="width:700px;height:600px;display:none;">
<tr>

<td id="fname"
width="120px"
Sortable
itemRendererFunction = "MyItemRendererFunction"
headerText = "First Name"
dataField = "Person.FirstName" >

</td>
<td headerText = "City"
Sortable
dataField = "Person.Address.City">
</td>

<td headerText = "Title"
dataField = "Title">
</td>
<td headerText = "Address1"
dataField = "Address1">

</td>
<td headerText = "Address2"
dataField = "Address2">

</td>
<td headerText = "Mobile Phone"
dataField = "MobilePhone">
</td>
<td headerText = "LAN Phone"
dataField = "LanPhone">

</td>
</tr>
</table>
</div>

</body>
</html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend