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 4.4.1是一个功能强大的表格插件，提供了全面的数据管理和展示功能，适用于各种Web应用程序，尤其在数据密集型场景下表现优秀。无论是对于新手还是经验丰富的开发者，jqGrid都是一...
- **工具栏**：可以自定义工具栏，添加按钮或其他UI元素。 ### 5. 样式定制 `ui.jqgrid.css`文件提供了默认的样式，你可以根据需求调整或覆盖这些样式。另外，jqGrid也支持Bootstrap、FontAwesome等第三方库的集成...
除了上述特性，JqGrid还支持行内编辑、弹出式编辑、批量编辑模式，以及自定义的工具栏、表头筛选等功能。它提供了丰富的API和事件，允许开发者对表格行为进行深度定制。此外，JqGrid也支持本地化和主题切换，满足...
jqGrid 是一个强大的 jQuery 插件，主要用于在网页上展示和操作表格数据。它通过Ajax技术从服务器获取数据，并利用jqGrid的列模型（colModel）构建用户友好的表格界面。下面将详细介绍jqGrid的工作原理及其主要组成...
- **自定义搜索**：支持多种方式的自定义搜索功能，例如通过工具栏进行搜索、指定特定的搜索条件等。 - **翻页功能**：jqGrid内置了分页功能，可以通过简单的配置实现对大数据集的分页展示。 - **JSON数据格式化**：...
例如，DataTables不仅支持表格的排序、分页和搜索，还提供了列宽调整、多语言、自定义工具栏等功能。通过简单的API调用，开发者可以轻松地为现有的HTML表格添加这些特性。 在使用jQuery Table插件时，首先要确保在...
4. **Jqgrid表格的实现**：使用Jqgrid插件实现了数据表格的动态展示和分页功能，提高了用户体验。 5. **查找功能的实现**：支持模糊搜索和精确搜索，方便用户快速定位所需信息。 6. **修改窗口的实现**：当用户需要...