API tools faq
paste
Advertisement
Guest User

jqgrid code

a guest
Jun 15th, 2014
364
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>http://stackoverflow.com/q/8900040/315935</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7.     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css" />
  8.     <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
  9.     <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/plugin/ui.multiselect.css" />
  10.     <style type="text/css">
  11.         html, body { font-size: 75%; }
  12.     </style>
  13.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  14.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
  15.     <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/plugin/ui.multiselect.js"></script>
  16.     <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
  17.     <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
  18.  
  19.     <script type="text/javascript">
  20.     //<![CDATA[
  21.        /*global $ */
  22.        /*jslint devel: true, browser: true */
  23.        $(document).ready(function () {
  24.            'use strict';
  25.            var mydata = [
  26.                    { id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
  27.                    { id: "2",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
  28.                    { id: "3",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
  29.                    { id: "4",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
  30.                    { id: "5",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
  31.                    { id: "6",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
  32.                    { id: "7",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
  33.                    { id: "8",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
  34.                    { id: "9",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
  35.                    { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
  36.                    { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
  37.                    { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
  38.                ],
  39.                $grid = $("#list"),
  40.                initDateEdit = function (elem) {
  41.                    setTimeout(function () {
  42.                        $(elem).datepicker({
  43.                            dateFormat: 'dd-M-yy',
  44.                            autoSize: true,
  45.                            changeYear: true,
  46.                            changeMonth: true,
  47.                            showButtonPanel: true,
  48.                            showWeek: true
  49.                        });
  50.                    }, 100);
  51.                },
  52.                initDateSearch = function (elem) {
  53.                    setTimeout(function () {
  54.                        $(elem).datepicker({
  55.                            dateFormat: 'dd-M-yy',
  56.                            autoSize: true,
  57.                            changeYear: true,
  58.                            changeMonth: true,
  59.                            showWeek: true,
  60.                            showButtonPanel: true
  61.                        });
  62.                    }, 100);
  63.                },
  64.                numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number', editable: true,
  65.                    searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }};
  66.        
  67.            $grid.jqGrid({
  68.                datatype: 'local',
  69.                data: mydata,
  70.                colNames: [/*'Inv No', */'Client', 'Date', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
  71.                colModel: [
  72.                    //{ name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int', searchoptions: { sopt: ['eq', 'ne']} },
  73.                    { name: 'name', index: 'name', editable: true, width: 70, editrules: { required: true},
  74.                        editoptions: { dataInit: function (elem) { $(elem).addClass('ui-state-highlight'); }}},
  75.                    { name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
  76.                        formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, editable: true, datefmt: 'd-M-Y',
  77.                        editoptions: { dataInit: initDateEdit },
  78.                        searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDateSearch } },
  79.                    { name: 'amount', index: 'amount', width: 80, template: numberTemplate },
  80.                    { name: 'tax', index: 'tax', width: 55, template: numberTemplate,
  81.                        editoptions: { dataInit: function (elem) { $(elem).addClass('ui-state-error'); }} },
  82.                    { name: 'total', index: 'total', width: 65, template: numberTemplate },
  83.                    {name: 'closed', index: 'closed', width: 75, align: 'center', editable: true, formatter: 'checkbox',
  84.                        edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'},
  85.                        stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;true:Yes;false:No' } },
  86.                    {name: 'ship_via', index: 'ship_via', width: 105, align: 'center', editable: true, formatter: 'select',
  87.                        edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'IN' },
  88.                        stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':Any;FE:FedEx;TN:TNT;IN:IN' } },
  89.                    { name: 'note', index: 'note', width: 60, sortable: false, editable: true, edittype: 'textarea' }
  90.                ],
  91.                rowNum: 10,
  92.                rowList: [5, 10, 20],
  93.                pager: '#pager',
  94.                gridview: true,
  95.                rownumbers: true,
  96.                autoencode: true,
  97.                ignoreCase: true,
  98.                sortname: 'invdate',
  99.                viewrecords: true,
  100.                sortorder: 'desc',
  101.                height: '100%',
  102.                caption: 'Demonstrate how to use the columnChooser'
  103.            });
  104.            $grid.jqGrid('navGrid', '#pager', {refreshstate: 'current', add: false, edit: false, del: false});
  105.            $.extend(true, $.ui.multiselect, {
  106.                locale: {
  107.                    addAll: 'Make all visible',
  108.                    removeAll: 'Hidde All',
  109.                    itemsCount: 'Avlialble Columns'
  110.                }
  111.            });
  112.            //$.extend(true, $.jgrid.col, {
  113.            //    width: 500,
  114.            //    msel_opts: {dividerLocation: 0.5}
  115.            //});
  116.            $grid.jqGrid('navButtonAdd', '#pager', {
  117.                caption: "",
  118.                buttonicon: "ui-icon-calculator",
  119.                title: "Choose columns",
  120.                onClickButton: function () {
  121.                    $(this).jqGrid('columnChooser',
  122.                        {width: 550, msel_opts: {dividerLocation: 0.5}});
  123.                    //$(this).jqGrid('columnChooser');
  124.                    $("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>div.actions')
  125.                        .prepend('<label style="float:left;position:relative;margin-left:0.6em;top:0.6em">Search:</label>');
  126.                }
  127.            });
  128.        });
  129.    //]]>
  130.     </script>
  131. </head>
  132. <body>
  133.     <table id="list"><tr><td/></tr></table>
  134.     <div id="pager"></div>
  135. </body>
  136. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!