easyui 创建datagrid

来源：互联网发布：5个数相加等于100算法编辑：程序博客网时间：2024/06/05 05:59

项目中使用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的属性和方法也不是都了解，如果一些方法或者属性使用的不当还请帮忙纠正。

0 0