Jqgrid Toolbar

    xiaoxiao2021-03-26  5

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jqgrid+button测试</title> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script> <link href="../js/ui.jqgrid.css" rel="stylesheet" type="text/css"/> <link href="../js/jquery-ui.min.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script type="text/javascript"> $(function () { $( "button" ).button({ icons: { primary: "ui-icon-plus" } }).next().button({ icons: { primary: "ui-icon-minus" } }); // master grid $("#jqGrid").jqGrid({ url: '../data.json', datatype: "json", colModel: [ { label: 'ID', name: 'CustomerID', key: true, width: 75 }, { label: 'Company Name', name: 'CompanyName', width: 150 }, { label: 'Contact Name', name: 'ContactName', width: 150 }, { label: 'Phone', name: 'Phone', width: 150 }, { label: 'City', name: 'City', width: 150 } ], width: 780, height: 150, rowNum: 7, viewrecords: true, loadonce: true, /* caption: 'Master Grid',*/ toolbar:[true,"top"], onSelectRow: function(rowid, selected) { if(rowid != null) { jQuery("#jqGridDetails").jqGrid('setGridParam',{url: rowid+".json",datatype: 'json'}); // the last setting is for demo only jQuery("#jqGridDetails").jqGrid('setCaption', 'Detail Grid::'+rowid); jQuery("#jqGridDetails").trigger("reloadGrid"); } }, pager: "#jqGridPager" }); $("#jqGrid").navGrid('#jqGridPager', { add: false, edit: false, del: false, search: false,refresh:false }) .navButtonAdd('#jqGridPager', { caption: "Refresh", onClickButton:function() { Refresh(); return false; }, position: "last", buttonicon:"ui-icon-refresh" }).navButtonAdd('#jqGridPager', { caption: "Search", onClickButton:function() { Refresh(); return false; }, position: "last", buttonicon: "ui-icon-search" }) .navButtonAdd('#jqGridPager', { caption: "Save", onClickButton:function() { Save(); return false; }, position: "last" }) .navButtonAdd('#jqGridPager', { caption: "Back", onClickButton:function() { redirectBack(); return false; }, position: "last" }); /* $("#btn").insertBefore("#jqGrid");*/ /*$("#btn").insertBefore("#t_jqGrid");*/ $("#t_jqGrid").css({"height":30}); $("#btn").appendTo("#t_jqGrid"); }); </script> </head> <body> <div id="btn"> <button>Add</button> <button>Delete</button> </div> <div style="margin-left:8px;"> <table id="jqGrid"></table> <div id="jqGridPager"></div> </div> </body> </html> Jqgrid Toolbar - 892847834 - ITBOX的博客
    转载请注明原文地址: https://ju.6miu.com/read-500149.html

    最新回复(0)