Asp.Net 中Grid詳解兩種方法使用LigerUI加載數據庫數據填充數據分頁

本文轉載自查看原文 2018-05-24 01:36 1147 Grid/ asp.net/ LigerUI/ html/ MVC/ ashx

1、關於LigerUI：

LigerUI 是基於jQuery 的UI框架，其核心設計目標是快速開發、使用簡單、功能強大、輕量級、易擴展。簡單而又強大，致力於快速打造Web前端界面解決方案，可以應用於.net,jsp,php等等web服務器環境。

　　LigerUI演示地址：http://www.ligerui.com

　　LigerUI API地址：http://api.ligerui.com/

　　官網百度雲盤最新下載地址：https://pan.baidu.com/s/1o83vRZk

2、在MVC中使用LigerUI 填充Grid

2.1、新建一個空的MVC項目把下載框架中Source文件夾下面的Lib目錄復制到項目根目錄，記住是Lib整個目錄，為了防止文件名重復將他重命名一下如下圖所示

2.2、新建一個控制Home，在Home控制器中添加對應的視圖

2.3、在視圖里添加Grid所需要的JS跟CSS，這里主要的就是前面4個路徑不能寫錯，這里特別提示一下不要引用MVC創建項目里Script文件夾下面的jQuery 我的用了就出錯了問題還沒有找到我直接刪除了里面的js 也沒有引用布局。

2.4不分頁或者本地分頁的視圖代碼：里面的代碼都通俗易懂通過URL到控制器里面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="~/ScriptStyle/ligerUI/skins/Aqua/css/ligerui-all.css" />
    <script src="~/ScriptStyle/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="~/ScriptStyle/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="~/ScriptStyle/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="~/ScriptStyle/ligerUI/js/ligerui.min.js" type="text/javascript"></script>


    <script src="~/ScriptStyle/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <script src="~/ScriptStyle/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    <style type="text/css">
        .divmain {
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            //本地分頁
            $("#MainGridTest").ligerGrid({
                width: 1000,
                columns: [
                    { display: "學號", name: "Number" },
                    { display: "流水號", name: "WaterID" },
                    { display: "地點", name: "Place" },
                    { display: "金錢", name: "Money" },
                    { display: "操作員", name: "People" },
                    { display: "時間", name: "Times",type:'date',format:'yyyy年MM月dd日 hh:mm:ss'},
                    { display: "備注", name: "Depict" }
                ],
                url: "/Home/GetDataNoPage",
                pageSize: 30,
                usePage: true,
                dataAction: "local",//本地分頁
                pageSizeOptions: [10, 20, 30, 50, 100]//可指定每頁頁面大小
            });
            
        });
    </script>

</head>
<body>
    <br /><br /><br />
    <h2 style="text-align:center;">MVC LigerUI顯示測試不分頁或者是本地分頁</h2><br />
    <div class="divmain" id="MainGridTest"></div>
    
</body>
</html>

2.5、控制器里面的不分頁的代碼：ligerGrid顯示數據采用 json對象，注意默認情況下grid要求的json數據格式如下：{Rows:[{},{}],Total:2}; 我在這里搞了好多次，一般的Json取回來都是[{},{},{}]這樣的格式這個特別注意一下

 public ActionResult GetDataNoPage()
        {
           
            string _sql = "select top 200 Number, WaterID, Place, Money, State, People, Times, Depict from Record";
            SqlConnection conn = new SqlConnection();
            conn.ConnectionString = "Data Source=.;Initial Catalog=OneCardSystem;Integrated Security=True";
            if (conn.State == ConnectionState.Closed)
            {
                conn.Open();
            }
            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = _sql;
            cmd.Connection = conn;

            SqlDataAdapter sda = new SqlDataAdapter();
            sda.SelectCommand = cmd;
            DataSet ds = new DataSet();
            sda.Fill(ds);

            var datas =ds.Tables[0].Rows;
            List<ModleSt> list = new List<ModleSt>();
            var total = datas.Count;
            foreach (DataRow item in datas)
            {
                var act = new ModleSt()
                {
                    Number= item["Number"].ToString(),
                    WaterID= item["WaterID"].ToString(),
                    Place= item["Place"].ToString(),
                    Money=Convert.ToDouble( item["Money"]),
                    State= item["State"].ToString(),
                    People= item["People"].ToString(),
                    Times=Convert.ToDateTime(item["Times"].ToString()),
                    Depict= item["Depict"].ToString(),
                };
                list.Add(act);
            }
            var GetDatt = new {
                Rows=list,
                Total=total
            };
            return Json(GetDatt);
        }

