jqGrid (data grid) - display toolbar in the head

The original ecology of the jqGrid table, like the implementation method of adding a toolbar to the data table.

1. Front page

<%@ 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>Query user list</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">Username</label>
				<div class="col-sm-2"><input type="text" id="userName" class="form-control" value=""></div>
				
				<label class="col-sm-1 control-label">Date created</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>

illustrate:

<table id="table_list_1"></table> data table

<div id="pager_list_1"></div> paging primary key

<div id="t_table_list_1"></div> Toolbar primary key

2. js file

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

$(function() {
	$("#date").datepicker({
		keyboardNavigation:!1,
		forceParse:!1,
		autoclose:!0,
		clearBtn: true//Clear button
    });
	
	$.jgrid.defaults.styleUI = "Bootstrap";
	
	$("#table_list_1").jqGrid({
		//caption:"User List",
		url:$.getUrl() + "/user/queryUserListData",
		mtype:"POST",
		datatype : "json",
		postData: {
			userId:$('#userId').val(),
			userName:$('#userName').val(),
			createTime:$('#date').val()
		},
		toolbar: [true, "top"], //Display the toolbar in the head, the tool view id is "t_" + data table id
		viewrecords : true,
		cold: false,
		height : 530,
		autowidth : true,
		shrinkToFit : true,
		rowNum : 20,
		pageSize:1,
		rowList : [20, 30, 50],
		pager : "#pager_list_1", //Pagination primary key
		colNames : ["User ID", "User Name", "Role Id", "Role", "Email", "Mobile Number", "Creation Date", "Clearing Institution", "Remarks"],
		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});
	
	//Add button to toolbar
	$("#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>');
})

jqGrid (data grid) - display toolbar in the head

Guess you like