ExtJS GTGrid 简单用户管理

2024-12-16 10:45:27

部分源码:

代码如下:

<%@ page language="java" pageEncoding="GBK"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<title>用户管理首页</title>
<link rel="stylesheet" type="text/css" href="js/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-2.2/ext-all.js"></script>
<style type="text/css">
.x-panel-body p {}{
margin:5px;
}
.x-column-layout-ct .x-panel {}{
margin-bottom:5px;
}
.x-column-layout-ct .x-panel-dd-spacer {}{
margin-bottom:5px;
}
.settings {}{
background-image:url(js/ext-2.2/shared/icons/fam/folder_wrench.png) !important;
}
.nav {}{
background-image:url(js/ext-2.2/shared/icons/fam/folder_go.png) !important;
}

.icon-grid {}{
background-image: url(js/ext-2.2/shared/icons/fam/grid.png) !important;
}

#button-grid .x-panel-body {}{
border: 1px solid #99bbe8;
border-top: 0 none;
}

.add {}{
background-image: url(js/ext-2.2/shared/icons/fam/add.gif) !important;
}

.option {}{
background-image: url(js/ext-2.2/shared/icons/fam/plugin.gif) !important

}

.remove {}{
background-image: url(js/ext-2.2/shared/icons/fam/delete.gif) !important

}

.save {}{
background-image: url(js/ext-2.2/shared/icons/save.gif) !important;
}
</style>
<script>
<!--
Ext.onReady(function()
{
/**//**Grid相关**/
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
var newFormWin; //form窗口容器
var form1; //添加用户的form
var form2;; //修改用户的form

//侧边栏状态的记录
Ext.state.SessionProvider = Ext.extend(Ext.state.CookieProvider, {
readCookies : function(){
if(this.state){
for(var k in this.state){
if(typeof this.state[k] == 'string'){
this.state[k] = this.decodeValue(this.state[k]);
}
}
}
return Ext.apply(this.state || {}, Ext.state.SessionProvider.superclass.readCookies.call(this));
}
});

var xg = Ext.grid;

var jsonReader = new Ext.data.JsonReader( {
root : 'list', //返回的数据集合
totalProperty : 'totalCount', //总记录数
successProperty : '@success' //成功标记
}, [ {
name : 'id', //grid中的dataIndex
mapping : 'id', //返回的数据中的字段名
type : 'int' //类型，默认为string类型
}, {
name : 'username',
mapping : 'username'
}, {
name : 'age',
mapping : 'age',
type : 'int'
},
{
name : 'ramark',
mapping : 'remark'
}]);

// Store
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : '${ctx}/UserServlet?method=getAll'
}),
reader : jsonReader
});
ds.setDefaultSort('id', 'asc');

/**//**
***CRUD Grid
****/

//自定义的checkbox列选择
var sm = new xg.CheckboxSelectionModel({
listeners: //添加监听器
{
//行选择事件
rowselect : function (sm, rowIndex, keep, rec) //行选中事件
{
//得到ext组件用Ext.getCmp('id')
var btn = Ext.getCmp('tbar1');
//选择数量大于2，禁用修改按钮
if(sm.getCount() != 1)
{
btn.disable();
}
else
{
btn.enable();
}
},
//取消选择事件
rowdeselect : function (sm, rowIndex, keep, rec) //行选中事件
{
//得到ext组件用Ext.getCmp('id')
var btn = Ext.getCmp('tbar1');
//数量等于1启动修改按钮
if(sm.getCount() == 1)
{
btn.enable();
}
else
{
btn.disable();
}
}
}

});

//初始化Grid
var grid = new xg.GridPanel({
id:'user-grid',
width:780,
height:450,
frame:true,
title:'简易用户管理',
iconCls:'icon-grid',
hidden: true,
store: ds, //数据仓库
renderTo: document.body,
//列
cm: new xg.ColumnModel([
sm,
{id:'id',header: "索引", width: 40, sortable: true, dataIndex: 'id'},
{header: "用户名", width: 20, sortable: true, dataIndex: 'username'},
{header: "年龄", width: 20, sortable: true, dataIndex: 'age'},
{header: "备注", width: 20, sortable: true, dataIndex: 'remark'}
]),

sm: sm,

viewConfig: {
forceFit:true
},
//分页工具栏
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg : '显示 {0}-{1}条 / 共 {2} 条',
emptyMsg : "无数据。"
}),