我這里沒有封裝失sqlDB類寫的有點多了，注意后面一定要返回Json格式要加上Rows跟total total就是數據的數量也就是長度。可以看到效果是這樣的。這個是本地分頁，數據量小感覺不到數據量大的時候回很吃內存的。ModleSt 是這個數據的實體類

2.6、服務器分頁要把Grid里面的dataAction: "local",注釋了這個屬性就這樣為true的時候本地會自動分頁

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="~/ScriptStyle/ligerUI/skins/Aqua/css/ligerui-all.css" />
    <script src="~/ScriptStyle/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="~/ScriptStyle/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="~/ScriptStyle/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="~/ScriptStyle/ligerUI/js/ligerui.min.js" type="text/javascript"></script>


    <script src="~/ScriptStyle/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <script src="~/ScriptStyle/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>
    <style type="text/css">
        .divmain {
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            
            //服務器分頁
            $("#MainGridTestTOW").ligerGrid({
                width: 1000,
                columns: [
                    { display: "學號", name: "Number" },
                    { display: "流水號", name: "WaterID" },
                    { display: "地點", name: "Place" },
                    { display: "金錢", name: "Money" },
                    { display: "操作員", name: "People" },
                    { display: "時間", name: "Times", type: 'date', format: 'yyyy年MM月dd日 hh:mm:ss' },
                    { display: "備注", name: "Depict" }
                ],
                url: "/Home/GetDataUsePage",
                pageSize: 30,
                usePage: true,
                //dataAction: "local",
                rownumber: true,
                pageSizeOptions: [10, 20, 30, 50, 100]//可指定每頁頁面大小
            });
        });
    </script>

</head>
<body>
    
    <br /><br /><br />
    <h2 style="text-align:center;">MVC LigerUI顯示測試服務器分頁</h2><br />
    <div class="divmain" id="MainGridTestTOW"></div>
</body>
</html>

后台控制器

public ActionResult GetDataUsePage()
        {

            //排序的字段名
            string SortName = Request.Params["sortname"];
            //排序的方向
            string SortOrder = Request.Params["sortorder"];
            //當前頁
            int PageNow = Convert.ToInt32(Request.Params["page"]);
            //每頁顯示的記錄數
            int pagesize = Convert.ToInt32(Request.Params["pagesize"]);

            string _sql = "select  Number, WaterID, Place, Money, State, People, Times, Depict from Record";
            SqlConnection conn = new SqlConnection();
            conn.ConnectionString = "Data Source=.;Initial Catalog=OneCardSystem;Integrated Security=True";
            if (conn.State == ConnectionState.Closed)
            {
                conn.Open();
            }
            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = _sql;
            cmd.Connection = conn;

            SqlDataAdapter sda = new SqlDataAdapter();
            sda.SelectCommand = cmd;
            DataSet ds = new DataSet();
            sda.Fill(ds);
            var datas = ds.Tables[0].Rows;
            List<ModleSt> list = new List<ModleSt>();
            var total = datas.Count;
            foreach (DataRow item in datas)
            {
                var act = new ModleSt()
                {
                    Number = item["Number"].ToString(),
                    WaterID = item["WaterID"].ToString(),
                    Place = item["Place"].ToString(),
                    Money = Convert.ToDouble(item["Money"]),
                    State = item["State"].ToString(),
                    People = item["People"].ToString(),
                    Times = Convert.ToDateTime(item["Times"].ToString()),
                    Depict = item["Depict"].ToString(),
                };
                list.Add(act);
            }

            //模擬排序操作字段Number  學號
            if (SortOrder == "desc")
                list = list.OrderByDescending(c => c.Number).ToList();
            else
                list = list.OrderBy(c => c.Number).ToList();

            IList<ModleSt> usePageList = new List<ModleSt>();
            //這里模擬分頁操作
            for (var i = 0; i < total; i++)
            {
                if (i >= (PageNow - 1) * pagesize && i < PageNow * pagesize)
                {
                    usePageList.Add(list[i]);
                }
            }
            var usePagedata = new { Rows = usePageList, Total = total };
            return Json(usePagedata);
        }
    }

