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

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

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

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

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

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

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

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

 <title><span style="font-family: Consolas, 'Courier New', Courier, mono, serif; line-height: 18px;">Start from zero</span></title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>

然后在创建一个table

  <table id="dg" title="人员列表" class="easyui-datagrid" style="width: 1050px; height: 480px;
            padding-left: 200px;" data-options="rownumbers:true,url:'Handler1.ashx/ProcessRequest',pageSize:5,pageList:[5,10],method:'get',toolbar:'#tb',"
            toolbar="#bar" pagination="true" rownumbers="true" fitcolumns="true" striped="true"
            singleselect="true">
            <thead>
                <tr>
                    <th data-options="field:'LoginID',width:120">
                        编号
                    </th>
                    <th data-options="field:'UserName',width:120">
                        姓名
                    </th>
                    <th data-options="field:'Sex',width:80,align:'center'">
                        性别
                    </th>
                    <th data-options="field:'Age',width:80">
                        年龄
                    </th>
                    <th data-options="field:'Department',width:160,align:'center'">
                        部门
                    </th>
                </tr>
            </thead>
        </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数据。

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

运行结果：

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

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

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

秒客网

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

相关文章