//上置内嵌工具栏(按钮)
tbar:[{
text:'添加',
tooltip:'添加一行新数据',
iconCls:'add',
handler : function()
{
add();
}
}, '-', {
text:'修改',
tooltip:'修改一条数据',
iconCls:'option',
id : 'tbar1',
handler : function()
{
modify();
}
},'-',{
text:'删除',
tooltip:'删除数据',
iconCls:'remove',
handler : function()
{
remove();
}
}]

});

//加载数据
ds.load({params:{start:0, limit:10}});
//渲染Grid
grid.render();

//添加用户的函数
var add = function()
{
newFormWin = new Ext.Window({
layout : 'fit',
width : 400,
height : 300,
closeAction : 'hide',
plain : true,
title : '用户管理',
items : form1

});
newFormWin.show();
}

//修改用户的函数
var modify = function()
{
var _record = grid.getSelectionModel().getSelected();
if (!_record)
{
Ext.Msg.alert('请选择要修改的一项！');
}
else
{
myFormWin();
form2.form.load
({
url : '${ctx}/UserServlet?method=getById&id='+ _record.get('id'),
waitMsg : '正在载入数据',

failure : function() {
Ext.Msg.alert('载入失败');
},
success : function() {
//Ext.Msg.alert('载入成功！');
}
});
}
}
//修改用户的窗体
var myFormWin = function() {
newFormWin = new Ext.Window({
layout : 'fit',
width : 400,
height : 300,
closeAction : 'hide',
plain : true,
title : '修改用户',
items : form2
});
newFormWin.show('');
}

/**//*注意JsonReader要放在Form上面，数据的加载顺序问题*/
var jsonFormReader = new Ext.data.JsonReader( {
root : 'list',
totalProperty : 'totalCount',
successProperty : '@success'
}, [
{
name : 'id',
mapping : 'id',
type : 'int',
},
{
name : 'username',
mapping : 'username'
}, {
name : 'age',
mapping : 'age',
type : 'int'
}, {
name : 'remark',
mapping : 'remark'
}]);

//添加用户的Form
form1 = new Ext.FormPanel({
labelWidth : 75,
frame : true,
title : '添加用户',
bodyStyle : 'padding:5px 5px 0',
width : 350,
waitMsgTarget : true,
url : '${ctx}/UserServlet?method=save',
defaults :
{
width : 230
},
defaultType : 'textfield',
items : [
{
fieldLabel : '用户名',
name : 'username', //后台得到数据用
allowBlank : false,
blankText : '用户名不能为空'
}, {
xtype : 'numberfield',
maxValue : 100,
maxText : '年龄不能超过100岁',
minValue : 1,
minText : '年龄不能小于1岁',
fieldLabel : '年龄',
name : 'age',
allowBlank : false,
blankText : '年龄不能为空'
}, new Ext.form.TextArea( {
fieldLabel : '备注',
name : 'remark',
growMin : 234,
maxLength : 50,
maxLengthText : '最大长度不能超过50个字符!'
})],

buttons : [ {
text : '保存',
disabled : false,
handler : function()
{

if(form1.form.isValid())
{
form1.form.submit(
{
url : '${ctx}/UserServlet?method=save',
success : function(from, action)
{
Ext.Msg.alert('添加用户成功！');
ds.load({
params : {
start : 0,
limit : 10
}
});
},
failure : function(form, action) {
Ext.Msg.alert('添加用户失败！');
},
waitMsg : '正在保存数据，稍后'
});
newFormWin.hide();
}
else
{
Ext.Msg.alert('请确认您已经的信息是否已经填写成功!');
}
}
}, {
text : '取消',
handler : function()
{
form1.form.reset();
}
}]
});