3、在html里面通過ashx處理文件加載數據

3.1靜態頁面代碼：一樣班的加上JS跟css文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../ScriptStyle/ligerUI/skins/Aqua/css/ligerui-all.css" />
    <script type="text/javascript" src="../ScriptStyle/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../ScriptStyle/ligerUI/js/core/base.js"></script>
    <script type="text/javascript" src="../ScriptStyle/ligerUI/js/plugins/ligerGrid.js"></script>

    <script src="../ScriptStyle/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <script src="../ScriptStyle/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script>

    <script type="text/javascript" src="../ScriptStyle/DataOne.js"></script>
    <style type="text/css">
        .divmain {width: 100%;margin: 0 auto;text-align: center; padding:20px; }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#MainGridTest").ligerGrid({
                //width: 1000,
                columns: [
                    { display: "ID", name: "ID" },
                    { display: "推薦數", name: "Recommend" },
                    { display: "標題", name: "Title" },
                    { display: "內容", name: "Contents" },
                    { display: "介紹", name: "Introduce" },
                    { display: "原文網址", name: "WebHref" },
                    { display: "增加時間", name: "GetTime" },
                    { display: "文章發表時間", name: "ArticleTime" }
                ],
                url: "../Admin_Ajax/GetData_TypeJson.ashx",
                pageSize: 30,
                usePage: true,
                dataAction: "local",
                pageSizeOptions: [10, 20, 30, 50, 100]//可指定每頁頁面大小
            });
        });

    </script>

</head>
<body>
    <br /><br /><br />
    <h2 style="text-align:center;">html通過ashx獲取數據LigerUI顯示測試</h2><br />
    <div class="divmain" id="MainGridTest"></div>
</body>
</html>

里面的url會兒機指向文件名就可以了不能知道具體的方法，以前試過了就是不行，只能在里面做case判斷加載方法還可以（這個是題外話了）

3.2、ashx頁面：我注釋的內容就是我最初的方法我以為這樣轉Json數據后可以獲取到值，左弄右弄數據可以取到就是顯示不出來，最后還是轉為list 在實例在Getdatt里面才出來前面就說了這個json格式要求就這樣

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

//添加命名空間
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using Newtonsoft.Json;
namespace LigerUITest20180523.Admin_Ajax
{
    /// <summary>
    /// GetData_TypeJson 的摘要說明
    /// </summary>
    public class GetData_TypeJson : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string _sql = "select ID,Recommend,SUBSTRING(Title,0,30)AS Title,SUBSTRING(Contents,0,30)AS Contents ,SUBSTRING(Introduce,0,30)AS Introduce ,SUBSTRING(Webhref,0,20)AS WebHref , GetTime,ArticleTime from CnblogsList";
            SqlConnection conn = new SqlConnection();
            conn.ConnectionString = "Data Source=.;Initial Catalog=TestBase;Integrated Security=True";
            if(conn.State== ConnectionState.Closed)
            {
                conn.Open();
            }
            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = _sql;
            cmd.Connection = conn;

