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>'); })