//修改用户的Form
form2 = new Ext.FormPanel({
labelWidth : 75,
frame : true,
title : '修改用户',
bodyStyle : 'padding:5px 5px 0',
width : 350,
waitMsgTarget : true,
url : '${ctx}/UserServlet?method=update',
reader : jsonFormReader, //为Form指定reader，修改用
defaults :
{
width : 230
},
defaultType : 'textfield',
items : [
{
xtype: 'hidden',
name : 'id'
},
{
fieldLabel : '用户名',
name : 'username', //后台得到数据用
allowBlank : false,
blankText : '用户名不能为空'
}, {
xtype : 'numberfield',
maxValue : 100,
maxText : '年龄不能超过100岁',
minValue : 1,
minText : '年龄不能小于1岁',
fieldLabel : '年龄',
name : 'age',
allowBlank : false,
blankText : '年龄不能为空'
}, new Ext.form.TextArea( {
fieldLabel : '备注',
name : 'remark',
growMin : 234,
maxLength : 50,
maxLengthText : '最大长度不能超过50个字符!'
})],

buttons : [ {
text : '修改',
disabled : false,
handler : function()
{

if(form2.form.isValid())
{
form2.form.submit(
{
success : function(from, action)
{
Ext.Msg.alert('修改用户成功！');
ds.load({
params : {
start : 0,
limit : 10
}
});
},
failure : function(form, action) {
Ext.Msg.alert('修改用户失败！');
},
waitMsg : '正在保存数据，稍后'
});
newFormWin.hide();
}
else
{
Ext.Msg.alert('请确认您已经的信息是否已经填写成功!');
}
}
}, {
text : '取消',
handler : function()
{
form2.form.reset();
}
}]
});

//删除事件
var remove = function()
{

ds.load({
params : {
start : 0,
limit : 10,
delData : jsonData
}
});

}
});
}
else
{
Ext.Msg.alert('请选择要删除的数据项！');
}
};
/**//***/
Ext.state.Manager.setProvider
( new Ext.state.SessionProvider({state: Ext.appState}));

// tabs for the center
var tabs = new Ext.TabPanel({
region : 'center',
margins : '3 3 3 0',
activeTab : 0,
defaults : {
autoScroll : true
},
items : [{
title : 'ExtJS版',
contentEl: 'user-grid' //要填充的html id
},{
title : 'GTGrid版',
html : 'GTGrid暂不支持与Extjs的整合(window),<a href="${ctx}/gt.jsp">点此显示我做的例子</>'
},{
title : '更多关注',
html : '更多内容可关注<a href="http://www.blogjava.net/supercrsky">我的博客</a>'
}]
});

// Panel for the west
var nav = new Ext.Panel({
title : '菜单目录',
region : 'west',
split : true,
width : 200,
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',
layout: 'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'用户管理',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'用户配置',
html: Ext.example.shortBogusConfig,
border:false,
autoScroll:true,
iconCls:'settings'
}]
});

var win = new Ext.Window({
title : '用户管理微型系统',
closable : true,
maximizable : true,
minimizable : true,
width : '100%',
height : '100%',
plain : true,
layout : 'border',
closable : false,
items : [nav, tabs]
});

win.show();
win.maximize();

});
-->
</script>
</head>
<body>

<script type="text/javascript" src="js/ext-2.2/shared/examples.js"></script>
</body>
</html>

完整的源码下载点此下载

ExtJS GTGrid 简单用户管理

部分源码: 复制代码代码如下: <%@ page language="java" pageEncoding="GBK"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:set var="ctx" value="${pageContext.request.contextPath}&
Django 使用 cookie 实现简单的用户管理功能

Cookie: 1.保存在用户浏览器 2.可以主动清除 3.可以被伪造 4.跨域名 Cookie 不共享创建一个项目:user_manager 和应用: app01 创建数据库,添加 models.py from django.db import models # Create your models here. class Classes(models.Model): caption = models.CharField(max_length=32) class Student(models
Linux帮助和用户管理命令

