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可以直接支持排序了