邓超
ToQuery
关于JqGrid原生组件的使用
2014-07-29 14:47:13   阅读2391次

初始化:

$("#dctGrid").jqGrid({				   	//创建表格
		datatype: "jsonstring",//使用的数据格式,(jsonstring和json有什么不同?)
		data:[],
		//期望的json格式
		jsonReader: {
			userdata : "redate",
			root:  "rows", // 数据行
			page:  "page",  // 当前页
			total: "total",    // 总页数
			records: "records", // 总记录数
			repeatitems : false // 设置成false,在后台设置值的时候,可以乱序。且并非每个值都得设
		},
		colNames:['字典ID','字典名称'],//显示的列名
		//列数据模板
	        //对显示列属性的设置,是一个数组对象。
	        //常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序    
		colModel:[
				{name:"ObjectId",index:"ObjectId",width:145,sortable:false,editable:true,align:"left"},
				{name:"ObjectName",index:"ObjectName",width:145,sortable:false,editable:true,align:"left"}
				],
		rowNum:200,//在grid上显示记录条数,这个参数是要被传递到后台
		
		//如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。
		//如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth
		autowidth:true,
		
	   	autoScroll: true,
	   	
	   	//此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。
	   	//如果为false,则列宽度使用colModel指定的宽度
		autoheight:true,
		
		//如果设置为true,并且用户改变了列宽度,那么右边临近的列宽度会自动调整以适应grid的整体宽度。这种情况下,是没有水平滚动条的。 
                //注意:本选项与shrinkToFit选项不相容。如果shrinkToFit设置为false,那么forceFit的设置将被忽略。 
                // 默认值:false 
		shrinkToFit: false,
		
	        //如果设置为true,则会在grid的左边增加一列,增加的列用来显示记录行数,记录从1开始显示。
	        //这种情况下,colModel被一个name为rn的列自动扩展。由此,我们要注意了,在我们自己定义的列中,不要使用name=’rn’这种名称。                 //默认值:false 
		rownumbers: false,
		
		//确定是否显示总的记录条数。 
                //默认值:false 
		viewrecords: true,
		
		//类型  string 
                //设置当查询记录条数是0的情况下,jqGrid上显示的信息。只有当viewrecords选项设置为true才有效。 
                //默认值:see lang file 
		emptyrecords: "",
		
		// boolean or integer 
                //创建一个动态滚动的grid。如果本属性可用,pager元素被禁用,改用垂直滚动条来动态加载数据。当设置为true时,grid会在第一次加载的时候,把所有的数据取出到客户端,当scroll被设置为一个数字,grid将只显示可见的几行数据。 
                //请注意,这里有一个可选的扩展参数npage传递到服务器端。如果在prmNames数组中设置了npage的值,那么grid将一次请求多页数据。所以这里服务器端的按页获取数据的方法需要特别注意处理。 
                //默认值:false 
		scroll:true,
		
		
		cellEdit:false,
		
		// string 
                //确定Cell Editing模式下,内容保存到远程服务器还是本地数组。'remote' 或者 'clientArray'。 
                //默认值:'remote' 
		cellsubmit:'clientArray',
		
		
		loadtext: "读取中...",
		
		hoverrows : false,  // 取消jqgrid的选中样式
		
		// 定义grid中的数据行是否可以被多选。会在grid的最左边增加一列checkbox的选择框。 
                //默认值:false 
		multiselect: true
	});

添加数据

// 添加数据
function addDctData(){
	// 请求数据
	var senddata = $.createMessage("SmartDctService","getDctList");
	senddata.QueryConf = "";
	//实际处理过程:把要请求的服务、方法、和相关参数封装成sendData
	//commAction需要接受三个参数,(请求的数据,回调函数,是否异步)
	$.commAction(senddata,function(data){
		if(data.RET_CODE == "0"){
			// 添加
			$.each(data.ObjectList,function(k, v){
				var rowData = {"ObjectId":v.ObjectId,"ObjectName":v.ObjectName};
				$("#dctGrid").jqGrid("addRowData",k+1,rowData);
			});
		}else{
			tipInfo("提示",data.RET_MSG,1000,0);
		}
		
		console.info(data);
	});
}




-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
1楼:太空守望者 发表于 2014-07-29 15:00:55
这个可以做的很全。
2楼:太空守望者 发表于 2014-07-29 15:18:44
也可以把所有的参数说明一下。这个总结挺好。
3楼:kenni0124 发表于 2015-09-29 20:18:46
怎么给jqgrid 添加自动补全功能? 比如 在td上修改数据的时候 输入a 自动联想 alibaba 这样? 1554384523@qq.com 希望能回复我 谢谢
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航