Home

Welcome to the Simple JSON Grid jQuery plugin. This plugin will create a HTML Table grid, by taking simple JSON Array as a input.

ColoumnSorting

true | false
This parameter enables the coloumn sorting functionality in the table. when TableEditable parameter is set to true, this parameter set to false irrespective of its previous value.

IndexColoumn

true | false
This parameter adds the index coloumn to the table.

CheckBoxColoumn

true | false
This parameter adds the checkbox coloumn to the table, and gives the functionality to select the rows. refer ShiftSelectFlag parameter and TableEditable parameter

TableEditable

true | false

ShiftSelectFlag

true | false

SearchEnableFlag

true | false

ThemePrefix

"ui" | "theme1"

JSONArrayObject

[
   { col1 : "data10", col2 : "data12", col3 : "data13", col4 : "data14" },
   { col1 : "data20", col2 : "data22", col3 : "data23", col4 : "data24" },
   { col1 : "data30", col2 : "data32", col3 : "data33", col4 : "data34" },
   { col1 : "data40", col2 : "data42", col3 : "data43", col4 : "data44" },
   { col1 : "data50", col2 : "data52", col3 : "data53", col4 : "data54" },
   { col1 : "data60", col2 : "data62", col3 : "data63", col4 : "data64" },
   { col1 : "data70", col2 : "data72", col3 : "data73", col4 : "data74" },
   { col1 : "data80", col2 : "data82", col3 : "data83", col4 : "data84" },
   { col1 : "data90", col2 : "data92", col3 : "data93", col4 : "data94" }
] 

MappingWithJson

And the sample mapping JSON Array of coloumns with the header and its properties.

[
   { MappedJsonVar : "col1", HeaderLabel : "Coloumn1Coloumn1", IsEditable : "false" },
   { MappedJsonVar : "col2", HeaderLabel : "Coloumn2Coloumn2", IsEditable : "false" },
   { MappedJsonVar : "col3", HeaderLabel : "Coloumn3Coloumn3", IsEditable : "false" },
   { MappedJsonVar : "col4", HeaderLabel : "Coloumn4Coloumn4", IsEditable : "false" } 
]

		DefaultDisplayRowCount : 10,
		PerPageRowCount : 100,
		MaxTableHeight : 360,
		EmptyIconClass : "",
		EmptyIconCalback : null,