Scribd
Upload
331 views

Jqgrid

The document defines code for initializing a jQuery grid widget with local data. It loads jQuery and jQuery UI libraries, defines sample data, initializes the grid with the data and various column configurations, and adds buttons for navigation and choosing columns.

Uploaded by

kiranjujkumar
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
331 views

Jqgrid

The document defines code for initializing a jQuery grid widget with local data. It loads jQuery and jQuery UI libraries, defines sample data, initializes the grid with the data and various column configurations, and adds buttons for navigation and choosing columns.

Uploaded by

kiranjujkumar
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>http://stackoverflow.

com/q/8900040/315935</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/lib s/jqueryui/1.8.17/themes/redmond/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/ jquery.jqGrid-4.3.1/css/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/ jquery.jqGrid-4.3.1/plugin/ui.multiselect.css" /> <style type="text/css"> html, body { font-size: 75%; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryu i/1.8.17/jquery-ui.min.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jq Grid-4.3.1/plugin/ui.multiselect.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jq Grid-4.3.1/js/i18n/grid.locale-en.js"></script> <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jq Grid-4.3.1/js/jquery.jqGrid.src.js"></script> <script type="text/javascript"> //<![CDATA[ /*global $ */ /*jslint devel: true, browser: true */ $(document).ready(function () { 'use strict'; var mydata = [ { id: "91", invdate: "2007-10-01", name: "test", note: "n ote", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "2 10.00" }, { id: "92", invdate: "2007-10-02", name: "test2", note: "n ote2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "3 20.00" }, { id: "93", invdate: "2007-09-01", name: "test3", note: "n ote3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "4 30.00" }, { id: "94", invdate: "2007-10-04", name: "test4", note: "n ote4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "2 10.00" }, { id: "95", invdate: "2007-10-31", name: "test5", note: "n ote5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "3 20.00" }, { id: "96", invdate: "2007-09-06", name: "test6", note: "n ote6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "4 30.00" }, { id: "97", invdate: "2007-10-04", name: "test7", note: "n ote7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "2 10.00" }, { id: "98", invdate: "2007-10-03", name: "test8", note: "n ote8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "3 20.00" }, { id: "99", invdate: "2007-09-01", name: "test9", note: "n ote9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "4

30.00" }, { id: "910", invdate: "2007-09-08", name: "test10", note: ote10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: 30.00" }, { id: "911", invdate: "2007-09-08", name: "test11", note: ote11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: 30.00" }, { id: "912", invdate: "2007-09-10", name: "test12", note: ote12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: 30.00" } ], $grid = $("#list"), "n "5 "n "5 "n "5

