easyui数据表格显示后台数据

最新推荐文章于 2024-03-18 21:27:40 发布

小胖墩有点瘦

最新推荐文章于 2024-03-18 21:27:40 发布

阅读量9.7k

点赞数 3

分类专栏： SSH后端开发 web后端开发文章标签： easyui 数据表格显示后台数据 easyui java SSH

本文链接：https://blog.csdn.net/zys_1997/article/details/78081620

版权

SSH后端开发同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

web后端开发

41 篇文章 2 订阅

订阅专栏

easyui的数据表格（DataGrid）显示后台数据的一些关键点：

1.easyui数据表格生成数据需要解析JSON格式的数据；

2.由于需要分页查询，后台需要获取easyui的page和rows参数

下面具体演示如何实现：
创建一个easyui数据表格：

<body>
  	<div id="tb">
  		学号：<input class="easyui-textbox" style="width:75px;height:22px" name="id" />    
  		姓名：<input class="easyui-textbox" style="width:75px;height:22px" name="name" />
  		<a href="#" οnclick="doEdit()" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
		<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ban',plain:true">启禁</a>
	</div>
	<table id="dg"></table>
</body>

<script type="text/javascript">
		$('#dg').datagrid({    
		    url:'/mssh/init.action',  
		    title:'用户列表',
		    border:false,
		    rownumbers:true,
		    toolbar: '#tb',
		    pagination: true,
		    fit: true,
		    pageSize:"5",
		    pageList:[5,10,15,20],
		    editorHeight: "100",
		    striped: "true",
		    singleSelect: true,
		    beforePageText: '第',
                    afterPageText: '页    共 {pages} 页',  
                    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
		    columns:[[    
		        {field:'id',title:'学号',width:120},
		        {field:'name',title:'姓名',width:120},
		        {field:'password',title:'密码',width:120},
		        {field:'isban',title:'启禁',width:50}
		    ]]    
		}); 

</script>

注意：生成easyui数据表格界面需要导入相关的esyui文件！这里不再赘述。

生成的表格如图：

实现后台的编码，这里需要下载并导入net.sf.json 包：

	/**
	 *用户列表初始化 
	 */
	public String init(){
		int page = this.getIntParam("page", 1);
		int rows = this.getIntParam("rows",15);
		
		SysUser sysUser=new SysUser();
		sysUser.setId("2005");
		sysUser.setName("张三");
		sysUser.setPassword("132");
		

		SysUser sysUser1=new SysUser();
		sysUser1.setId("2006");
		sysUser1.setName("张四");
		sysUser1.setPassword("good");
		
		List<SysUser> list=new ArrayList<SysUser>();
		list.add(sysUser1);
		list.add(sysUser);
		
		JSONArray json = JSONArray.fromObject(list);
		String s = "{\"total\":" + listSize + ",\"rows\":" + json + "}";
		this.outJson(s);
		return null;
	}

这里只是简单的获取了前台的page和rows参数，并没有实现分页查询，但是这两个参数是日后用于分页查询的，限于篇幅，本篇博客就没有把数据库中数据查询出然后显示在数据表格，这里是手动写了两个测试对象，然后显示在前台。分页查询日后将单独写出。

做到这里，还需要在配置文件中配置数据表格的url(这里是基于搭建好的SSH框架):

<action name="init" class="com.zys.system.action.SysUserAction" method="init"> </action>

数据表格显示结果：

小胖墩有点瘦

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
17
评论
easyui数据表格显示后台数据

easyui数据表格显示后台数据
复制链接

扫一扫

专栏目录

easyui数据表格显示后台数据

easyui的数据表格（DataGrid）显示后台数据的一些关键点：

“相关推荐”对你有帮助么？