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

原创 2015年12月08日 16:34:47

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

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

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

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

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


        新建一页面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="http://blog.csdn.net/yangmingxing980/article/details/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数据。

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

运行结果:


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

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



EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法,小编分享一下总结出来的两种绑定表格方法,知识在于积累。 第一种:数据存放在数据集中,每一行对应多个值,利用循环把数据绑定到表格 前台代码: ...
  • PRIMEFJT
  • PRIMEFJT
  • 2018年01月12日 20:36
  • 315

EasyUI_datagrid实现动态加载列并为其绑定数据

最近项目中遇到了这么一个需求,在datagrid中显示的数据需要动态的加载,也就是说表格中显示的列是不固 定的,显示的列的名称和列的数量都是不固定的,这些数据都是需要我们从后台拿来数据然后在动态的绑...
  • u013045437
  • u013045437
  • 2016年03月06日 23:24
  • 5512

easyui datagrid动态绑定列名和数据

公司有这么一个需求,根据不同的权限显示一张表不同的字段。这个要命的需求给UI层带来不少麻烦,首先,我们采用easyUI的datagrid显示表格数据,而表格的列是静态写死的,如果要根据不同权限显示不同...
  • qing2005
  • qing2005
  • 2010年11月13日 21:24
  • 50834

EasyUI DataGrid绑定嵌套的json数据

现有json数据如下: {"total":2,"rows": [{"BarrackGUID":"dc1be891-4489-4eb8-bb1d-ba1debd59b07","BarrackNam...
  • zdhlwt2008
  • zdhlwt2008
  • 2016年10月25日 08:53
  • 1597

jquery easyui datagrid 数据绑定java版本

jquery easyui datagrid数据绑定
  • jiangdefu
  • jiangdefu
  • 2015年03月03日 10:29
  • 1791

数据绑定——DataGrid

绑定数据
  • wgp15732622312
  • wgp15732622312
  • 2016年05月15日 17:14
  • 726

C#中的DataGrid数据绑定实例代码

  • 2010年08月02日 09:44
  • 23KB
  • 下载

WPF DataGrid 绑定数据及时更新的处理

默认情况下datagrid 绑定数据源后,在界面编辑某一列后,数据不会及时更新到内存对象中。如在同一行上有一个命令对来获取 当前选中行(内存对象)发现,数据未更新过来。解决办法:在列的绑定属性里加上U...
  • greystar
  • greystar
  • 2015年11月19日 13:28
  • 12203

DataGrid绑定数据的方式

前台代码:                                      '>                                  ...
  • Robin_1234
  • Robin_1234
  • 2014年03月10日 23:22
  • 1089

DataGrid数据绑定及学习笔记

前台xaml:
  • wushang923
  • wushang923
  • 2011年12月31日 16:20
  • 9022
收藏助手
不良信息举报
您举报文章:Jquery easyui从零单排之datagrid数据绑定
举报原因:
原因补充:

(最多只允许输入30个字)