jqGrid Example

by Barry Schneider

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/free-jqgrid/4.8.0/css/ui.jqgrid.css">
<script src="//cdn.jsdelivr.net/free-jqgrid/4.8.0/js/jquery.jqgrid.min.js"></script>
<table id="list"></table>
<div id="pager"></div>
<a href="javascript:void(0)" id="m1">Get Selected id's</a>

JavaScript

var myData = [{
    id: 1,
    name: "one two three"
}, {
    id: 2,
    name: "two three"
}, {
    id: 3,
    name: "one three"
}, ];

$("#list").jqGrid({
    datatype: "local",
    colNames: ["Name"],
    colModel: [{
        name: "name",
        index: "name",
        searchoptions: {
            sopt: ["sIn", "bw", "cn", "lt", "le", "gt", "ge", "in", "ni"]
        }
    }],
    caption: "Viz Test",
    pager: '#pager',
    search: true,
    multiselect: true,
    data: myData,
    customSortOperations: {
        // the properties of customSortOperations defines new operations
        // used in postData.filters.rules items as op peroperty
        sIn: {
            operand: "sIN", // will be displayed in searching Toolbar for example
            text: "String IN", // will be shown in Searching Dialog or operation menu in searching toolbar
            title: "Type multiple values separated by space to search for one from the specified values",
            filter: function (options) {

                // The method will be called in case of filtering on the custom operation "nIn"
                // All parameters of the callback are properties of the only options parameter.
                // It has the following properties:
                //     item        - the item of data (exacly like in mydata array)
                //     cmName      - the name of the field by which need be filtered
                //     searchValue - the filtered value typed in the input field of the searching toolbar
                var fieldData = options.item[options.cmName];
                var words = options.searchValue.split(" ");
                
                
                $.each(words, function () {
                    var searchResults = fieldData.search(this)
                    //alert(searchResults);
                    if (searchResults < 0) {
                        fieldData = "";                        
                    }

                });

              ...