项目中使用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' onclick='edit(\""+value+"\",\""+row.typ+"\")'>"+value+"</a>"; return "<a href='#' class='easyui-linkbutton' onclick='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的属性和方法也不是都了解,如果一些方法或者属性使用的不当还请帮忙纠正。