ASP.NET + EXTJS 实现类似GridView行内编辑、Pannel、分页、增删改查、数据验证，格式转换

最新推荐文章于 2021-07-02 17:22:23 发布

ZHUKY

最新推荐文章于 2021-07-02 17:22:23 发布

阅读量2.5k

点赞数 1

分类专栏： Extjs ASP.NET 文章标签： extjs asp.net parameters function string null

Extjs 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

ASP.NET

1 篇文章 0 订阅

订阅专栏

Extjs版本：3.2.1
Newtonsoft.Json.dll （把数据序列化为Json格式）文件可在Newtonsoft官网去下载http://james.newtonking.com/
AjaxPro.2.dll （直接与页面后台通过Ajax方式交互）官网地址：http://ajaxpro.codeplex.com
Oracle.DataAccess.dll 由Oracle安装文件中获取，提供对Oracle数据库的操作相关。示例使用Oracle10g，文件路径F:/oracle/product/10.2.0/db_1/BIN 可根据自己安装目录寻取

1、Oracle数据库表：

create table MacInfo (
   MacInfo_ID           varchar2(17)                  primary key,
   Com_ID               int                  null,
   ComUser_ID           int                  null,
   Mac_Address          varchar2(17)          not null,
   Mac_ApplyIP          int                  null,
   Mac_Status           int                  null,
   Mac_UserName         nvarchar2(50)         null,
   Mac_Remark           nvarchar2(200)        null
)

2、项目相关配置：

I、添加对Oracle.DataAccess.dll、AjaxPro.2.dll、Newtonsoft.Json.dll的引用
II、在Web.config中添加如下配置
<configuration>
  <location path="ajaxpro">
   <system.web>
    <httpHandlers>
     <add verb="GET,POST" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
    </httpHandlers>
   </system.web>
  </location>
</configuration>

3、页面关键代码：
说明：页面使用到了ProgressBarPager.js（滚动条式分页）和RowEditor.js（行内编辑）文件
RowEditor.js文件做了点修改。代码如下：

onRowClick: function(g, rowIndex, e){
        if(state=='add'){}else{
            if(this.clicksToEdit == 'auto'){
                var li = this.lastClickIndex;
                this.lastClickIndex = rowIndex;
                if(li != rowIndex && !this.isVisible()){
                    return;
                }
            }
            this.startEditing(rowIndex, false);
            this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
        }
    },

    onRowDblClick: function(g, rowIndex, e){
        if(state=='add'){}else{
            this.startEditing(rowIndex, false);
            this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
        }
    },

下面是数据展示主页面代码：ExtEditPage.aspx

<head runat="server">
    <title>无标题页</title>
    <link href="Extjs/resources/css/ext-all.css" mce_href="Extjs/resources/css/ext-all.css" rel="Stylesheet" type="text/css" />
    <mce:script src="Extjs/adapter/ext/ext-base.js" mce_src="Extjs/adapter/ext/ext-base.js" type="text/javascript"></mce:script>
    <mce:script src="Extjs/ext-all-debug.js" mce_src="Extjs/ext-all-debug.js" type="text/javascript"></mce:script>
    <mce:script src="Extjs/ux/ProgressBarPager.js" mce_src="Extjs/ux/ProgressBarPager.js" type="text/javascript"></mce:script>
    <link rel="stylesheet" type="text/css" href="Extjs/css/RowEditor.css" mce_href="Extjs/css/RowEditor.css" />
    <mce:script src="Extjs/ux/RowEditor.js" mce_src="Extjs/ux/RowEditor.js" type="text/javascript"></mce:script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <mce:script type="text/javascript"></mce:script>
    <select id="selState" style="display:none" mce_style="display:none">
        <option value="-1">未审批</option>
        <option value="1">已通过</option>
        <option value="0">已停用</option>
    </select>
    </div>
    <div id="topic-grid" style="margin:10px 0px 0px 10px" mce_style="margin:10px 0px 0px 10px" ></div>
    </form>
</body>
</html>

