jqGrid使用

基本配置

"GRID_OPTION" : function(){
		return {
			"shrinkToFit" : true,
			"gridstate" : "hidden",
			"height" : "auto",
		    "rowNum": 10,
		    "rowList": [10, 20, 30],
			"viewrecords": true,
		    "gridview": true,
		    "pager" : "#grid-pager",
		    "autowidth" : true,
		    "toolbar" : [true,‘bottom‘],
		    "jqModal" : false,
		    "datatype" : "json",
		    "mtype" : "POST",
			"jsonReader" : {
	            root:"data.pageData",
	            page: "data.pagecurrentPage",
	            total: "data.totalPage",
	            records: "data.totalRows",
	            repeatitems : false
	        },
		    "loadComplete":function(){
		    	$(‘.navtable .ui-pg-button‘).tooltip({container:‘body‘});
				$(this).find(‘.ui-pg-div‘).tooltip({container:‘body‘});
		    }
		};
	}
};

  

$grid =$grid.jqGrid($.extend(Const.GRID_OPTION(),{
			‘url‘ : PATH+‘/treatment/phr/basicInfo/page‘,
			‘colNames‘:[‘id‘,‘操作‘],
			‘colModel‘:[
			    {‘name‘:‘id‘, ‘hidden‘:true},  {‘name‘:‘option‘,‘fixed‘:true,‘sortable‘:false,‘resize‘:false,‘formatter‘:rowformatter,‘width‘:100}
            ],
            ‘caption‘ : ‘列表‘
		})).jqGrid(‘navGrid‘,Const.GRID_PAGER_ID,{
			edit: false,
			add: true,
			addicon : ‘ace-icon fa fa-plus-circle purple‘,

			addfunc : function(e){
				$formDialog.dialog($.extend(dialogOption,{title:"新增"}));
				$formDialog.dialog("open");
				reloadHisGrid();
			},

			del: false,
			search: false,
			refresh: true,
			refreshicon : ‘ace-icon fa fa-refresh green‘
		});

  其中操作配置为:

var rowformatter = function(cellvalue, options, rowObject){
			rowObject.rowId = options.rowId;
			return Const.OPT_TPL(rowObject);
		};

  

"OPT_TPL" : _.template($.trim($("#operation-formmatter-tpl").html()),{ ‘variable‘: ‘row‘ }),

  

操作显示:

<script id="operation-formmatter-tpl" type="lodash-tpl">
	<div style="margin-left:8px;"><div title="查看所选记录" data-rowid={{=row.rowId}}  data-objId="{{=row.id}}" onclick="jQuery.fn.detailById.call(this)" style="float:left;cursor:pointer;" class="ui-pg-div ui-inline-detail"><span class="ui-icon ui-icon-search"></span></div></div>
</script>

  

获取选中行数据:

var obj = $grid.getRowData($(this).attr("data-rowid"));

  

重新加载表单数据:

$grid.jqGrid(‘setGridParam‘,{
					page : 1,
					postData : {}
				}).trigger(‘reloadGrid‘);

  

时间: 2024-08-04 21:00:28

jqGrid使用的相关文章

比较JqGrid与XtraGrid

此只能比较两者的功能优劣,实现某种功能.效果的方便性和效率.首先分别粗略介绍XtraGrid和jqGrid DevExpress是目前.net下最为强大和完整的UI控件库, XtraGrid是这个控件库中重要的控件之一.在XtraGrid中集成了大量的高级特征,所以使用它进行开发的人员只需要对其属性进行简单的设置或编 写少量的代码,就能创建出十分美观的界面,从而使开发的工作效率大幅提高. 特点如下 完全支持ADO.NET,一闪而过的数据装入速度,XtraGrid充分利用内建的ADO.NET功能.

jqgrid的排序问题

今天是本人解决的一个小bug  所以写的粗略些. 问题是这样的ORDER BY  a.$sidx $sord 当时本人排序时候没用jqgrid的默认排序(可能今天这个大家看不懂,很抱歉啊各位,今天主要是写给自己看的),而导致不能排序,排序时候一直提示问题.用火狐查看传递的参数后找到了问题所在.去掉a.就能将排序写出来,并且是表格中任意一个colname都能排序.

jqGrid 格式化

jqGrid的格式化是定义在语言包中 · $jgrid = { · ... ·    formatter : { ·      integer : {thousandsSeparator: " ", defaultValue: '0'}, ·      number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},

jqgrid 更改列与列之间的顺序。

colModel放到外面作全局变量 var col=[{ name: "operate", index: "operate", label: "操作", width: 60, fixed: true, align: "center", formatter: Public.operFmatter},{ name: "name", index: "name", label: "名称

jqgrid

使用本地数据生成表格的例子 <body> <!-- jqGrid table list4 --> <table id="list"></table> <!-- jqGrid 分页 div gridPager --> <div id="pager"></div> <div id="draggable" class="ui-widget-content

jQgrid问题总结

最近一段时间一直在使用jqgrid这个免费的插件,网上的资料也比较多.比较全,但是这里还是整理几个自己在开发过程中遇到的小问题. 1.自动换行 一行数据过多需要自动根据内容换行时,如果遇到在表格中的汉字换行或者空格换行的问题,可以在style标签中插入下面代码: 1 .ui-jqgrid tr.jqgrow td 2 { 3 white-space: normal !important; 4 height:auto; 5 vertical-align:central; 6 padding-top

jqGrid使用记录

一.要引用的文件 要使用jqGrid,首先页面上要引入如下css与js文件. 1.css <link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 2.js <script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script>

jqGrid 各种参数 详解

JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人blog的一个学习资料,与其说是学习资料,说成查询帮助文档更加合适. jqGrid学习之 ------------- 安装 jqGrid安装很简单,只需把相应的css.js文件加入到页面中即可. 按照官网文档: /myproject/css/             ui.jqgrid.

JqGrid在IE8中表头不能分组的解决办法

修改JqGrid的js脚本: 1 for (d = 0; d < c; d++) { 2 if (b[d] != undefined) { //主要是添加这个判断 3 if (b[d].startColumnName === a) 4 return d; 5 } 6 return - 1 7 }

jqGrid动态列

HTML代码: <div id="divList"> <div class="toolbar"> </div> <table id="list"> </table> <div id="pager"> </div> </div> <table id="tableCols" cellpadding="