上篇文章我们介绍了Linux文件搜索命令,其中find是用的最多的也是功能最强大的文件或目录搜索命令,和另一个搜索命令locate的区别是,find命令是全盘搜索,刚创建的文件也能搜索的到,而locate是在文件资料库中进行搜索,对比find命令搜索速度快很多,但是新创建的文件如果没有收录到文件资料库中,使用locate命令是搜索不到的,再就是/tmp目录是不收录到文件资料库的,也就是说使用locate命令搜索不到在/tmp目录下的文件.然后我们介绍搜索命令所在的目录以及别名信息which,搜索
javascript 代码简单的管理菜单

我们_www.jb51.net_简单的管理菜单 body{font-size:12px;} ul,li,h2{margin:0;padding:0;} ul{list-style:none;} #top{width:900px;height:40px;margin:0 auto;background-color:#CCCC00} #top h2{width:150px;height:40px;background-color:#99CC00;float:left;font-size:14px;t
Vue+Spring Boot简单用户登录(附Demo)

1 概述前后端分离的一个简单用户登录 Demo . 2 技术栈 Vue BootstrapVue Kotlin Spring Boot MyBatis Plus 3 前端 3.1 创建工程使用 vue-cli 创建,没安装的可以先安装: sudo cnpm install -g vue @vue/cli 查看版本: vue -V 出现版本就安装成功了. 创建初始工程: vue create bvdemo 由于目前 Vue3 还没有发布正式版本,推荐使用 Vue2 : 等待一段时间构建好了之后
Vue Element前端应用开发之用户管理模块的处理

1.权限管理模块的设计我们知道,权限管理一般都会涉及到用户.组织机构.角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这几方面的内容,其中它们之间的关系基本上是多对多的关系,它们的关系如下所示. 权限模块里面包含的一些主对象表和中间表,中间表主要用来存储两个对象之间的多对多关系,如角色包含多个用户,用户属于多个机构,机构包含多个角色等等. 结合ABP后端提供的接口,Vue前端我们要实现基础的用户.组织机构.角色.功能权限等内容的管理,以及维护它们之间的关系.Vue前端对于权限管理
linux系统下用户管理相关介绍

目录一.用户及用户组存在的意义 1)用户存在的意义 2)用户组存在的意义二.用户及用户组在系统中存在的方式三.用户涉及到的系统配置文件 /etc/shadow 用户认证信息文件四.用户相关操作 1)用户和用户组建立及删除 2)用户和用户组的信息管理五.用户权力下放六.文件权限查看和读取一.用户及用户组存在的意义 1)用户存在的意义系统的资源是有限的,如何合理分配系统资源? 1.身份 account 2.授权 author 3.认证 auth 以上3个 'a' 称为3
浅析MongoDB用户管理

1. 创建一个超级用户 use admin db.createUser( { user: "adminUserName", pwd: "userPassword", roles: [ { roles: "userAdminAnyDatabase", db: "admin" } ] } ) 超级用户的role有两种,userAdmin或者userAdminAnyDatabase(比前一种多加了对所有数据库的访问). db是指定数
asp.net微信开发（已关注用户管理）

公众号可通过本接口来获取帐号的关注者列表,关注者列表由一串OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的)组成.一次拉取调用最多拉取10000个关注者的OpenID,可以通过多次拉取的方式来满足需求. 接口调用请求说明 http请求方式: GET(请使用https协议) 返回说明正确时返回JSON数据包: 错误时返回JSON数据包(示例为无效AppID错误): {"errcode":40013,"errmsg":"invalid
C#实现判断当前操作用户管理角色的方法

本文实例讲述了C#实现判断当前操作用户管理角色的方法.分享给大家供大家参考.具体实现方法如下: /// <summary> /// 判断当前操作用户的管理角色 /// </summary> public static void GetCurrentUserRole() { AppDomain appDomain = System.Threading.Thread.GetDomain(); appDomain.SetPrincipalPolicy(System.Security.Pr

ExtJS GTGrid 简单用户管理

相关推荐

随机推荐