当前位置： 文江博客话题详情

EXT js 之Grid 的使用方法

发布于 2022-09-15 16:08:46 字数 8687 浏览 15 评论 0

转自http://www.javaeye.com/topic/932266

使用grid必须使用实现四个方法store、reader、column、grid

js文件内容

  1. Ext.onReady(function() {
  3.         var store = new Ext.data.Store( {
  5.                 proxy : new Ext.data.HttpProxy( {
  7.                         url : 'queryAllAction.action',//★连接控制器，执行查询获得数据源
  9.                         method : 'GET'
  11.                 }),
  13.                 reader : new Ext.data.JsonReader( {
  15.                         root : 'users',
  17.                         id : 'id'
  19.                 }, [ {
  21.                         name : 'id',
  23.                         mapping : 'id'
  25.                 }, {
  27.                         name : 'username',
  29.                         mapping : 'username'
  31.                 }, {
  33.                         name : 'password',
  35.                         mapping : 'password'
  37.                 }, {
  39.                         name : 'rid',
  41.                         mapping : 'rid'
  43.                 } ])
  45.         });
  49.         var column = new Ext.grid.ColumnModel( [ {
  51.                 header : '用户编号',
  53.                 dataIndex : 'id',
  55.                 width : 150
  57.         }, {
  59.                 header : '用户姓名',
  61.                 dataIndex : 'username',
  63.                 width : 150
  65.         }, {
  67.                 header : '用户密码',
  69.                 dataIndex : 'password',
  71.                 width : 150
  73.         }, {
  75.                 header : '用户角色',
  77.                 dataIndex : 'rid',
  79.                 width : 150
  81.         } ]);
  85.         column.defaultSortable = true;
  89.         var grid = new Ext.grid.GridPanel( {
  91.                 el : 'usersDiv',//★指定数据的显示位置
  93.                 width : 700,
  95.                 height : 500,
  97.                 title : '用户表',
  99.                 store : store,//★放置表数据
  101.                 cm : column,//★放置表头
  103.                 trackMouseOver : false,
  105.                 sm : new Ext.grid.RowSelectionModel()
  107.         });
  109.         grid.render();
  111.         store.load();
  113. });

复制代码页面内容

  1. <html>
  3.         <head>
  5.                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7.                 <title>ShowUsers</title>
  9.                 <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css"/>
  11.                 <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
  13.                 <script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
  15.                 <script type="text/javascript" src="js/showUsers.js"></script>
  17.         </head>
  19.         <body>
  21.                 <div id="usersDiv" style="margin: 10px;"></div>
  23.         </body>
  25. </html>

复制代码json.jsp 内容固定不可以有其他标记

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  3. <%@ taglib prefix="s" uri="/struts-tags"%>
  5. <s:property value="json" escape="false"/>

复制代码控制器内容

  1. public class UsersAction  implements Action {
  5.         private String json;
  9.         public String getJson() {
  11.                 return json;
  13.         }
  15.         public void setJson(String json) {
  17.                 this.json = json;
  19.         }
  21.         public String query(){
  23.                 json=ui.query();
  25.                 return SUCCESS;//跳转页面为json.jsp
  27.         }
  29. }

复制代码业务层内容

  1. public String query() {
  3.                
  5.                 List<Users> list= dao.queryAll();
  7.                 Map<String,Object> map = new HashMap<String , Object>();
  9.                 map.put("users", list);               
  11.                 return        JSONObject.fromObject(map).toString();
  13.         }

复制代码

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

·深蓝

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文