真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

jQueryEasyUI之DataGrid使用示例

jQuery EasyUI是一個(gè)輕量級的Web前端開發(fā)框架，提供了很多的現(xiàn)成組件幫助程序員減輕前端代碼開發(fā)量，之前有個(gè)項(xiàng)目中就用到了其中的DataGrid。

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),深澤網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:深澤等地區(qū)。深澤做網(wǎng)站價(jià)格咨詢:18982081108

jQuery EasyUI框架的官方主頁：http://www.jeasyui.com/demo/main/index.php?？梢韵螺d完整開發(fā)包，里面有示例代碼可以參考。

由于我使用的是ASP.NET webform技術(shù)，下面我就貼出主要的代碼以供參考。

在頁面中首先要引用相關(guān)的css以及js文件，這樣才能使用該組件。

css部分：

 
 
 

js部分：

由于jQuery EasyUI基于jQuery，所以必需要先引入jQuery文件。而pagination.js是EasyUI的分頁插件，后面會看到分頁的效果。


        $(function () {
            var qParams = { mode: 'Query', hfjia: $("#<%=hfjia.ClientID %>").val(), sfz: $("#sfz").val() }; //取得查詢參數(shù)
            var oldRowIndex;
            var opt = $("#grid");
            opt.datagrid({
                width: '780',
                height: '440',
                nowrap: false,
                striped: true,
                fitColumns: true,
                singleSelect: true,
                queryParams: qParams,  //參數(shù)
                url: '../Service/ServiceHanlder.ashx',
                //idField: 'id',  //主索引
                //frozenColumns: [[{ field: 'ck', checkbox: true}]], 
                pageSize: 20,
                pageList: [20, 25, 30],
                pagination: true, //是否啟用分頁
                rownumbers: true, //是否顯示列數(shù)

                onClickRow: function (rowIndex) {
                    if (oldRowIndex == rowIndex) {
                        opt.datagrid('clearSelections', oldRowIndex);
                    }
                    var selectRow = opt.datagrid('getSelected');
                    oldRowIndex = opt.datagrid('getRowIndex', selectRow);
                },
                columns: [[
                    {
                        title: "瀏覽檔案", width: 20, align: "center", formatter: function (value, rowData, rowIndex) {
                            return " 查看檔案 ";
                        }
                    },
                    { field: 'DAGInPosition', title: "檔案位置", width: 40, align: "center" },
                    { field: 'PersonIdNum', title: "***號", width: 80, align: "center" },
                    { field: 'PersonName', title: "姓名", width: 40, align: "center" },
                    { field: 'PersonSex', title: "性別", width: 30, align: "center" },
                    { field: 'DAId', title: "檔案編號", width: 60, align: "center" }
                //                    { field: 'DAGInOrg', title: "業(yè)務(wù)經(jīng)辦機(jī)構(gòu)", width: 60, align: "center" }
                ]]
            }).datagrid("getPager").pagination({
                beforePageText: '第', //頁數(shù)文本框前顯示的漢字  
                afterPageText: '頁/{pages}頁',
                displayMsg: '共{total}條記錄',
                onBeforeRefresh: function () {
                    return true;
                }
            });
        });

請注意這段長長的js代碼，這是該頁面的核心代碼。里面的參數(shù)設(shè)置請注意，主要就是通過js動態(tài)的構(gòu)造datagird。

該頁面的Body部分：


    
    
    

        
            
                
                
                    檔案查詢
            

        
                                           
                              
         

其中id為grid的table部分，與上面的js部分中g(shù)rid對應(yīng)。

該頁面的后臺代碼部分：

protected void Page_Load(object sender, EventArgs e)
{
    string dagid = Request.QueryString["dagid"];
    hfjia.Value = dagid;
}

很簡單就是給前臺存放的一個(gè)隱藏域賦值，以在頁面刷新時(shí)保持狀態(tài)（記錄檔案架的位置）。
后臺的數(shù)據(jù)源地址為ServiceHanlder.ashx，看看這里面的詳細(xì)代碼。

namespace DAMIS.Pad2.Service
{
    /// 
    /// ServiceHanlder 的摘要說明
    /// 
    public class ServiceHanlder : IHttpHandler
    {
        public void Proce***equest(HttpContext context)
        {
            if (!string.IsNullOrEmpty(context.Request["mode"]))
            {
                if (context.Request["mode"].Equals("Query"))
                {
                    if (!string.IsNullOrEmpty(context.Request["sfz"]))
                    {
                        string sfz = context.Request["sfz"];
                        UserInfo userInfo = GetUserInfoById(sfz);

                        if (userInfo != null)
                        {
                            ReturnData rd = new ReturnData();
                            rd.total = 1;
                            rd.rows = new List() { userInfo };

                            DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType());
                            json.WriteObject(context.Response.OutputStream, rd);
                        }
                        else
                        {
                            context.Response.Write("");
                        }
                    }
                    else
                    {
                        string hfjia = Regex.Match(context.Request["hfjia"].Split(';')[0], @"\d+").Value;
                        string page = context.Request["page"];
                        string rows = context.Request["rows"];

                        QueryData(hfjia, page, rows, context);
                    }
                }

                if (context.Request["mode"].Equals("QueryInner"))
                {
                    string dajid = context.Request["dajid"].Trim('\'');
                    string dagid = context.Request["dagid"];

                    string hfjia = string.Join("-", dajid, dagid);
                    string page = context.Request["page"];
                    string rows = context.Request["rows"];

                    QueryData(hfjia, page, rows, context);
                }
            }
        }

