一、第一步导入依赖js
二、copy demo 如下
<%@ page contentType="text/html; charset=UTF-8" session="false" language="java" %>
<%@ include file="/common/indexJs.jsp" %> <% import="platform.Constants"%> <div class="page-content-area"> <div class="page-header"> </div><!-- /.page-header --> <div class="row"> <div class="col-xs-12"> <table id="grid-table"></table> <div id="grid-pager"></div> <script type="text/javascript"> var $path_base = ".";//in Ace demo this will be used for editurl parameter </script> <!-- PAGE CONTENT ENDS --> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.page-content-area --> <!-- inline scripts related to this page --> <script type="text/javascript"> jQuery(function($) { var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; //resize to fit page size $(window).on('resize.jqGrid', function () { $(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width()); }) //resize on sidebar collapse/expand var parent_column = $(grid_selector).closest('[class*="col-"]'); $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) { if( event_name == 'sidebar_collapsed' || event_name == 'main_container_fixed' ) { //setTimeout is for webkit only to give time for DOM changes and then redraw!!! setTimeout(function() { $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() ); }, 0); } }) $(grid_selector).jqGrid({ datatype: 'json', url: '<%=request.getContextPath()%>/goodsMessages/list',//dom树加载完成请求的地址（ajax请求） mtype: 'POST',//请求方式 jsonReader: { id: "gdProduktId"//删除、根据本字段查询时候向后台传的参数“gdProduktId”自己的字段名 }, height: 250, colNames: ['操作', '产品编码', '品名', '品牌', '供应商', '入库时间','库存量','总量'], colModel: [//下面的name里面是操作的属性不需要的同学可以删掉注意colNames与colModel字段长度对应
{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,search:false, formatter:'actions', formatoptions:{ //keys:true, //editbutton: false,//disable edit button 行编辑是否启用 editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}, //delbutton: false,//disable delete button 行删除是否启用 delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback} } },//以下是数据解析 对应model字段 editable本字段是否可编辑 等等就不多说了
{name:'gdProduktId',index:'gdProduktId', width:60, editable: true,hidden:true,editrules:{edithidden:true}}, {name:'gdName',index:'gdName', width:60, editable: true,editrules:{required:true}}, {name:'gdTrademark',index:'gdTrademark', width:60, editable: true,editrules:{required:true}}, {name:'gdSuppier',index:'gdSuppier', width:60, editable: true,editrules:{required:true}}, {name:'gdPutInStoreTime',index:'gdPutInStoreTime', width:60, editable: true}, {name:'gdRepertory',index:'gdRepertory', width:60, editable: true}, {name:'gdTotal',index:'gdTotal', width:60, editable: true,hidden:false,editrules:{edithidden:true}}, ], viewrecords : true, sortorder: "asc", rowNum:10, rowList:[10,20,30], pager : pager_selector, caption: "测试样例", multiselect: true, autowidth: true, loadComplete : function() { var table = this; setTimeout(function(){ updatePagerIcons(table); enableTooltips(table); }, 0); }, editurl: '<%=request.getContextPath()%>/goodsMessageform'//编辑提交的地址 //altRows: true, //multiboxonly: true }); $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size //enable search/filter toolbar //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true}) //jQuery(grid_selector).filterToolbar({}); //switch element when editing inline function aceSwitch( cellvalue, options, cell ) { setTimeout(function(){ $(cell) .find('input[type=checkbox]') .addClass('ace ace-switch ace-switch-5') .after('<span class="lbl"></span>'); }, 0); } //enable datepicker function pickDate( cellvalue, options, cell ) { setTimeout(function(){ $(cell) .find('input[type=text]') .datepicker({format:'yyyy-mm-dd' , autoclose:true}); }, 0); } //navButtons $(grid_selector).jqGrid('navGrid',pager_selector, { //navbar options//以下是table下方的操作是否启用 edit: true, editicon : 'ace-icon fa fa-pencil blue', add: true, addicon : 'ace-icon fa fa-plus-circle purple', del: true, delicon : 'ace-icon fa fa-trash-o red', search: true, searchicon : 'ace-icon fa fa-search orange', refresh: true, refreshicon : 'ace-icon fa fa-refresh green', view: true, viewicon : 'ace-icon fa fa-search-plus grey', }, { //edit record form closeAfterEdit: true, //width: 700, recreateForm: true, beforeShowForm : function(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_edit_form(form); } }, { //new record form //width: 700, closeAfterEdit: true, recreateForm: true, //viewPagerButtons: false, beforeShowForm : function(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar') .wrapInner('<div class="widget-header" />'); form.find('input[name=grid-table_id]').attr("value",""); style_edit_form(form); } }, { //delete record form recreateForm: true, beforeShowForm : function(e) { var form = $(e[0]); if(form.data('styled')) return false; form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_delete_form(form); form.data('styled', true); }, onClick : function(e) { alert(1); }, closeAfterDel: true }, { //search form recreateForm: true, multipleSearch: true, //multipleGroup: false, afterShowSearch: function(e){ var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />') style_search_form(form); }, afterRedraw: function(){ style_search_filters($(this)); }, closeAfterSearch: true //showQuery: true }, { //view record form recreateForm: true, beforeShowForm: function(e){ var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />') } } ) function style_edit_form(form) { //enable datepicker on "sdate" field and switches for "stock" field form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true}) .end().find('input[name=accountExpired]') .addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>'); //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed) //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>'); //update buttons classes var buttons = form.next().find('.EditButton .fm-button'); buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>'); buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>') buttons = form.next().find('.navButton a'); buttons.find('.ui-icon').hide(); buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>'); buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>'); } function style_delete_form(form) { var buttons = form.next().find('.EditButton .fm-button'); buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>'); buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>') } function style_search_filters(form) { form.find('.delete-rule').val('X'); form.find('.add-rule').addClass('btn btn-xs btn-primary'); form.find('.add-group').addClass('btn btn-xs btn-success'); form.find('.delete-group').addClass('btn btn-xs btn-danger'); } function style_search_form(form) { var dialog = form.closest('.ui-jqdialog'); var buttons = dialog.find('.EditTable') buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet'); buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o'); buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search'); } function beforeDeleteCallback(e) { var form = $(e[0]); if(form.data('styled')) return false; form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_delete_form(form); form.data('styled', true); } function beforeEditCallback(e) { var form = $(e[0]); form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />') style_edit_form(form); } //replace icons with FontAwesome icons like above function updatePagerIcons(table) { var replacement = { 'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140', 'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140', 'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140', 'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140' }; $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){ var icon = $(this); var $class = $.trim(icon.attr('class').replace('ui-icon', '')); if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]); }) } function enableTooltips(table) { $('.navtable .ui-pg-button').tooltip({container:'body'}); $(table).find('.ui-pg-div').tooltip({container:'body'}); } $(document).on('ajaxloadstart', function(e) { $(grid_selector).jqGrid('GridUnload'); $('.ui-jqdialog').remove(); }); }); </script>其他参数可以根据自己的需要去研究 不知道怎么贴图阿 图后补吧三、
后台主要代码
@RequestMapping(value="list",method = RequestMethod.POST)
public void listGoodsMessage(HttpServletRequest request, HttpServletResponse response) throws JsonGenerationException, JsonMappingException, IOException { JqGridHandler jqh = new JqGridHandler(request); FilterSearch filtersearch = jqh.getFilterSearch(); int rows = jqh.getRows(); int page = jqh.getPage(); PageNation pagenation = new PageNation(page, rows); Map m = new HashMap(); if (null != filtersearch) m = UPlatEntityUtils.searchRule2Map(filtersearch); List<GoodsMessage> list = goodsMessageManager.getByPagination(pagenation, null, m); int records = pagenation.getRecords(); int totalPage = pagenation.getTotalPages(); StringBuilder json = new StringBuilder("{"); json.append("\"total\":").append(totalPage) .append(",\"page\":").append(page) .append(",\"records\":").append(records) .append(",\"rows\":"); String jsonData = UPlatJsonUtils.list2json(list); json.append(jsonData); json.append("}"); response.getWriter().write(json.toString()); }