本文详细介绍了如何使用JQGrid插件实现数据表格的展示、编辑及后台交互等功能，并提供了完整的代码示例。
一、第一步导入依赖js
二、copy demo 如下
<%@ page contentType="text/html; charset=UTF-8" session="false" language="java" %>
<%@ include file="/common/indexJs.jsp" %>
<%@page 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());
}
扫一扫
1621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