页面后台：ExtEditPage.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using AjaxPro;
public partial class ExtEditPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e){
//如果页面有命名空间则需要写成typeof(命名空间.ExtEditPage)，前台使用同样使用命名空间.ExtEditPage
        AjaxPro.Utility.RegisterTypeForAjax(typeof(ExtEditPage));//注册，必须的
    }
    [AjaxMethod]
    public string ParseIPAddressToStr(object gip){
        int ip = Convert.ToInt32(gip);
        return string.Format("{3}.{2}.{1}.{0}",
            ip & 0xff,
            ip >> 8 & 0xff,
            ip >> 16 & 0xff,
            ip >> 24 & 0xff);
    }
    [AjaxMethod]
    public string Update(object id,object mac,object status){
        MacInfo macInfo = new MacInfo();
        macInfo.MacInfo_ID = id.ToString();
        macInfo.Mac_Address = mac.ToString();
        macInfo.Mac_Status = Convert.ToInt32(status);
        return DMacInfo.Update(macInfo).ToString();
    }
    [AjaxMethod]
    public string Del(object id){
        return DMacInfo.Delete(id.ToString()).ToString();
    }
    [AjaxMethod]
    public string Add(object mac, object status,object remark){
        MacInfo macinfo = new MacInfo();
        macinfo.MacInfo_ID = Common.GetDateStr(DateTime.Now);
        macinfo.Mac_UserName = "System@adol.cn";
        macinfo.Mac_Status = Convert.ToInt32(status);
        macinfo.Mac_Remark = remark.ToString();
        macinfo.Mac_ApplyIP = Common.ParseIPAddress("192.168.0.130");
        macinfo.Mac_Address = mac.ToString().Replace(":","-").ToUpper();
        macinfo.ComUser_ID = 271;
        macinfo.Com_ID = 130;
        return DMacInfo.Add(macinfo).ToString();
    }
}

DMacInfo类：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Oracle.DataAccess.Client;
using Oracle.DataAccess.Types;
using System.Collections.Generic;
using System.Text;

public class DMacInfo
{
public DMacInfo(){}

    /// <summary>
    /// 增加一条数据
    /// </summary>
    public static int Add(MacInfo model) {
        StringBuilder strSql = new StringBuilder();
        strSql.Append("insert into MacInfo(");
        strSql.Append("MacInfo_ID,Com_ID,ComUser_ID,Mac_Address,Mac_ApplyIP,Mac_Status,Mac_UserName,Mac_Remark)");
        strSql.Append(" values (");
        strSql.Append(":MacInfo_ID,:Com_ID,:ComUser_ID,:Mac_Address,:Mac_ApplyIP,:Mac_Status,:Mac_UserName,:Mac_Remark)");
        OracleParameter[] parameters = {
                    new OracleParameter(":MacInfo_ID", OracleDbType.Varchar2,17),
     new OracleParameter(":Com_ID", OracleDbType.Int32),
     new OracleParameter(":ComUser_ID", OracleDbType.Int32),
     new OracleParameter(":Mac_Address", OracleDbType.Varchar2,20),
     new OracleParameter(":Mac_ApplyIP", OracleDbType.Int32),
     new OracleParameter(":Mac_Status", OracleDbType.Int32),
     new OracleParameter(":Mac_UserName", OracleDbType.NVarchar2,50),
     new OracleParameter(":Mac_Remark", OracleDbType.NVarchar2,200)};
        parameters[0].Value = model.MacInfo_ID;
        parameters[1].Value = model.Com_ID;
        parameters[2].Value = model.ComUser_ID;
        parameters[3].Value = model.Mac_Address;
        parameters[4].Value = model.Mac_ApplyIP;
        parameters[5].Value = model.Mac_Status;
        parameters[6].Value = model.Mac_UserName;
        parameters[7].Value = model.Mac_Remark;
        return DBHelper.ExecuteCommand(strSql.ToString(),CommandType.Text,parameters);
    }

    /// <summary>
    /// 更新一条数据
    /// </summary>
    public static int Update(MacInfo model){
        StringBuilder strSql = new StringBuilder();
        strSql.Append("update MacInfo set ");
        strSql.Append("Mac_Address=:Mac_Address,");
        strSql.Append("Mac_Status=:Mac_Status");
        strSql.Append(" where MacInfo_ID=:MacInfo_ID");
        OracleParameter[] parameters = {
                    new OracleParameter(":Mac_Address", OracleDbType.Varchar2,17),
                    new OracleParameter(":Mac_Status", OracleDbType.Int32,4),
                    new OracleParameter(":MacInfo_ID", OracleDbType.Varchar2,17)};
        parameters[0].Value = model.Mac_Address;
        parameters[1].Value = model.Mac_Status.ToString();
        parameters[2].Value = model.MacInfo_ID;
        return DBHelper.ExecuteCommand(strSql.ToString(), CommandType.Text, parameters);
    }

    /// <summary>
    /// 删除一条数据
    /// </summary>
    public static int Delete(string MacInfo_ID){
        StringBuilder strSql = new StringBuilder();
        strSql.Append("delete MacInfo ");
        strSql.Append(" where MacInfo_ID=:MacInfo_ID ");
        OracleParameter[] parameters = {
     new OracleParameter(":MacInfo_ID", OracleDbType.NVarchar2,17)};
        parameters[0].Value = MacInfo_ID;
        return DBHelper.ExecuteCommand(strSql.ToString(), CommandType.Text, parameters);
    }

