jqGrid(数据表格)-在头部显示工具栏

最新推荐文章于 2023-04-26 08:40:32 发布

原创最新推荐文章于 2023-04-26 08:40:32 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jqGrid、工具栏

前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何在jqGrid中添加工具栏，并提供了一个具体的示例。通过在HTML页面中定义必要的元素并使用jQuery插件jqGrid配置工具栏，可以在表格上方添加包括新增、修改、删除等功能的按钮。

jqGrid表格原生态，像数据表格添加工具栏实现方法。

1、前台页面

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%	String path = request.getContextPath();%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>查询用户列表</title>
	<%@include file="/static/css.jsp"%>
	<%@include file="/static/js.jsp"%>
	<script type="text/javascript" src="<%=path%>/static/js/user/queryUserList_1.js"></script>
	
	<style type="text/css">
		.table {width: 1617px;}
	</style>
</head>
<body>
	<div class="ibox-content">
		<form method="get" class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-1 control-label">用户id</label>
				<div class="col-sm-2"><input type="text" id="userId"  class="form-control" value=""></div>
				
				<label class="col-sm-1 control-label">用户名称</label>
				<div class="col-sm-2"><input type="text" id="userName" class="form-control" value=""></div>
				
				<label class="col-sm-1 control-label">创建日期</label>
				<div class="form-group" id="data_1">
					<div class="input-group date col-sm-2">
						<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
						<input type="text" id="date" class="form-control" value="${query.postingDate}">
					</div>
				</div>
			</div>
			<div class="col-sm-1">
				<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button" id="merchantBtn"><strong>查询</strong></button>
			</div>
		</form>
	</div>
	
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<div class="jqGrid_wrapper">
							<table id="table_list_1"></table>
							<div id="pager_list_1"></div>
							<div id="t_table_list_1"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

说明：

<table id="table_list_1"></table> 数据表格

<div id="pager_list_1"></div> 分页主键

<div id="t_table_list_1"></div> 工具栏主键

2、js文件

var e = "<i class='fa fa-times-circle'></i> ";	//提示

$(function() {
	$("#date").datepicker({
		keyboardNavigation:!1,
		forceParse:!1,
		autoclose:!0,
		clearBtn: true//清除按钮
    });
	
	$.jgrid.defaults.styleUI = "Bootstrap";
	
	$("#table_list_1").jqGrid({
		//caption:"用户列表",
		url:$.getUrl() + "/user/queryUserListData",
		mtype:"POST",
		datatype : "json",
		postData: {
			userId:$('#userId').val(),
			userName:$('#userName').val(),
			createTime:$('#date').val()
		},
		toolbar: [true, "top"],		//在头部显示工具栏，工具看id为"t_"+数据表格id
		viewrecords : true,
		hidegrid : false,
		height : 530,
		autowidth : true,
		shrinkToFit : true,
		rowNum : 20,
		pageSize:1,
		rowList : [20, 30, 50],
		pager : "#pager_list_1",	//分页主键
		colNames : ["用户编号","用户名称","角色Id","角色","邮箱","手机号","创建日期","清算机构","备注"],
		colModel : [
			{name:"userId"}, 
			{name:"userName"},
			{name:"roleId", hidden:true}, 
			{name:"roleName"}, 
			{name:"email"}, 
			{name:"mobile"}, 
			{name:"createTime"}, 
			{name:"source"}, 
			{name:"remark"}
		]
	}).navGrid('#pager_list_1',{edit:false,add:false,del:false,search:false}); 
	
	//向工具栏添加按钮
	$("#t_table_list_1").append('<table cellspacing="0" cellpadding="0" border="0" style="float:left;table-layout:auto;margin-top:2px" class="ui-pg-table topnavtable">'
		+'<tr>'
		+'<td><button style="border-radius: 10px; border: 1px solid  #d0d0d0;" type="button"><strong>新增</strong></button></td>'
		+'<td><button style="border-radius: 10px; border: 1px solid  #d0d0d0;" type="button"><strong>修改</strong></button></td>'
		+'<td><button style="border-radius: 10px; border: 1px solid  #d0d0d0;" type="button"><strong>删除</strong></button></td>'
		+'<td><button style="border-radius: 10px; border: 1px solid  #d0d0d0;" type="button"><strong>分配角色</strong></button></td>'
		+'</tr>'
		+'</table>');
})