Jquery easyui从零单排之datagrid数据绑定

        自己写的前端，感觉太丑了，所以在网上找到了jquery easyui，样式也蛮漂亮的，闲暇之余就开始慢慢学习。

        官网（jquery easyui官网）上也是大致描述了一些东西，但是绝对不够全面，网上其他文章也很多，但是本人理解能力有限，学得甚是吃力，再加上平时空余时间不多，速度更是龟速。

        今天刚好有点时间，可以把前几天学习的东西拿来写一写，也随便加深一下记忆。

        前几天主要是学习datagrid的绑定，本人比较落后，还在用webfrom，这也就能理解为什么在网上找不到好多相关的文章了，因为大多都是关于mvc，php这些方面。废话不再多说，直接进入今天的主题。

        我下载的版本是jquery-easyui-1.4.1，把它拷贝到网站根目录下面

        新建一页面DataGrid1.aspx，在中添加引用信息

        然后在创建一个table

  
            
                
                    
                    
                    
                    
                    
                
            
        

                        编号
                    

                        姓名
                    

                        性别
                    

                        年龄
                    

                        部门
                    

        数据绑定，data-options="field:'Age',width:80" ，需要绑定的字段就添加在field后面，当然这里还可以设置其他属性，比如列宽width，对其方式align

        数据处理是通过Handler1.ashx来实现的，返回json

<%@ WebHandler Language="C#" Class="Handler1" %>

using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using Newtonsoft.Json;
using System.Text;

public class Handler1 : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {

        Query(context);
    }
    public void Query(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        SqlHelp sqla = new SqlHelp();
        string stra = "select * from tTestTable";
        DataTable dta = sqla.GetDataTable(stra);
        sqla.SqlClose();

        string json = JsonConvert.SerializeObject(dta);

        context.Response.Write(json);

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

}

string json = JsonConvert.SerializeObject(dta);

        这个调用的using Newtonsoft.Json;这个引用里的方法，把DataTable转换为json数据。

        引用可以到网上去搜索下载

运行结果：

        绑定是绑定好了，但是这里的分页是个假分页，为什么呢，是因为点击翻页按钮，只是前面的自动序号发生变化，其余信息都没变，也就是说这个分页根本不起任何作用。

至于如何实现真正的分页，下篇单排里我再来写，那里我已经瞎搞了一整子了，再琢磨一下。