    /// <summary>
    /// 得到一个对象实体
    /// </summary>
    public static MacInfo GetModel(string MacInfo_ID){
        StringBuilder strSql = new StringBuilder();
        MacInfo model = null;
        strSql.Append("select MacInfo_ID,Com_ID,ComUser_ID,Mac_Address,Mac_ApplyIP,Mac_Status,Mac_UserName,Mac_Remark from MacInfo ");
        strSql.Append(" where MacInfo_ID=:MacInfo_ID ");
        OracleParameter[] parameters = {
     new OracleParameter(":MacInfo_ID", OracleDbType.NVarchar2,17)};
        parameters[0].Value = MacInfo_ID;

        OracleDataReader dr = DBHelper.GetDataReader(strSql.ToString(), CommandType.Text, parameters);
        if(dr.Read()){
            model = BindReader(dr);
        }
        dr.Dispose();
        dr.Close();
        return model;
    }

    public static List<MacInfo> GetModelList(int dataStart, int pageSize, string strWhere, out int PageCount, out int RecordCount){
        StringBuilder strSql = new StringBuilder();
        strSql.Append("select * from (select a.*,Rownum rnum from (select * from macInfo order by MacInfo_ID desc) a where ROWNUM <=" + (dataStart + pageSize) + " ) where rnum > " + dataStart + "");
        PageCount = 0;
        RecordCount = 0;
        List<MacInfo> arr = new List<MacInfo>();
        OracleDataReader dr = DBHelper.GetDataReader(strSql.ToString(), CommandType.Text);
        if(dr != null){
            MacInfo element;
            while(dr.Read()){
                element = BindReader(dr);
                arr.Add(element);
            }
            dr.Dispose();
            dr.Close();
        }
        strSql.Remove(0, strSql.Length);
        //strSql.Append("select max(rnum) from (select rownum rnum from macinfo);");
        strSql.Append("select count(macinfo_id) from macinfo");
        object obj = DBHelper.GetScalar(strSql.ToString(), CommandType.Text);
        if(obj != null){
            RecordCount = Convert.ToInt32(obj);
            PageCount = RecordCount % pageSize == 0 ? (RecordCount / pageSize) : (RecordCount / pageSize + 1);
        }
        return arr;
    }

    /// <summary>
    /// 绑定对象实体
    /// </summary>
    public static MacInfo BindReader(OracleDataReader dr)
    {
        MacInfo model = null;
        if(dr != null){
            model = new MacInfo();
            if(dr["MacInfo_ID"].ToString() != ""){
                model.MacInfo_ID = dr["MacInfo_ID"].ToString();
            }
            if(dr["Com_ID"].ToString() != ""){
                model.Com_ID = int.Parse(dr["Com_ID"].ToString());
            }
            if(dr["ComUser_ID"].ToString() != ""){
                model.ComUser_ID = int.Parse(dr["ComUser_ID"].ToString());
            }
            model.Mac_Address = dr["Mac_Address"].ToString();
            if(dr["Mac_ApplyIP"].ToString() != ""){
                model.Mac_ApplyIP = int.Parse(dr["Mac_ApplyIP"].ToString());
            }
            if(dr["Mac_Status"].ToString() != ""){
                model.Mac_Status = int.Parse(dr["Mac_Status"].ToString());
            }
            model.Mac_UserName = dr["Mac_UserName"].ToString();
            model.Mac_Remark = dr["Mac_Remark"].ToString();
            return model;
        }else{
            return null;
        }
    }
}

DBHelper类：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Transactions;
using Oracle.DataAccess.Client;

/// <summary>
/// DBHelper 的摘要说明
/// </summary>
public class DBHelper
{
    public DBHelper(){    }
    //构造函数从配置文件中读取连接字符串
    public static String ConnectionString = "Data Source=orcl;User ID=hr;Password=hr;";

    /// <summary>
    /// 获取影响多少行
    /// </summary>
    /// <param name="queryString">T-SQL语句</param>
    /// <param name="commandType">命令类型</param>
    /// <param name="param">T-SQL参数</param>
    /// <returns>影响多少行</returns>
    public static int ExecuteCommand(string queryString, CommandType commandType, params OracleParameter[] param){
        int flag = 0;
        using(OracleConnection con = new OracleConnection(ConnectionString)){
            OracleCommand command = new OracleCommand(queryString, con);
            command.CommandType = commandType;
            if(param != null){
                for(int i = 0; i < param.Length; i++){
                    command.Parameters.Add(param[i]);
                }
            }
            try{
                command.Connection.Open();
                flag = command.ExecuteNonQuery();
            }catch(Exception ex){
                throw ex;
            }finally{
                command.Connection.Close();
                command.Dispose();
                command = null;
            }
        }
        return flag;
    }