initDateEdit = function (elem) { setTimeout(function () { $(elem).datepicker({ dateFormat: 'dd-M-yy', autoSize: true, changeYear: true, changeMonth: true, showButtonPanel: true, showWeek: true }); }, 100); }, initDateSearch = function (elem) { setTimeout(function () { $(elem).datepicker({ dateFormat: 'dd-M-yy', autoSize: true, changeYear: true, changeMonth: true, showWeek: true, showButtonPanel: true }); }, 100); }, numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number', editable: true, searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni'] }}; $grid.jqGrid({ datatype: 'local', data: mydata, colNames: [/*'Inv No', */'Client', 'Date', 'Amount', 'Tax', 'Tot al', 'Closed', 'Shipped via', 'Notes'], colModel: [ //{ name: 'id', index: 'id', width: 70, align: 'center', sor ttype: 'int', searchoptions: { sopt: ['eq', 'ne']} }, { name: 'name', index: 'name', editable: true, width: 70, ed itrules: { required: true}, editoptions: { dataInit: function (elem) { $(elem).addCl ass('ui-state-highlight'); }}}, { name: 'invdate', index: 'invdate', width: 80, align: 'cent er', sorttype: 'date', formatter: 'date', formatoptions: { newformat: 'd-M-Y' } , editable: true, datefmt: 'd-M-Y', editoptions: { dataInit: initDateEdit }, searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'g

e'], dataInit: initDateSearch } }, { name: 'amount', index: 'amount', width: 80, template: numb erTemplate }, { name: 'tax', index: 'tax', width: 55, template: numberTemp late, editoptions: { dataInit: function (elem) { $(elem).addCl ass('ui-state-error'); }} }, { name: 'total', index: 'total', width: 65, template: number Template }, {name: 'closed', index: 'closed', width: 75, align: 'center' , editable: true, formatter: 'checkbox', edittype: 'checkbox', editoptions: {value: 'Yes:No', def aultValue: 'Yes'}, stype: 'select', searchoptions: { sopt: ['eq', 'ne'], va lue: ':Any;true:Yes;false:No' } }, {name: 'ship_via', index: 'ship_via', width: 105, align: 'ce nter', editable: true, formatter: 'select', edittype: 'select', editoptions: { value: 'FE:FedEx;TN:T NT;IN:Intim', defaultValue: 'IN' }, stype: 'select', searchoptions: { sopt: ['eq', 'ne'], va lue: ':Any;FE:FedEx;TN:TNT;IN:IN' } }, { name: 'note', index: 'note', width: 60, sortable: false, e ditable: true, edittype: 'textarea' } ], rowNum: 10, rowList: [5, 10, 20], pager: '#pager', gridview: true, rownumbers: true, autoencode: true, ignoreCase: true, sortname: 'invdate', viewrecords: true, sortorder: 'desc', // height: '400', caption: 'Demonstrate how to use the columnChooser', ondblClickRow: function(){ var row_id = $("#list").getGridParam('selrow'); //alert(row_id); $('#MinVal').val(row_id); $('#dialog-modal-add').show(); $(function() { $("#dialog-modal-add").dialog({ width: ($('#FrmGrid_list').width() + 700), height: ($('#FrmGrid_list').height() + 3 00), modal: true }); }); // ; window.open("http://www.w3schools.com") } }); $grid.jqGrid('navGrid', '#pager', {refreshstate: 'current', add: fal se, edit: false, del: false}); $.extend(true, $.ui.multiselect, { locale: { addAll: 'Make all visible',

removeAll: 'Hidde All', itemsCount: 'Avlialble Columns' } }); //$.extend(true, $.jgrid.col, { // width: 500, // msel_opts: {dividerLocation: 0.5} //}); $grid.jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "Choose columns", onClickButton: function () { $(this).jqGrid('columnChooser', {width: 550, msel_opts: {dividerLocation: 0.5}}); //$(this).jqGrid('columnChooser'); $("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>d iv.actions') .prepend('<label style="float:left;position:relative;mar gin-left:0.6em;top:0.6em">Search:</label>'); } }); }); //]]> </script> </head> <body> <table id="list"> <tr> <td/> </tr> </table> <div id="pager"></div> <div id="dialog-modal-add" title="Basic modal dialog" style="display: none"> <form name="FormPost" id="FrmGrid_list" class="FormGrid" action = '<%=request.getContextPath()%>/AlertconfigurationAction.do' method="post"> <input value="add" id = "oper" name="oper" type="hidden" /> <table id="TblGrid_list" class="EditTable" border="0" cellpa dding="0" cellspacing="0"> <tr> <td> ALERT Min Val</td> <td><input type="text" id = "MinVal" name="MinVal">< /td> </tr> <tr> <td>Alert Max Val</td> <td><input type="text" id = "MaxVal" name="MaxVal">< /td> </tr> <tr> <td>Alert Type</td> <td> <select id = "alertTypeId" name="alertTypeId"> </select> </td>

</tr> <tr> <td>Device name</td> <td><select id = "deviceID" name="deviceID"> </select></td> </tr> <tr id = "trparamID" style="display:none; "> <td>Alert Param Name</td> <td><select id = "paramID" name = "paramID"> </select> </td> </tr> <!-- <tr id = "tralertConfigTypeId" style="display:none; "> <td>Alert Config Type</td> <td><select id = "alertConfigTypeId" name="alertConf igTypeId"> </select> </td> </tr> --> <tr> <td>Is Active</td> <td><select id = "isActive" name="isActive"> <option>Select</option> <option value ='1'>true</option> <option value = '0'>false</option> </select></td> </tr> <tr> <td>Mobile Number</td> <td> <input type = "text" id = "mobileNumber" name = "mobileNumber"> </td> </tr> <tr> <td>Email</td> <td> <input type = "text" id = "emailIds" name = "ema ilIds"> </td> </tr> <tr> <td>Acknowledgement</td> <td> <select id = "ackType" name="ackType"> <option value='3'>None</option> <option value ='0'>Sms</option> <option value = '1'>Email</option> <option value = '2'>Both</option> </select> </td> </tr> <tr> <td> <input type = "submit" value="Submit" id ="Submit"></td>

</tr> </table> </form> </div> </body> </html>

You might also like