![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
jqGrid
jqGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信。
旭东怪
这个作者很懒,什么都没留下…
展开
-
jqGrid 实现排序(绑定动态数据和本地数据)
1 实现排序(绑定动态数据)function initGrid(gridId){ jQuery("#"+gridId).jqGrid({ url:"/loginLog/getLoginLogExtList", postData:{}, datatype: 'json', height: $(window).height() - 115, width: $(window).width() - 7, r原创 2021-01-07 19:34:44 · 3340 阅读 · 1 评论 -
jqGrid 使用viewsortcols属性设置列标题显示排序图标
实现代码:function initGrid(gridId){ jQuery("#"+gridId).jqGrid({ url:"/loginLog/getLoginLogExtList", postData:{}, datatype: 'json', height: $(window).height() - 115, width: $(window).width() - 7, rownumbers原创 2021-01-11 19:51:24 · 653 阅读 · 0 评论 -
jqGrid 多列进行排序时点击其中一列的排序按钮之后没有反应问题解决
问题描述:多列进行排序时点击其中一列的排序按钮之后没有反应。问题分析:1、点击排序没有反应那一列的排序方法没有生效。解决办法:使用onSortCol()重写针对该列的排序方法。onSortCol: function (index, colindex, sortorder) {//到达采样点时间手写排序方法 var DataView = null; var beforeData = []; if (index.indexOf( "StartTime")>=0原创 2021-01-07 20:08:09 · 1112 阅读 · 0 评论 -
jqGrid 点击排序按钮后数据消失问题解决
问题描述:点击排序按钮后数据消失问题。问题分析:1、由于jqGrid绑定的是本地数据,导致了点击排序按钮后数据消失问题,但是绑定动态数据不会出现该问题。解决办法:使用onSortCol()事件重写排序方法。详细步骤请参考以下博客。jqGrid 实现排序(绑定动态数据和本地数据)...原创 2021-01-07 19:53:07 · 673 阅读 · 0 评论 -
jqGrid 设置冻结列
1 实现步骤:(1)设置需要冻结的列属性加上frozen: ture。(2)将设置了冻结的列放置在字段集合的前面部分。(3)调用jqgrid的setFrozenColumns 方法,使冻结列生效。2 实现代码:function initGrid(gridId){ jQuery("#"+gridId).jqGrid({ url:"/loginLog/getLoginLogExtList", postData:{}, datatyp.原创 2021-01-07 19:18:46 · 2137 阅读 · 0 评论 -
jqGrid formatter属性详解
1 formatter属性formatter属性支持自定义单元格内容。语法:formatter:function(cellvalue,options,rowObject){ return "";}参数详解:(1)cellvalue,当前单元格的值(2)options,该cell的options设置,包括{rowId, colModel,pos,gid}(3)rowObject,当前cell所在row的值,是一个对象2 cellvalue给当前值以%结尾。fo原创 2021-01-05 19:52:57 · 4032 阅读 · 0 评论 -
jqGrid 实现分组两种情况(绑定动态数据、绑定本地数据)
1实现分组(绑定动态数据)function initGrid(gridId,colModel){ jQuery("#"+gridId).jqGrid({ url:"/loginLog/getLoginLogExtList", postData:{}, datatype: 'json', height: $(window).height() - 115, width: $(window).width() - 7,.原创 2021-01-04 21:36:31 · 899 阅读 · 0 评论 -
jqGrid 实现分页显示2种情况(动态数据、本地数据)
1、导入jqGrid需要使用的js、css<%--jqGrid的JS、CSS--%><link href="../script/jqGrid/css/jquery-ui.css" rel="stylesheet" /><link href="../script/jqGrid/css/ui.jqgrid.css" rel="stylesheet" />...原创 2020-04-29 18:46:21 · 1558 阅读 · 0 评论 -
jqGrid 使用delRowData删除数据3种情况(删除指定行,删除选中行,删除所有行)
1 删除指定行//删除指定行function DeleteRowByRowId(gridID,rowId){ $("#"+gridID).jqGrid("delRowData", rowId);}2 删除选中行//删除选中行function DeleteSelectRow(gridID){ //获取选中行rowId var ids = jQuery("#"+gridID).jqGrid("getGridParam", "selarrrow"); //删除原创 2020-12-11 19:50:03 · 3328 阅读 · 3 评论 -
jqGrid 使用addRowData往指定位置新增一行空白数据(最后一行)
1 在最后一行的位置新增一行空白数据//最后一行新增数据function AddRowToLast(gridID){ var ids = jQuery("#"+gridID).jqGrid('getDataIDs'); if (ids.length == 0) { ids = [0]; } //获得当前最大行号(数据编号) var rowid = Math.max.apply(Math, ids); //获得新添加行的行号(数据编号).原创 2020-12-11 19:41:38 · 1444 阅读 · 0 评论 -
jqGrid 获取选中行数据的两种方式(通过复选框选中状态获取,通过getGridParam获取)
1通过复选框选中状态获取通过判断每行数据的复选框是否选中,决定该行数据是否被选中。//获取选中行数据function GetSelectRowData(gridID){ var rowIds = jQuery("#"+gridID).jqGrid('getDataIDs'); var selectRowData=[]; for (var k = 0; k < rowIds.length; k++) { var curChk = $("#" + ro.原创 2020-12-11 19:32:18 · 8595 阅读 · 0 评论 -
jqGrid 事件使用(loadComplete数据加载完触发,onPaging点击翻页按钮触发,onSortCol点击排序按钮触发)
1loadComplete()说明:数据加载完时调用。示例:jQuery("#datagrid").jqGrid({ datatype: "local", height: $(window).height() - 115, width: $(window).width() - 7, rownumbers: true, //行号 pager: "#pager", recordtext: "第{0} - {1}条 共 {2} 条", pg.原创 2020-12-04 20:52:12 · 4392 阅读 · 0 评论 -
jqGrid 设置两种宽高(固定宽高,自适应宽高)
1 HTML 代码<table id='datagrid'></table>2 固定宽高2.1初始化设置固定宽高//jqGrid初始化jQuery("#datagrid").jqGrid({ datatype: "local", height: $(window).height() - 115,//设置高度 width: $(window).width() - 7,//设置宽度 rownumbers: true, //行号 .原创 2020-11-25 19:53:27 · 4342 阅读 · 0 评论 -
jqGrid 解决分页跳转无效问题
问题描述:jqGrid分页按钮为灰色,不能进行分页跳转。问题分析://jqGrid初始化jQuery("#datagrid").jqGrid({ datatype: "local", height: $(window).height() - 115, width: $(window).width() - 7, rownumbers: true, //行号 pager: "#pager", recordtext: "第{0} - {1}条原创 2020-11-25 19:43:39 · 1827 阅读 · 0 评论 -
jqGrid 实现表格导出Excel功能
1、实现代码/**** function jqgridtoExcel (Table,Tal,fileName)* @param Table 表头table的父div-父div-父div * @param Tal jqgrid的tableid* @param filename Excel文件名称* example:jqgirdtpExcel($("#gview_group-report4"),$("#group-report4"),fileName);* **/(function.原创 2020-09-28 15:32:04 · 2644 阅读 · 6 评论