js文件内容
Ext.onReady(function() {
var store = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : 'queryAllAction.action',//★连接控制器，执行查询获得数据源
method : 'GET'
}),
reader : new Ext.data.JsonReader( {
root : 'users',
id : 'id'
}, [ {
name : 'id',
mapping : 'id'
}, {
name : 'username',
mapping : 'username'
}, {
name : 'password',
mapping : 'password'
}, {
name : 'rid',
mapping : 'rid'
} ])
});
var column = new Ext.grid.ColumnModel( [ {
header : '用户编号',
dataIndex : 'id',
width : 150
}, {
header : '用户姓名',
dataIndex : 'username',
width : 150
}, {
header : '用户密码',
dataIndex : 'password',
width : 150
}, {
header : '用户角色',
dataIndex : 'rid',
width : 150
} ]);
column.defaultSortable = true;
var grid = new Ext.grid.GridPanel( {
el : 'usersDiv',//★指定数据的显示位置
width : 700,
height : 500,
title : '用户表',
store : store,//★放置表数据
cm : column,//★放置表头
trackMouseOver : false,
sm : new Ext.grid.RowSelectionModel()
});
grid.render();
store.load();
});
页面内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ShowUsers</title>
<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" src="js/showUsers.js"></script>
</head>
<body>
<div id="usersDiv" style="margin: 10px;"></div>
</body>
</html>
json.jsp 内容固定不可以有其他标记
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:property value="json" escape="false"/>
控制器内容
public class UsersAction implements Action {
private String json;
public String getJson() {
return json;
}
public void setJson(String json) {
this.json = json;
}
public String query(){
json=ui.query();
return SUCCESS;//跳转页面为json.jsp
}
}
业务层内容
public String query() {
List<Users> list= dao.queryAll();
Map<String,Object> map = new HashMap<String , Object>();
map.put("users", list);
return JSONObject.fromObject(map).toString();
}
分享到：
相关推荐
使用Vue-Grid-Layout实现自定义工作台
在网上找了一些PropertyGrid的文章，也有可以实现多语言版本的，但是那种方法使PropertyGrid无法传值，没有实际意义。这个demo可以将CategoryName、PropertyName、PropertyDescription设置多国语言。并且不会出现...
主要介绍了使用vue实现grid-layout功能的代码讲解,需要的朋友可以参考下
本文实例讲述了asp.net+Ligerui实现grid导出Excel和Word的方法。分享给大家供大家参考，具体如下： 下面采用的导EXCEL方法，适合不翻页的grid，而且无需再读一次数据库，对于翻页的grid来说，要导全部，当然后台要再...
PropertyGrid控件使用教程 PropertyGrid控件使用教程
PropertyGrid应是.Net Studio设计时显示、设置控件属性的控件。提供三种使用方法，供参考。
Grid Generation Methods（网格生成方法） Grid Generation Methods 2nd Edition Dec 2009 Grid Generation Methods 2nd Edition This book is an introduction to structured and unstructured grid methods ...
ExtJS grid过滤操作，可以动态操作本地的store更改筛选的内容
PropertyGrid 下拉式和弹出编辑框的实现
这两天项目需要，临时做了一个，没有封装，该grid可以实现列和行的自定义添加和删除，包括修改标题，以及列的右击添加事件。希望对你们有所帮助！双击列名可以对列名进行修改，右键列名可以选择左侧和右侧添加列以及...
实现grid单元格重复数据的合并，完整的案例实现，包含合并方法和调用过程
Codeigniter Grid 使用方法 (flexigrid) 博客分类： Codeigniter / CakePHP ASPRailsRubyPHPGoogle 来源：http://codeigniter.com/forums/viewthread/75326/P0/ Updated: 6 September 2008 Although I love CI, ...
前端开源库-mongoose-gridstoreMongoose GridStore，Mongoose插件，用于存储文档架构的大型附件
在C#2019中，将XML结点动态映射为属性集，然后使用PropertyGrid加载并显示。支持父结点的名称自动映射为Category(目录).
文档主要对dhtmlxGrid 实现的功能进行介绍，以及API操作中文手册。 文档大致目录如下： 一、 dhtmlxGrid 介绍 7 1. 自定义XML: 7 2. 支持多行表头、表尾展现 7 3. 移动、添加、删除列 8 4. 处理大型数据集-支持分页 ...
要实现Ext Grid的远程排序其实很简单，只要修改查询语句的排序关键字就可以了，但是，如果你的项目是使用Linq进行开发的，会发现...本文将通过一个实例演示如何使用LINQ Dynamic Query Library实现Ext Grid的远程排序。
本插件安装后，还要设置两个地方.. 后台: Configuration——>Product Listing——>Product Listing ——> Layout Style 改为 columns 每行展示商品个数： Configuration——>Product Listing——>Product Listing ...
ListView控件实现grid,代码编写中如果需要，可以将listview的绘制方式设置为ownerdraw根据自己的需要绘制需要的样式。
c# 结合锐浪报表Grid++Report6 实现推送数据打印，代码简单易懂，写了一个案例给大家