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>');
})
相关推荐
jqGrid是一款基于jQuery的开源表格插件，专为数据管理和展示设计，提供了丰富的功能和高度的自定义性。它在Web开发中广泛应用于构建高效、交互式的数据网格。以下是关于jqGrid的一些关键知识点： 1. **基本使用**：...
总结来说，"jquery.jqGrid-3.5-beta"是一个强大的数据管理框架，为Web开发者提供了丰富的工具和功能，用于构建高效的数据网格。尽管目前处于测试阶段，但其稳定性和功能已经相当完善，对于需要处理大量数据的应用...
在本文中，我们将深入探讨如何在MVC4（Model-View-Controller）应用程序中集成jqGrid，这是一个功能强大的JavaScript表格插件，用于实现数据的动态显示和管理。jqGrid允许开发人员创建高度交互式和可定制的数据网格...
在本文中，我们将深入探讨如何在ASP.NET MVC4框架中集成jqGrid表格插件，并通过一个实际的示例源代码来展示具体实现过程。jqGrid是一个功能强大的jQuery插件，用于创建交互式、数据丰富的网格视图，适用于各种Web...
jqGrid的压缩包`jqGrid-master`可能包含了完整的源代码、示例、文档和必要的资源文件。解压后，你可以通过查看示例和阅读文档来深入了解其用法和功能。学习jqGrid不仅可以提升网页表格的用户体验，也有助于提高开发...
1. **数据加载与显示**：jQGrid 支持从服务器或本地数据源动态加载数据，并以表格形式展示。它可以处理 JSON、XML、CSV 等多种数据格式，适应不同后端接口的需求。 2. **分页**：jQGrid 提供了内置的分页功能，用户...
jquery.jqGrid-4.8.2（jquery表格插件）.zip----------jqGrid4.8.2包，官网下载的，原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
2. **数据显示**：jqGrid支持自定义数据格式化，用户可以通过`formatter`选项定义如何显示数据。这包括日期格式化、货币格式化或者自定义HTML内容。此外，`colModel`配置项用于定义列的属性，如宽度、对齐方式、是否...
总的来说，jqGrid是Web开发中的一款强大工具，无论是在数据展示、操作还是美化方面都有出色的表现。通过深入学习和理解其文档，开发者能够充分利用其功能，提高数据管理的效率和用户体验。如果你正在寻找一个功能...
总的来说，jqGrid是一个强大的工具，它提供了丰富的功能来创建复杂的表格布局和数据操作。通过理解并熟练运用行合并、添加、删除和日期处理等技术，你可以构建出用户友好且功能齐全的数据展示和管理界面。在实际项目...
JqGrid是一款基于jQuery的数据表格插件，它提供了一种高效、可定制的方式来展示和操作表格数据。本文将深入探讨“数据表格JqGrid自适应列宽度”这一主题，以帮助开发者更好地理解和实现这一功能。 首先，JqGrid允许...
解压`jquery.jqGrid-4.3.0.zip`文件后，将相应的资源文件添加到HTML页面中，然后通过JavaScript代码初始化表格。 **3. 示例与Demo** `jqgrid_demo40.zip`包含了jqGrid 4.3.0的示例代码，可以帮助开发者快速了解和...
在这个"jqGrid的自适应表格"示例中，我们将探讨如何利用jqGrid实现表格的自适应窗口大小，以及在单元格数据过多时如何优雅地处理显示。 首先，要创建一个基本的jqGrid，你需要在HTML文件中引入jQuery库和jqGrid的...
《jQuery.jqGrid-4.4.3：Web页面列表分页显示的高效解决方案》 在Web开发领域，数据展示是不可或缺的一部分，特别是在处理大量数据时，如何有效地进行分页显示，提高用户体验，成为了开发者关注的重点。jQuery....
jqGrid 是一个强大的 jQuery 插件，用于在网页上创建、操作和展示数据表格。它提供了丰富的功能，包括数据的加载、排序、过滤、编辑和显示。本篇文章将深入探讨如何在 jqGrid 中实现表格的一列编辑功能。 一、...
总的来说，jqGrid-5.1.0是一款功能全面、易于使用的表格插件，为Web开发人员提供了强大的工具来构建功能丰富的数据网格，同时保持良好的性能和用户体验。无论是在企业级应用还是个人项目中，它都是展示和操作数据的...
jqGrid是一款功能强大的JavaScript表格插件，用于在Web页面中展示和操作数据。它基于jQuery库，提供了丰富的功能，如数据分页、排序、搜索、编辑等，支持JSON、XML、CSV等多种数据格式，适用于创建交互式的动态数据...
7. **getex.html**：可能涉及到获取表格数据的示例，比如如何获取当前选中的行数据，或者获取整个表格的数据显示。 8. **adding.html**：关于新增数据的示例，说明如何在表格中插入新的行，并将其保存到服务器。 9...
它提供了丰富的功能，包括数据分页、排序、搜索、过滤、编辑等，使用户可以方便地在网页上处理表格数据。 **本地数据分页** 本地数据分页是指在客户端进行数据的分页处理，而不是将所有数据一次性从服务器获取。...
7. **工具栏**：可以自定义工具栏，添加按钮、下拉框等元素，实现更多功能。 8. **国际化**：支持多语言，满足全球化网站的需求。 9. **响应式设计**：适应不同屏幕尺寸，提供良好的移动设备浏览体验。 10. **...