        #region 查詢檔案（分頁）
        /// 
        /// 查詢檔案（分頁）
        /// 
        /// 架號
        /// 頁數(shù)
        /// 行數(shù)
        /// 
        public void QueryData(string hfjia, string page, string rows, HttpContext context)
        {
            List list = new List();
            string msg = string.Empty;
            DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, out msg);

            foreach (DataRow dr in dt.Rows)
            {
                list.Add(new UserInfo()
                {
                    PersonIdNum = dr["PersonIdNum"].ToString(),
                    PersonName = dr["PersonName"].ToString(),
                    PersonSex = dr["PersonSex"].ToString(),
                    DAId = dr["DAId"].ToString(),
                    DABusKindName = dr["DABusKindName"].ToString(),
                    DAKindName = dr["DAKindName"].ToString(),
                    DALevelCodeName = dr["DALevelCodeName"].ToString(),
                    DAGInPosition = dr["DAGInPosition"].ToString(),
                    DAGInUserId = dr["DAGInUserId"].ToString(),
                    DAGInOrg = dr["DAGInOrg"].ToString(),
                    IsValid = dr["IsValid"].ToString(),
                });
            }

            list = list.OrderBy(x => x.DAGInPosition).ToList();

            ReturnData rd = new ReturnData();
            rd.total = dt.Rows.Count;
            rd.rows = list.Where(x => x.IsValid == "0").Skip(Convert.ToInt32(rows) * (Convert.ToInt32(page) - 1)).Take(Convert.ToInt32(rows)).ToList();
            DataContractJsonSerializer json = new DataContractJsonSerializer(rd.GetType());
            json.WriteObject(context.Response.OutputStream, rd);
        }
        #endregion

        #region 通過***號獲取用戶基本信息
        /// 
        /// 通過***號獲取用戶基本信息
        /// 
        /// ***號
        /// 
        public static UserInfo GetUserInfoById(string id)
        {
            string hfjia = CommonBLL.GetUserPositionById(id);
            string msg = string.Empty;
            if (!string.IsNullOrEmpty(hfjia))
            {
                hfjia = hfjia.Split('-')[0] + "-" + hfjia.Split('-')[1];
                DataTable dt = DAGCommonBLL.DAGPositionGetInformation(hfjia, out msg);
                if (dt != null && dt.Rows.Count > 0)
                {
                    DataRow dr = dt.Select("personidnum = '" + id + "'").FirstOrDefault();

                    UserInfo userInfo = new UserInfo()
                    {
                        PersonIdNum = dr["PersonIdNum"].ToString(),
                        PersonName = dr["PersonName"].ToString(),
                        PersonSex = dr["PersonSex"].ToString(),
                        DAId = dr["DAId"].ToString(),
                        DABusKindName = dr["DABusKindName"].ToString(),
                        DAKindName = dr["DAKindName"].ToString(),
                        DALevelCodeName = dr["DALevelCodeName"].ToString(),
                        DAGInPosition = dr["DAGInPosition"].ToString(),
                        DAGInUserId = dr["DAGInUserId"].ToString(),
                        DAGInOrg = dr["DAGInOrg"].ToString(),
                        IsValid = dr["IsValid"].ToString(),
                    };
                    return userInfo;
                }
            }
            return null;
        }
        #endregion

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

這里面也沒什么好說的，就是為前端頁面提供數(shù)據(jù)。代碼完全可以進(jìn)一步精簡、處理，這里就不修正了。

里面用到的一個(gè)實(shí)體類：

    /// 
    /// 分頁返回?cái)?shù)據(jù)
    /// 
    public class ReturnData
    {
        /// 
        /// 數(shù)據(jù)總數(shù)
        /// 
        public int total { get; set; }

        /// 
        /// 具體數(shù)據(jù)
        /// 
        public List rows { get; set; }
    }

最終的效果圖：

jQuery EasyUI之DataGrid使用示例


當(dāng)前名稱：jQueryEasyUI之DataGrid使用示例
本文URL：http://weahome.cn/article/pgcgpe.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部