            SqlDataAdapter sda = new SqlDataAdapter();
            sda.SelectCommand = cmd;
            DataSet ds = new DataSet();
            sda.Fill(ds);
            //string AppendStr = "{Rows:";
            //AppendStr = AppendStr + JsonConvert.SerializeObject(ds.Tables[0]).ToString();
            //AppendStr = AppendStr + ",Total:20}";
            //context.Response.Write(JsonConvert.SerializeObject(AppendStr));

            var datas = ds.Tables[0].Rows;
            List<ModleSt> list = new List<ModleSt>();
            var total = datas.Count;
            foreach (DataRow item in datas)
            {
                var act = new ModleSt()
                {
                    ID =Convert.ToInt32( item["ID"].ToString()),
                    Recommend = Convert.ToInt32(item["Recommend"].ToString()),
                    Title = item["Title"].ToString(),
                    Contents = item["Contents"].ToString(),
                    Introduce = item["Introduce"].ToString(),
                    WebHref = item["WebHref"].ToString(),
                    GetTime = Convert.ToDateTime(item["GetTime"].ToString()),
                    ArticleTime = Convert.ToDateTime(item["ArticleTime"].ToString()),
                };
                list.Add(act);
            }
            var GetDatt = new
            {
                Rows = list,
                Total = total
            };
            context.Response.Write(JsonConvert.SerializeObject(GetDatt));
        }
        public class ModleSt
        {
            public int Recommend { get; set; }
            public int ID { get; set; }
            public string Title { get; set; }
            public string Contents { get; set; }
            public string Introduce { get; set; }
            public string WebHref { get; set; }
            public DateTime GetTime { get; set; }
            public DateTime ArticleTime { get; set; }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

MVC里面的實體類

public class ModleSt
    {
        public  string Number { get; set; }
        public string WaterID { get; set; }
        public string Place { get; set; }
        public double Money { get; set; }
        public string State { get; set; }
        public string People { get; set; }
        public DateTime Times { get; set; }
        public string Depict { get; set; }
    }

效果

這個里面的內容是網絡爬蟲抓取的有些html字符所以顯示的不統一。這個也是在本地分頁的不過我對里面的字段都做了截取30個字符不截取會很卡。算是一個小小的優化吧

4、總結：細節決定成敗，思路決定出路，態度決定一切。

這個Grid在html頁面里面實現度娘了好多都沒有找到相關的Demo，自己寫一個留着以后看吧！弄了一晚上剛剛看到效果，關於碰到的錯誤只能說明當時沒有好好看官方的API，LigerUI這個表格里面還有很多功能慢慢的去研究先把雛形弄出來，因為公司也在用這個，里面的都是寫好的，剛來公司不久有時間就看看。有時間在弄里面的搜索功能，，ligerGrid為的單元格渲染器等等。現在想真的是學無止境哈哈還有好多。

剛畢業的我不知不覺已經過了一年，感覺一年還是沒有多少長進。紙上得來終覺淺，絕知此事要躬行。也許有的路只有走下去才知道會遇見什么樣的風景！夜深了差不多也該睡覺了。。。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 LigerUI之Grid使用詳解(一)——顯示數據 --分頁 ASP 連接 MySQL 數據庫兩種方法 ASP.NET中GridView控件刪除數據的兩種方法 LigerUi之Grid使用詳解（二）——數據編輯 LigerUI之Grid使用詳解(一)——顯示數據 ListView動態加載數據分頁（使用Handler+線程和AsyncTask兩種方法）數據庫備份的兩種方法 Qt連接數據庫的兩種方法不同數據庫兩種方法將oracle數據庫中的一張表的數據導入到另外一個oracle數據庫中兩種方法實現asp.net方案的前后端數據交互（aspx文件、html+ashx+ajax）