Jqgrid

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

Jqgrid

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Jqgrid

Diunggah oleh

Hak Cipta:

Format Tersedia

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

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

Anda mungkin juga menyukai