easyui 创建datagrid

项目中使用easyui做datagrid，很久就听说过easyui datagrid，使用了一段时间和jqgrid还是有很多类似的地方。毕竟都是处理gird 最后都是table。不过也有一些方法是不一样的。先简单的把项目中用到的一些知识写一下。

创建datagrid，然后通过ajax请求数据源，把值insert到datagird里面。当然datagrid也可以直接url请求的。

$('#form_table').datagrid({
	    title : '表单列表信息',
		pageNumber : 1,
		nowrap : false,
		striped : true,
		collapsible : false,
		remoteSort : true,
		idField : 'id',
		singleSelect : true,
		rownumbers : true,
		columns : [ [
				{
					field : 'id',title : 'ID名称',width : 240,align : 'left',
					styler: function(index,row){	
						return 'vertical-align:middle;';
					},formatter : function(
							value, row,index) {
// 			 			return "<a href='#' class='easyui-linkbutton' οnclick='edit(\""+value+"\",\""+row.typ+"\")'>"+value+"</a>";
			 			return "<a href='#' class='easyui-linkbutton' οnclick='edit(\""+value+"\")'>"+value+"</a>";
					}
				},{
					field : 'name',title : '字段名称',width : 150,align : 'left',
					styler: function(index,row){	
						return 'vertical-align:middle;';
					}
				},{
					field : 'typ',title : '表单类型',width : 240,align : 'left',
					styler: function(index,row){	
						return 'vertical-align:middle;';
					}
				},{
					field : 'version',title : '版本',width : 80,align : 'left',
					styler: function(index,row){	
						return 'vertical-align:middle;';
					}
				},{
					field : 'status',title : '状态',width : 80
				},
				{
					field : 'createdBy',title : '创建人',width : 100
				},{
					field : 'createdTime',title : '创建时间',width : 150,
					formatter : function(
							value, row,index) {
						 
			 			return timeLongToString(value);
					}
				},
				{
					field : 'description',title : '描述',width : '200',hidden:true,
					styler: function(index,row){	
// 						return 'display:none';
					},
					formatter : function(
							value, row) {
					}
				}
			] ],
		 toolbar: [{
			            text: '添加表单', iconCls: 'icon-add', handler: function () {
			            	addTemplateForm();
			            }
		        }
	           ]
	});
	//获取现有的表单信息
	var templateSelect="";
	$.ajax({
		url:'${pageContext.request.contextPath}/xx/xx/get-exist-template',
		processData:true,
		beforeSend : function(){$.messager.progress({"text":"加载中"}); },
		complete : function(){$.messager.progress('close');},
		data: {"templateTyp":"all","version":1},
		dataType:'json',
		success:function(resp){
			if(resp!=null){
				for(var i=0;i<resp.length;i++){
					var data = resp[i];
					   $('#form_table').datagrid('insertRow',{index:i,row:
						{id:data.id,name:data.name,typ:data.typ,version:data.version,status:data.status,createdBy:data.createdBy,
						   createdTime:data.createdTime,description:data.description}
					});
					templateSelect = templateSelect + '<OPTION value="'+data.id +'@'+data.name+'@'+data.typ+'@'+data.description+'@'+data.version+'">' + data.name + '</OPTION>';
				}
				$("#templateForm").append(templateSelect);
				
			}
		},error:function(data){
			alert("获取表单模板异常");
		}
	});
});
function edit(id){
// function edit(id,typ){
// 	var url="${pageContext.request.contextPath}/xxx/xxx/xxx.jsp?&appFormTemplateId="+id+"&typ="+typ;
	var url="${pageContext.request.contextPath}/xxx/xxx/xxx.jsp?&appFormTemplateId="+id;
	window.open(url);
}
function addTemplateForm(){
	var url="${pageContext.request.contextPath}/xxx/xxx/xxx.jsp";
	window.open(url);
}

function getSelectedRow(){
	var row = $('#form_table').datagrid('getSelected');
	return row;
}

getSelectRow是获得你选中的一行记录，获取该记录以后就可以进行编辑删除等操作了。

对grid列的值的操作主要是使用formater方法。

下面是创建的grid

grid的处理大同小异，每一种都有自己的方法和属性，对easyui grid也是第一次使用，对grid的属性和方法也不是都了解，如果一些方法或者属性使用的不当还请帮忙纠正。