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">
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<h1>Before</h1>

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

CSS

html {
    font: 12px Tahoma;
}
h1 {
    font-size: 1.5em
}
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
}
#grid .blue-tag, .before .blue-tag {
    background: #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
        }, ]
    }];

    function getTagCellContents(a) {
        var domitems=$("#jqgrid-tag-list-item").tmpl({tags: a});
        return domitems.html();
    }
    $("#grid").jqGrid({
       ...