如何填写jqgrid插件

问题描述

我尝试过：

< div class =row> 
< div class =col-xs-12> 
<！ -  PAGE CONTENT BEGINS  - > 
< table id =grid-table>< / table> 
 
< div id =grid-pager>< / div> 
 
<！ -  PAGE CONTENT ENDS  - > 
< / div><！ -  /.col  - > 
< / div><！ -  /.row  - > 
 
 
< script type =text / javascript> 
 
 // var grid_data = []; 
 $ .ajax（{
 url：'getdata.php'，
类型：'POST'，
 async：false，
 dataType：'json'，
 cache：'false'，
 success：function（data）{
 grid_data = JSON.stringify（data）
 
} 
}）; 
 
 var grid_data = grid_data; 
 console.log（grid_data）; 
 jQuery（函数（$）{
 var grid_selector =＃grid-table; 
 var pager_selector =＃grid-pager; 
 
} 
}）
 jQuery（grid_selector）.jqGrid（{
 //方向：rtl，
 
 //子网格选项
 // subGrid：true， 
 // subGridModel：[{name：['No'，'Item Name'，'Qty']，width：[55,200,80]}]，
 // datatype：xml，
 subGridOptions：{
 plusicon：ace-icon fa fa-plus center greater-110 blue，
 minusicon：ace-icon fa fa-minus center greater-110 blue，
 openicon：ace-icon fa fa-chevron-right center orange
}，
 
数据：grid_data，
 
数据类型：json，
身高：250，
 colNames：[''，'ID'，'标题'，'日期'，'状态']，
 // colNames：[''，'ID'， 'name']，
 colModel：[
 {name：'myac'，index：''，width：80，fixed：true，sortable：false，resize：false，
 formatter： '行动'，
f ormatoptions：{
 keys：true，
 // delbutton：false，//禁用删除按钮
 
 delOptions：{recreateForm：true，beforeShowForm：beforeDeleteCallback}，
 // editformbutton：true，editOptions：{recreateForm：true，beforeShowForm：beforeEditCallback} 
} 
}，
 {name：'id'，index：'id'，width：60，sorttype ：int，editable：true}，
 {name：'name'，index：'name'，width：90，editable：true，sorttype：date，unformat：pickDate}，
 {name：'date'，index：'date'，width：150，editable：true，editoptions：{size：20，maxlength：30}}，
 {name：'status'，index ：'status'，width：70，editable：true，edittype：checkbox，editoptions：{value：Yes：No}，unformat：aceSwitch}，
]，
 
 viewrecords：true，
 rowNum：10，
 rowList：[10,20,30]，
 pager：pager_selector，
 altRows：true，
 // toppager： true，
 
 multiselect：true，
 // multikey：ct rlKey，
 multiboxonly：true，
 
 loadComplete：function（）{
 var table = this; 
 setTimeout（function（）{
 styleCheckbox（table）; 
 
 updateActionIcons（table）; 
 updatePagerIcons（table）; 
 enableTooltips（table）; 
}，0）; 
}，
 
 editurl：。/ dummy.php，//没有保存
标题：jqGrid带内联编辑
 
 / /，autowidth：true，
 
 
}）; 

解决方案

What I have tried:

<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
		<table id="grid-table"></table>

		<div id="grid-pager"></div>
		
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->


<script type="text/javascript">
	
			// var grid_data =[];
			 		$.ajax({
						url: 'getdata.php',
						type: 'POST',
						async: false,
						dataType: 'json',
						cache: 'false',
						success: function(data){
						 grid_data = JSON.stringify(data)
						
						}
					});
			
			var grid_data = grid_data;
			console.log(grid_data);
jQuery(function($) {
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
				
				}
			    })
			jQuery(grid_selector).jqGrid({
					//direction: "rtl",
			
					//subgrid options
					//subGrid : true,
					//subGridModel: [{ name : ['No','Item Name','Qty'], width : [55,200,80] }],
					//datatype: "xml",
					subGridOptions : {
						plusicon : "ace-icon fa fa-plus center bigger-110 blue",
						minusicon  : "ace-icon fa fa-minus center bigger-110 blue",
						openicon : "ace-icon fa fa-chevron-right center orange"
					},
					
					data: grid_data,
					
					datatype: "json",
					height: 250,
					colNames:[' ', 'ID','Title','Date', 'Status'],
					//colNames:[' ', 'ID','Name'],
					colModel:[
						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
							formatter:'actions', 
							formatoptions:{ 
								keys:true,
								//delbutton: false,//disable delete button
								
								delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
								//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
							}
						},
						{name:'id',index:'id', width:60, sorttype:"int", editable: true},
						{name:'name',index:'name',width:90, editable:true, sorttype:"date",unformat: pickDate},
						{name:'date',index:'date', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
						{name:'status',index:'status', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
					], 
			
					viewrecords : true,
					rowNum:10,
					rowList:[10,20,30],
					pager : pager_selector,
					altRows: true,
					//toppager: true,
					
					multiselect: true,
					//multikey: "ctrlKey",
			        multiboxonly: true,
			
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			
					editurl: "./dummy.php",//nothing is saved
					caption: "jqGrid with inline editing"
			
					//,autowidth: true,
			
			
				});

解决方案

这篇关于如何填写jqgrid插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！