easy ui datagrid 簡單用法

<table id="dg">
        </table>
           

一：加載資料的方式

       1:url方式

$(function () {

            $('#dg').datagrid({
                title: 'Sortable Column',
                width: 550,
                height: 250,
                url: 'datagridHandler.ashx',
                columns: [[
                    { field: 'username', title: 'username', width: 80 },
                    { field: 'password', title: 'password', width: 80 },
                    ]],
                pagination: true,
                sortName: 'itemid',
                sortOrder: 'asc'
            });
        });
           

datagridHandler.ashx為一般處理程式，直接傳回字元串,注意格式(rows一定要是一個數組，隻有一條資料也需要[]格式必須是一個數組),是以背景定義時放到一個list裡邊就對了

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            context.Response.Write("{\"rows\":[{\"username\":\"C++ Primer中文版(第4版)\",\"password\":4939}],\"total\":5}");
        }
           

從資料庫讀取在轉化成json格式

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            IDataBae idb = new SqlOperator("Data Source = .;Initial Catalog = BookWeb;User Id = sa;Password = 1234;");
            List<Users> u = idb.List<Users>("select * from Users", null);
            string sqls = u.ToJson();
            context.Response.Write(sqls);
        }
           

格式(直接是json數組沒有total也可以顯示)：

       2：loadData方式            

$(function () {

            $('#dg').datagrid({
                title: 'Sortable Column',
                width: 550,
                height: 250,
                columns: [[
                    { field: 'username', title: 'username', width: 80 },
                    { field: 'password', title: 'password', width: 80 },
                    ]],
                pagination: true,
                sortName: 'itemid',
                sortOrder: 'asc'
            });


            var obj = { "rows": [{ "username": "aj", "password": 4939}], "total": 5 };
            $('#dg').datagrid('loadData',obj);
        });
           

      通過ajax背景請求資料綁定

       這裡使用的是asp.net的ajax傳回json他會自己加一個d是以要處理一下

$(function () {
            $('#dg').datagrid({
                title: 'Sortable Column',
                width: 550,
                height: 250,
                columns: [[
                    { field: 'username', title: 'username', width: 80 },
                    { field: 'password', title: 'password', width: 80 },
                    ]],
                pagination: true,
                sortName: 'itemid',
                sortOrder: 'asc'
            });
            getdata();
        });
        function getdata() {
            $.ajax({
                type: "post",
                url: "MyEasyui.aspx/GetUsers",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var dataObj = eval("(" + result.d + ")");
                    $('#dg').datagrid('loadData', dataObj);
                }
            });
         }
           

MyEasyui.aspx/GetUsers對應的方法

[WebMethod]
        public static string GetUsers() 
        {
            IDataBae idb = new SqlOperator("Data Source = .;Initial Catalog = BookWeb;User Id = sa;Password = 1234;");
            List<Users> u = idb.List<Users>("select * from Users", null);
            string sqls = u.ToJson();
            return sqls;
        }
           

效果與使用一般處理程式的資料庫查詢一樣

注意：asp.net使用url方式為一般處理程式還行，但是使用asp.net的方法明明是傳回的json字元串,response确是整個頁面!!!!!!!

         隻有用ajax請求後用loadData綁定資料

二:分頁

   隻要你指定了url且分頁條屬性設定為true，他就會在加載與點選分頁菜單時請求背景并自動傳遞兩個參數page與rows,目前頁與一頁顯示的數量

    我們隻需要利用這兩個查詢進行背景查詢就可以了

   分頁時我們需要傳遞一個total總條數給前台,格式就包裝标準的datagrid需要的格式

$('#dg').datagrid({
               title: 'Sortable Column',
               pagination:true,
               fitColumns:false,
               fit: true,
               url:'datagridHandler.ashx',
               nowrap: true,
               sortName: 'bname',
               sortOrder:'desc',
               columns: [[
                    { field: 'bid', title: 'bid', width: 100 },
                    { field: 'bname', title: 'bname', width: 100,sortable:true },
                    { field: 'bauthor', title: 'bauthor', width: 100 },
                    {  field: 'bpublisher', title: 'bpublisher', width: 100 },
                    {  field: 'bpubtime', title: 'bpubtime', width: 100 },
                    {  field: 'btype', title: 'btype', width: 100 },
                    {  field: 'btypec', title: 'btypec', width: 100 },
                    { field: 'bdescribe', title: 'bdescribe', width: 200 }
                    ]]
           });
           

       atagridHandler.ashx

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            int page = Convert.ToInt32(context.Request.Form["page"]);
            int rows = Convert.ToInt32(context.Request.Form["rows"]);

          
            IDataBae idb = new SqlOperator("Data Source = .;Initial Catalog = BookWeb;User Id = sa;Password = 1234;");
            List<book> u = idb.List<book>("select top " + rows + " * from book where bid not in (select top " +( rows * (page - 1)) + " bid from book )", null);

            DGDate<book> dtd = new DGDate<book>();
            dtd.total = idb.OneCol<int>("select count(*) as c from book","c",null);
            dtd.rows = u;
            context.Response.Write(dtd.ToJson());
        }
           

/// <summary>
    /// 建構datagrid需要的json格式,
    /// 需要一個total與rows
    /// </summary>
    public class DGDate<T> 
    {
        public int total { get; set; }
        public List<T> rows { get; set; }
    }
           

      這種格式可以直接用匿名類實作更簡潔一些 new { rows = list, total = Count }

如果沒有使用url，在點選分頁條時就不會自動請求背景，但是點選分頁條時必然有一個回調函數,

     回調的參數就包涵了page與rows，隻是如果指定url他就會在回調函數中去請求指定的背景,

     是以想用loadData方式就需要找到相應的回調函數，在回調函數中執行自己的請求然後在綁定資料 

二:排序

    1:remote遠端排序

    首先指定排序的字段與方式

    sortName: 'bname',

    sortOrder:'desc',

    這樣就會在請求url的時候多帶兩個參數

    然後回台隻需要使用這兩個參數進行相應的查詢即可

    并且如果在相應的column指定了sortable:true

    如{ field: 'bname', title: 'bname', width: 100,sortable:true }

    點選相應列可以改變排序方式

    同樣是點選他時會請求一個回台,更具參數查詢即可

   2:remoteSort設定成false可以直接支援排序了