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是一个非常好用的免费开源Grid组件,功能强大,适用于各种表格操作,数据管理。作为jquery插件,jqGrid使用方便,简介,美观。
MVC4网站中集成jqGrid表格插件-示例源代码,包含基础basecontroller,以及5个controller
MVC4网站中集成jqGrid表格插件-示例源代码
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqgrid 编辑表格 一列
jqGrid表格数据展示插件,可以做出很多很炫酷的效果,你值得拥有
jqGrid的表格的每行每列的数据既显示又可以编辑。
jQgrid+demo
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid数据调用实例
jqgrid表格,单元格合并,并显示,demo版本
截止今天最新的程序,看好日期哟,另外截止今天官网的正式版还没有出来,请不要被骗
jqgrid-jquery-rails 由Doc Walker认可提供为Rails 3.1+资产管道打包的jqGrid jQuery插件。安装将这些行添加到应用程序的Gemfile : # jqgrid jquery plugin packaged for the rails asset pipelinegem 'jqgrid-...
<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css"> <script type="text/javascript" src="js/jquery-1.11.0.min.js" > <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"> ...
jqgrid-contextmenu-show-hide-columns jQGrid 具有显示/隐藏列功能(上下文菜单) 此存储库是讨论在 jqGrid 中添加显示/隐藏列功能的最佳方法的草案。 在列中添加可见性属性 右键单击标题以显示带有列复选框列表...
jqGrid没有setComplexGroupHeaders方法,使用此插件实现三级分组表头功能
软件介绍: jqGrid-5.1.0是很好用的jQuery表格插件,支持国际化具有bootstrap风格,通过使用jqGrid能实现前端页面与后台数据的ajax异步通信。
jquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zipjquery.jqGrid-3.8.2.zip
jqgrid实现分组显示和统计的功能,jqgrid实现分组显示和统计
jqGrid顶部工具栏扩展,可将导航按钮及自定义按钮添加到表格的顶部,使用方法见https://blog.csdn.net/liandi_123456/article/details/89501692