easyui datagrid使用

最新推荐文章于 2024-08-29 09:23:02 发布

zhang657869739

最新推荐文章于 2024-08-29 09:23:02 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

分类专栏： json 文章标签： easyui datagrid

本文链接：https://blog.youkuaiyun.com/zhang657869739/article/details/28089275

json 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript实现EasyUI Datagrid样式表单的方法，包括设置列、配置分页等，并展示了如何通过Struts框架返回JSON数据。

首先使用js的方式创建一个easyui-datagrid样式的表单：

<script type="text/javascript">
 datagrid=$("#dg").datagrid({  
     url:'datagrid.action',//加载的URL  
         isField:"id",  
     pagination:true,//显示分页  
     pageSize:5,//分页大小  
     pageList:[5,10,15,20],//每页的个数  
     fit:true,//自动补全  
     fitColumns:true,  
     iconCls:"icon-save",//图标  
     title:"用户管理",  
     columns:[[      //每个列具体内容  
               {  
                   field:'id',  
                   title:'id',  
                   width:100,  
              },     
               {field:'title',title:'title',width:100},     
               {field:'date',title:'date',width:100,formatter:function formattime(val) {
            	   var year=parseInt(val.year)+1900;
            	   var month=(parseInt(val.month)+1);
            	   month=month>9?month:('0'+month);
            	   var date=parseInt(val.date);
            	   date=date>9?date:('0'+date);
            	   var hours=parseInt(val.hours);
            	   hours=hours>9?hours:('0'+hours);
            	   var minutes=parseInt(val.minutes);
            	   minutes=minutes>9?minutes:('0'+minutes);
            	   var seconds=parseInt(val.seconds);
            	   seconds=seconds>9?seconds:('0'+seconds);
            	   var time=year+'-'+month+'-'+date+' '+hours+':'+minutes+':'+seconds;
            	   return time;
               }
               
               },
               {field:'age',title:'age',width:100} 
           ]]  
})  
 </script>
<div id="tt" class="easyui-tabs" fit="true" border="false">
    <div title="用户管理" data-options="closable:true">
    <table id="dg"> </table> 
    </div>
</div>

在js中指定action，指定列和其他配置。

这里要清楚一点，页面加载时datagrid会自动访问action，并且传送两个属性，page和rows，page表示当前页面为第几页，rows表示每页显示的数目。通过这两个属性我们就可以确定返回的数据的条目和起始和截止位置。

action代码：

<span style="font-family: Arial, Helvetica, sans-serif;">private List<Object> result;</span>

int intPage = Integer
				.parseInt((page == null || page.trim().equals("0")) ? "1"
						: page);
		int row = Integer
				.parseInt((rows == null || rows.trim().equals("0")) ? "10"
						: rows);
this.list = this.departmentManage.listDepartment1(intPage, row,
				department);
		// total = (Long) this.departmentManage.getPage(department);
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("total", this.departmentManage.getPage(department));
		map.put("rows", list);
		result1 = JSONObject.fromObject(map);
		return SUCCESS;

根据page和rows属性获取到相应的list数据后，将数据放到map中，注意，键值对中的键必须为total和rows。

struts。xml配置如下：

<action name="datagrid" class="com.ruidi.Action.DatagridAction">
          <result type="json">
				<param name="root">result1</param>
			</result>
        </action>

注意result1表示action中的json属性result1，在action中必须有result1的getter和setter方法。

这样就是一个datagrid完整的过程了。