1.Demo.htm
<script src="js/JScript.js" type="text/javascript"></script> <script type="text/javascript">
Ext.onReady(function () {
Ext.QuickTips.init(); //启动悬停提示
Ext.form.Field.prototype.msgTarget = 'side';
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
sm, //复选框
new Ext.grid.RowNumberer({ header: "编号", width: 50 }), //显示序号
{header: "ID", width: 100, dataIndex: "id", tooltip: "id", sortable: true },
{ header: "UID", width: 100, dataIndex: "uid", sortable: true },
//列模型提供了一个回调函数,该函数可以根据当前列的信息进行再加工
// { header: "性别", width: 40, dataIndex: "Sex", align: "center"
// renderer: function (v) {
//if (v == "男") { return "<img src=''/>"; }
//else { return "<img src=''/>"; }
// }
// },
{header: "密码", width: 100, dataIndex: "pwd", sortable: true },
{ header: "Email", width: 100, dataIndex: "email", sortable: true },
{ header: "部门id", width: 100, dataIndex: "departmentid" },
{ header: "状态", width: 100, dataIndex: "status" },
]);
var proxy = new Ext.data.HttpProxy({
url: url
});
var Member = Ext.data.Record.create([
{ name: "id", type: "int", mapping: "ID" },
{ name: "uid", type: "string", mapping: "UID" },
{ name: "pwd", type: "string", mapping: "PWD" },
{ name: "email", type: "string", mapping: "Email" },
{ name: "departmentid", type: "int", mapping: "DepartmentId" },
{ name: "status", type: "int", mapping: "Status" },
]);
var reader = new Ext.data.JsonReader({
totalProperty: "totalProperty",
root: "root"
}, Member);
var store = new Ext.data.Store({
proxy: proxy,
reader: reader
// sortInfo: { field: "id", direction: "DESC" }
});
var pagingToolbar = new Ext.PagingToolbar
({
emptyMsg: "没有数据",
displayInfo: true,
displayMsg: "显示从{0}条数据到{1}条数据,共{2}条数据",
store: store,
pageSize: 10,
items: [
{
text: '添加',
handler: add
}, {
text: '修改',
handler: edit
}, {
text: '删除',
handler: del
}, {
text: '查询',
handler: function () {
Ext.Msg.prompt("Email查询", "请输入要查询的Email:", function (btn, text) {
if (btn == "ok") {
store.filter("email", text);
}
});
}
}
]
});
var dataGrid = new Ext.grid.GridPanel
({
id: "gridPanel",
renderTo: Ext.getBody(),
title: '结果显示',
frame: true,
store: store,
width: 685,
height: 500,
cm: cm,
sm: sm,
bbar: pagingToolbar,
buttonAlign: "center",
buttons: [{
text: "第一行",
handler: function () {
var rsm = dataGrid.getSelectionModel(); //得到选择模型
rsm.selectFirstRow();
}
}, {
text: "上一行",
handler: function () {
var rsm = dataGrid.getSelectionModel(); //得到选择模型
if (!rsm.hasPrevious()) {
Ext.MessageBox.alert("警告", "已到达第一行");
}
else {
rsm.selectPrevious();
}
}
}, {
text: "下一行",
handler: function () {
var rsm = dataGrid.getSelectionModel(); //得到选择模型
if (!rsm.hasNext()) {
Ext.MessageBox.alert("警告", "已到达最后一行");
}
else {
rsm.selectNext();
}
}
}, {
text: "最后一行",
handler: function () {
var rsm = dataGrid.getSelectionModel(); //得到选择模型
rsm.selectLastRow();
}
}, {
text: "全选",
handler: function () {
var rsm = dataGrid.getSelectionModel(); //得到选择模型
rsm.selectAll();
}
}, {
text: "全不选",
handler: function () {
var rsm = dataGrid.getSelectionModel(); //得到选择模型
rsm.deselectRange(0, dataGrid.getView().getRows().length - 1);
}
}, {
text: "反选",
handler: function () {
var rsm = dataGrid.getSelectionModel(); //得到选择模型
for (var i = dataGrid.getView().getRows().length - 1; i >= 0; i--) {
if (rsm.isSelected(i)) {
rsm.deselectRow(i);
}
else {
rsm.selectRow(i, true); //必须保留原来的,否则效果无法显示
}
}
}
}]
});
store.load({ params: { start: 0, limit: 10} });
});
</script>
2.getAll.ashx
<%@ WebHandler Language="C#" Class="getAll" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Text;
public class getAll : IHttpHandler {
public static int start = 0;
public static int limit = 0;
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
Service service = new Service();
if (context.Request["start"] != null && context.Request["limit"] != null)
{
start = int.Parse(context.Request["start"]);
limit = int.Parse(context.Request["limit"]);
context.Response.Write(service.getAllTransferJson());
}
if (context.Request["para"] != null && context.Request["para"].ToString()=="add")
{
Member member = new Member();
member.UID = context.Request["uid"];
member.PWD = context.Request["passw"];
member.Email = context.Request["email"];
member.DepartmentId = int.Parse(context.Request["depid"]);
member.Status = int.Parse(context.Request["status"]);
service.add(member);
}
if (context.Request["para"] != null && context.Request["para"].ToString() == "edit")
{
Member member = new Member();
member.ID = int.Parse(context.Request["id"]);
member.UID = context.Request["uid"];
member.PWD = context.Request["passw"];
member.Email = context.Request["email"];
member.DepartmentId = int.Parse(context.Request["depid"]);
member.Status = int.Parse(context.Request["status"]);
service.edit(member);
}
if (context.Request["para"] != null && context.Request["para"].ToString() == "delete")
{
string ids = context.Request["ids"];
service.delete(ids);
}
}
public bool IsReusable {
get {
return false;
}
}
}
public class Member
{
public int ID { get; set; }
public string UID { get; set; }
public string PWD { get; set; }
public string Email { get; set; }
public int DepartmentId { get; set; }
public int Status { get; set; }
}
public class Service
{
private string conn = @"Data Source=QADB\SQL2005;Initial Catalog=TestDB;User ID=sa;Password=abc@123";
public string Conn { get { return conn; } }
/// <summary>
/// 获取数据转换为json
/// </summary>
/// <returns></returns>
public string getAllTransferJson()
{
using (SqlConnection conn = new SqlConnection(Conn))
{
conn.Open();
string sql = string.Format("select top {0} * from Member where ID not in(select top {1} ID from Member order by ID) order by ID", getAll.limit,getAll.start);
SqlCommand cmd = new SqlCommand(sql, conn);
SqlDataReader reader = cmd.ExecuteReader();
Member member = null;
List<Member> list = new List<Member>();
while(reader.Read())
{
member = new Member();
member.ID = reader.GetInt32(0);
member.UID = reader.GetString(1);
member.PWD = reader.GetString(2);
member.Email = reader.GetString(3);
member.DepartmentId = reader.GetInt32(4);
member.Status = reader.GetInt32(5);
list.Add(member);
}
conn.Close();
JavaScriptSerializer serializer = new JavaScriptSerializer();
StringBuilder sb=new StringBuilder();
serializer.Serialize(list, sb);
string str = "{totalProperty:" + getRecords() + ",root:";
return str+sb.ToString()+"}";
}
}
/// <summary>
/// 获得总记录条数
/// </summary>
public int getRecords()
{
int result = 0;
using (SqlConnection conn = new SqlConnection(Conn))
{
conn.Open();
SqlCommand cmd = new SqlCommand("select count(*) from Member", conn);
result=(Int32)cmd.ExecuteScalar();
conn.Close();
return result;
}
}
/// <summary>
/// 新增
/// </summary>
public int add(Member member)
{
int result = 0;
using (SqlConnection conn = new SqlConnection(Conn))
{
conn.Open();
string sql = string.Format("insert into Member values({0},'{1}','{2}',{3},{4})",member.UID,member.PWD,member.Email,member.DepartmentId,member.Status);
SqlCommand cmd = new SqlCommand(sql, conn);
result = cmd.ExecuteNonQuery();
conn.Close();
return result;
}
}
/// <summary>
/// 修改
/// </summary>
public int edit(Member member)
{
int result = 0;
using (SqlConnection conn = new SqlConnection(Conn))
{
conn.Open();
string sql = string.Format("update Member set UID='{0}',PWD='{1}',Email='{2}',DepartmentId={3},Status={4} where ID={5}", member.UID, member.PWD, member.Email, member.DepartmentId, member.Status,member.ID);
SqlCommand cmd = new SqlCommand(sql, conn);
result = cmd.ExecuteNonQuery();
conn.Close();
return result;
}
}
/// <summary>
/// 删除
/// </summary>
public int delete(string ids)
{
string[] arr= ids.Split(',');
int result = 0;
using (SqlConnection conn = new SqlConnection(Conn))
{
conn.Open();
for (int i = 0; i < arr.Length;i++ )
{
string sql = string.Format("delete from Member where id={0}",arr[i]);
SqlCommand cmd = new SqlCommand(sql, conn);
result = cmd.ExecuteNonQuery();
}
conn.Close();
return result;
}
}
}
3.JScript.js
var url = "getAll.ashx";
function add() {
var win = new Ext.Window({
title: "添加记录窗口",
width: 347,
height: 250,
iconCls: "center_icon",
items: [{
xtype: "form",
id: "form1",
height: "250",
borderStyle: "padding-top:3px",
frame: true,
defaultType: "textfield",
labelAlign: "right",
labelWidth: 57,
defaults: {
allowBlank: false, width: 200
},
items: [
{ fieldLabel: "UID", id: "uid", blankText: "请输入UID" },
{ fieldLabel: "密码", id: "passw", blankText: "请输入密码" },
{ fieldLabel: "Email", id: "email", blankText: "请输入Email", vtype: "email", vtypeText: "您输入的Email格式不正确" },
{ fieldLabel: "部门ID", id: "depid", blankText: "请输入部门ID", xtype: "numberfield" },
{ fieldLabel: "状态", id: "status", blankText: "状态不能为空", xtype: "numberfield" },
{
fieldLabel: "备注", regex: /^[\u4E00-\u9FA5]+$/, regexText: "只能输入中文"
}
]
}],
buttons: [
{
xtype: "button",
text: "确定",
handler: function () {
if (!Ext.getCmp("form1").getForm().isValid()) {
alert("您输入的信息有误,请重新输入...");
return false;
}
var uid = Ext.getCmp("uid").getValue("");
var passw = Ext.getCmp("passw").getValue("");
var email = Ext.getCmp("email").getValue("");
var depid = Ext.getCmp("depid").getValue("");
var status = Ext.getCmp("status").getValue("");
Ext.Ajax.request({
url: url + "?para=add",
params: {
"uid": uid, "passw": passw, "email": email, "depid": depid, "status": status
},
success: function (reponse, option) {
Ext.getCmp("gridPanel").store.reload();
alert("添加成功!");
},
failure: function () {
alert("添加失败!");
}
});
}
},
{
xtype: "button",
text: "取消",
handler: function () {
Ext.getCmp("uid").setValue("");
Ext.getCmp("passw").setValue("");
Ext.getCmp("email").setValue("");
Ext.getCmp("depid").setValue("");
Ext.getCmp("status").setValue("");
}
}
]
});
win.show();
}
function edit() {
var selRecords = Ext.getCmp("gridPanel").getSelectionModel().getSelections();
var id,uid, passw, email, depid, status;
if (selRecords.length >= 1) {
id = selRecords[0].get("id");
uid = selRecords[0].get("uid");
passw = selRecords[0].get("pwd");
email = selRecords[0].get("email");
depid = selRecords[0].get("departmentid");
status = selRecords[0].get("status")
}
else {
Ext.MessageBox.alert("提示消息", "您未选中行");
return false;
}
var win = new Ext.Window({
title: "修改记录窗口",
width: 347,
height: 200,
items: [{
xtype: "form",
id:"form1",
height: "200",
borderStyle: "padding-top:3px",
frame: true,
defaultType: "textfield",
labelAlign: "right",
labelWidth: 57,
defaults: {
allowBlank: false, width: 200
},
items: [
{ fieldLabel: "UID", id: "uid", blankText: "请输入UID",value:uid },
{ fieldLabel: "密码", id: "passw", blankText: "请输入密码",value:passw },
{ fieldLabel: "Email", id: "email", blankText: "请输入Email", vtype: "email", vtypeText: "您输入的Email格式不正确",value:email},
{ fieldLabel: "部门ID", id: "depid", blankText: "请输入部门ID", xtype: "numberfield", value: depid },
{ fieldLabel: "状态", id: "status", blankText: "状态不能为空", xtype: "numberfield",value:status }
]
}],//vtype的值:alpha,alphanum,email,url
buttons: [
{
xtype: "button",
text: "确定",
handler: function () {
if (!Ext.getCmp("form1").getForm().isValid()) {
alert("您输入的信息有误,请重新输入...");
return false;
}
uid = Ext.getCmp("uid").getValue();
passw = Ext.getCmp("passw").getValue();
email = Ext.getCmp("email").getValue();
depid = Ext.getCmp("depid").getValue();
status = Ext.getCmp("status").getValue();
Ext.Ajax.request({
url: url + "?para=edit",
params: {
"id":id,"uid": uid, "passw": passw, "email": email, "depid": depid, "status": status },
success: function (reponse, option) {
Ext.getCmp("gridPanel").store.reload();
alert("修改成功");
},
failure: function () {
alert("修改失败");
}
});
}
},
{
xtype: "button",
text: "取消",
handler: function () {
// alert("取消");
}
}
]
}).show();
}
function del() {
var selRecords = Ext.getCmp("gridPanel").getSelectionModel().getSelections();
var len = selRecords.length;
var ids = "";
if (len == 0) {
Ext.MessageBox.alert("提示消息", "您未选中行");
return false;
}
Ext.Msg.confirm("提示", "确定要删除吗?", function (btn) {
if (btn == "yes") {
for (var i = 0; i < len; i++) {
if (i == len - 1) { ids += selRecords[i].get("id"); }
else {
ids += selRecords[i].get("id") + ",";
}
}
Ext.Ajax.request({
url: url + "?para=delete",
params: {
"ids": ids
},
success: function (reponse, option) {
Ext.getCmp("gridPanel").store.reload();
},
failure: function () {
alert("删除失败");
}
});
}
})
}
4.运行效果: