working jqGrid Example
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.filter.css">
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.filter.js"></script>
<select name="DdlEstado" multiple="multiple" >
<option value="Aguascalientes">Aguascalientes</option>
<option value="Baja_California">Baja California</option>
<option value="Baja_California Sur">Baja California Sur</option>
<option value="Campeche">Campeche</option>
<option value="Coahuila_de_Zaragoza">Coahuila de Zaragoza</option>
<option value="Colima">Colima</option>
<option value="Chiapas">Chiapas</option>
<option value="Chihuahua">Chihuahua</option>
<option value="Distrito_Federal">Distrito Federal</option>
<option value="Durango">Durango</option>
<option value="Guanajuato">Guanajuato</option>
<option value="Guerrero">Guerrero</option>
<option value="Hidalgo">Hidalgo</option>
<option value="Jalisco">Jalisco</option>
<option value="México">México</option>
<option value="Michoacán_de_Ocampo">Michoacán de Ocampo</option>
<option value="Morelos">Morelos</option>
<option value="Nayarit">Nayarit</option>
<option value="Nuevo León">Nuevo León</option>
<option value="Oaxaca">Oaxaca</option>
<option value="Puebla">Puebla</option>
<option value="Querétaro">Querétaro</option>
<option...
CSS
.cvteste {
background-color: green !important;
}
JavaScript
var data = [[1, "Aguascalientes", "", "02200220", "OPEN"],
[2, "Baja California", "", "77733337", "ENTERED"],
[3, "Baja California Sur", "", "77733337", "ENTERED"],
[4, "Campeche", "", "77733337", "ENTERED"],
[5, "Puebla de Zaragoza", "", "77733337", "ENTERED"],
[6, "Colima", "", "77733337", "ENTERED"],
[7, "Chiapas", "", "77733337", "ENTERED"],
[8, "Chihuahua", "", "77733337", "ENTERED"],
[9, "Distrito Federal", "", "77733337", "ENTERED"],
[10, "Durango", "", "77733337", "ENTERED"],
[11, "Guanajuato", "", "77733337", "ENTERED"],
[12, "Guerrero", "", "77733337", "ENTERED"],
[13, "Hidalgo", "", "77733337", "ENTERED"],
[14, "Jalisco", "", "77733337", "ENTERED"],
[15, "México", "", "77733337", "ENTERED"],
[16, "Michoacán de Ocampo", "", "77733337", "ENTERED"],
[17, "Morelos", "", "77733337", "ENTERED"],
[18, "Nayarit", "", "77733337", "ENTERED"],
[19, "Nuevo León", "", "77733337", "ENTERED"],
[20, "Oaxaca", "", "77733337", "ENTERED"],
[21, "Puebla", "", "77733337", "ENTERED"],
[22, "Querétaro", "", "77733337", "ENTERED"],
[23, "Quintana Roo", "", "77733337", "ENTERED"],
[24, "San Luis Potosí", "", "77733337", "ENTERED"],
[25, "Sinaloa", "", "77733337", "ENTERED"],
[26, "Sonora", "", "77733337", "ENTERED"],
[27, "Tabasco", "", "77733337", "ENTERED"],
[28, "Tamaulipas", "", "77733337", "ENTERED"],
[29, "Tlaxcala", "", "77733337", "ENTERED"],
[30, "Veracruz de Ignacio de la Llave", "", "77733337", "ENTERED"],
[31, "Yucatán", "", "77733337", "ENTERED"],
[32, "Zacatecas", "", "77733337", "ENTERED"]];
$("#grid").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Ciudad', 'Blank', 'Number', 'Status'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"},
{
name: 'ciudad',
index: 'ciudad',
width: 300,
sorttype: "date"},
{
name: 'blank',
index:...