working jqGrid Example

by TheSneak

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<table class="before">
    <thead>
        <tr>
            <th>
                <input type="checkbox">
            </th>
            <th>File Size</th>
            <th>Status</th>
            <th>User</th>
            <th>Tags</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>
                <input type="checkbox">
            </td>
            <td>489985037</td>
            <td>Unsure</td>
            <td>[email protected]</td>
            <td>
                <ul class="ui-widget">
                    <li class="ui-widget-content ui-state-default ui-corner-all"> <span style="float: left;">Compact Disc</span><span style="margin-right: 0; cursor: pointer;" class="icon_text ui-icon-white ui-icon-close"></span>
                    </li>
                    <li class="ui-widget-content ui-state-default ui-corner-all"> <span style="float: left;">Solid</span><span style="margin-right: 0; cursor: pointer;" class="icon_text ui-icon-white ui-icon-close"></span>
                    </li>
                    <li class="blue-tag ui-widget-content ui-state-default ui-corner-all"> <span style="float: left;">Bee</span><span style="margin-right: 0; cursor: pointer;" class="icon_text ui-icon-white ui-icon-close"></span>
                    </li>
                </ul>
            </td>
        </tr>
        <tr class="even">
            <td>
                <input type="checkbox">
            </td>
            <td>296519841</td>
            <td>Unsure</td>
            <td>[email protected]</td>
            <td>
                <ul class="ui-widget">
                    <li...

CSS

html {
    font: 12px Tahoma;
}
ul {
    width:300px
}
li {
    float: left;
}
li.ui-widget-content {
    margin-right: 4px;
}
.ui-icon-white {
    background-image: url("//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/le-frog/images/ui-icons_ffffff_256x240.png");
    height: 16px;
    padding: 0 !important;
    width: 16px;
    float: left;
    background-position: -80px -128px;
}
table.before {
    border: 1px solid #000;
}
table.before td, table.before th {
    border: 1px solid #aaa;
    padding: 2px 10px
}
table.before li.blue-tag {
    background: url("images/ui-bg_glass_75_0a92ff_1x400.png") repeat-x scroll 50% 50% #0A92FF;
    color: #FFFFFF;
}

JavaScript

$(function () {
    'use strict';
var mydata = [{
		filesize : 489985037,
		status : "Unsure",
		user : "[email protected]",
		tags : [{
				value : "Compact Disc",
				isNew : false
			}, {
				value : "Solid",
				isNew : false
			}, {
				value : "Bee",
				isNew : true
			}
		]
	}, {
		filesize : 296519841,
		status : "Unsure",
		user : "[email protected]",
		tags : [{
				value : "Car",
				isNew : false
			}, {
				value : "Roof",
				isNew : false
			}, {
				value : "Skeleton",
				isNew : true
			}, {
				value : "Sun",
				isNew : true
			}
		]
	}, {
		filesize : 1200335622,
		status : "Declined",
		user : "[email protected]",
		tags : [{
				value : "Planet",
				isNew : false
			}, {
				value : "Hammer",
				isNew : false
			}, {
				value : "Software",
				isNew : true
			}, {
				value : "Torch",
				isNew : true
			}
		]
	}, {
		filesize : 1982968458,
		status : "Unsure",
		user : "[email protected]",
		tags : [{
				value : "Church",
				isNew : false
			}, {
				value : "Horse",
				isNew : false
			}, {
				value : "Game",
				isNew : true
			},
		]
	}, {
		filesize : 1061607216,
		status : "Declined",
		user : "[email protected]",
		tags : [{
				value : "Finger",
				isNew : false
			}, {
				value : "Staircase",
				isNew : false
			}, {
				value : "Pants",
				isNew : true
			}, {
				value : "DVD",
				isNew : true
			},
		]
	}
];


    $("#grid").jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ['File Size', 'Status', 'User', 'Tags'],
        colModel: [{
            name: 'filesize',
            width: 80,
            sorttype: "int"
        }, {
            name: 'status',
            width: 70
        }, {
            name: 'user',
            width: 150
        }, {
            name: 'tags',
            width: 200
        }],
        multiselect: true,
        height: "auto",
    });
});