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="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">
    ...

CSS

html{
    font: 12px Tahoma;
}
ul{
    width:1000px
}
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
}

JavaScript

$(function () {
    'use strict';
    var mydata = [
            {
	filesize : 489985037,
	status : "Unsure",
	user : "[email protected]",
	tags : [
		"Compact Disc",
		"Solid",
		"Bee"]
} ];
    
    $("#grid").jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ['File Size', 'Status', 'User', 'Tags'],
        colModel: [
            { name: 'filesize', width: 60, sorttype: "int" },
            { name: 'status', width: 90 },
            { name: 'user', width: 90 },
            { name: 'tags', width: 80 }
        ],
        caption: "Stack Overflow Example",
        height: "auto",
        multiselect: true,
        beforeSelectRow: function(rowid, e) {
            var $this = $(this), rows = this.rows,
                // get id of the previous selected row
                startId = $this.jqGrid('getGridParam', 'selrow'),
                startRow, endRow, iStart, iEnd, i, rowidIndex;

            if (!e.ctrlKey && !e.shiftKey) {
                $this.jqGrid('resetSelection');
            } else if (startId && e.shiftKey) {
                $this.jqGrid('resetSelection');

                // get DOM elements of the previous selected and
                // the currect selected rows
                startRow = rows.namedItem(startId);
                endRow = rows.namedItem(rowid);
                if (startRow && endRow) {
                    // get min and max from the indexes of the previous selected
                    // and the currect selected rows 
                    iStart = Math.min(startRow.rowIndex, endRow.rowIndex);
                    rowidIndex = endRow.rowIndex;
                    iEnd = Math.max(startRow.rowIndex, rowidIndex);
                    for (i = iStart; i <= iEnd; i++) {
                        // the row with rowid will be selected by
                        // jqGrid. So we don't need select it
                        if (i != rowidIndex) {
                            $this.jqGrid('setSelection', rows[i].id,...