    /// <summary>
    /// 获取DataSet对象
    /// </summary>
    /// <param name="queryString">T-SQL语句</param>
    /// <param name="commandType">命令类型</param>
    /// <param name="param">T-SQL参数</param>
    /// <returns>DataSet对象</returns>
    public static DataSet GetDataSet(string queryString, CommandType commandType, params OracleParameter[] param){
        DataSet ds = new DataSet();
        using(OracleConnection con = new OracleConnection(ConnectionString)){
            OracleDataAdapter adapter = new OracleDataAdapter(queryString, con);
            adapter.SelectCommand.CommandType = commandType;
            if(param != null){
                for(int i = 0; i < param.Length; i++){
                    adapter.SelectCommand.Parameters.Add(param[i]);
                }
            }
            try{
                adapter.Fill(ds);
            }catch(Exception ex){
                throw ex;
            }finally{
                adapter.Dispose();
                adapter = null;
            }
        }
        return ds;
    }

    /// <summary>
    /// 获取DataReader对象
    /// </summary>
    /// <param name="queryString">T-SQL语句</param>
    /// <param name="commandType">命令类型</param>
    /// <param name="param">T-SQL参数</param>
    /// <returns>DataReader对象</returns>
    public static OracleDataReader GetDataReader(string queryString, CommandType commandType, params OracleParameter[] param){
        OracleDataReader dataReader = null;
        OracleConnection con = new OracleConnection(ConnectionString);
        OracleCommand command = new OracleCommand(queryString, con);
        command.CommandType = commandType;
        if(param != null){
            for(int i = 0; i < param.Length; i++){
                command.Parameters.Add(param[i]);
            }
        }
        try{
            command.Connection.Open();
            dataReader = command.ExecuteReader(CommandBehavior.CloseConnection);
        }catch(Exception ex){
            throw ex;
        }
        return dataReader;
    }

    /// <summary>
    /// 查询单个数据
    /// </summary>
    /// <param name="queryString">T-SQL语句</param>
    /// <param name="commandType">命令类型</param>
    /// <param name="param">T-SQL参数</param>
    /// <returns>Object对象</returns>
    public static Object GetScalar(string queryString, CommandType commandType, params OracleParameter[] param){
        Object obj = null;
        using(OracleConnection con = new OracleConnection(ConnectionString)){
            OracleCommand command = new OracleCommand(queryString, con);
            command.CommandType = commandType;
            if(param != null){
                for(int i = 0; i < param.Length; i++){
                    command.Parameters.Add(param[i]);
                }
            }
            try{
                command.Connection.Open();
                obj = command.ExecuteScalar();
            }catch(Exception ex){
                throw ex;
            }finally{
                command.Connection.Close();
                command.Dispose();
                command = null;
            }
        }
        return obj;
    }
}

Model类：

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public class MacInfo
{
public MacInfo(){ }

    #region Model
    private string _macinfo_id;
    private int _com_id;
    private int _comuser_id;
    private string _mac_address;
    private int _mac_applyip;
    private int _mac_status;
    private string _mac_username;
    private string _mac_remark;

    public string MacInfo_ID{
        set { _macinfo_id = value; }
        get { return _macinfo_id; }
    }
    public int Com_ID{
        set { _com_id = value; }
        get { return _com_id; }
    }
    public int ComUser_ID{
        set { _comuser_id = value; }
        get { return _comuser_id; }
    }
    public string Mac_Address{
        set { _mac_address = value; }
        get { return _mac_address; }
    }
    public int Mac_ApplyIP{
        set { _mac_applyip = value; }
        get { return _mac_applyip; }
    }
    public int Mac_Status{
        set { _mac_status = value; }
        get { return _mac_status; }
    }
    public string Mac_UserName{
        set { _mac_username = value; }
        get { return _mac_username; }
    }
    public string Mac_Remark{
        set { _mac_remark = value; }
        get { return _mac_remark; }
    }
    #endregion Model
}

运行效果：

ZHUKY

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
ASP.NET + EXTJS 实现类似GridView行内编辑、Pannel、分页、增删改查、数据验证，格式转换

Extjs版本：3.2.1Newtonsoft.Json.dll （把数据序列化为Json格式）文件可在Newtonsoft官网去下载http://james.newtonking.com/AjaxPro.2.dll （直接与页面后台通过Ajax方式交互）官网地址：ht
复制链接

扫一扫

专栏目录