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="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动态绑定列名和数据

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

EasyUI DataGrid绑定嵌套的json数据

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

Jquery easyui从零单排之datagrid整表编辑保存到数据库

最近一直在利用空余时间,对Jquery EasyUI进行学习。前几篇都是在讲datagrid,今天这篇还是讲它的,是对datagrid进行编辑,然后把新数据全部保存到数据库的问题。 这个地方...
  • yangmingxing980
  • yangmingxing980
  • 2016年02月29日 10:09
  • 4143

Jquery easyui从零单排之datagrid查询

这里开始学习datagrid查询功能的实现。 一、前台代码: Start from zero ...
  • yangmingxing980
  • yangmingxing980
  • 2015年12月11日 09:27
  • 2267

jQuery EasyUI table表单的数据绑定与交互

/** * 针对table进行数据绑定,绑定方式 * table的定义 参数的传递 data-value data-value: id为需绑定数据的编号 若需要跳转界面 url:界面路径 ...
  • u012059921
  • u012059921
  • 2016年06月22日 15:37
  • 3297

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

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

《EasyUI》——给DataGrid动态绑定表头和数据,实现表头与数据的真正解耦

这两天在做项目的时候,遇到了这样一个需求,我需要给DataGrid绑定表头,但是表头有多少列并不固定,表头的有多少列名也不固定,也就是说,表头可以有一列,也可以有许多列,这个datagrid具体有多少...
  • u013067402
  • u013067402
  • 2016年03月10日 00:37
  • 4223

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

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

【Jqurey EasyUI+Asp.net】----DataGrid数据绑定,以及增、删、改(SQL)

也懒得打其它字了,直接进入主题吧 1.首先,数据表Rex_Test ID int 自增 tName varchar(10) 姓名 tEmail varchar(80) 邮...
  • yangmingxing980
  • yangmingxing980
  • 2014年06月27日 16:48
  • 2868

jquery easyui datagrid 数据绑定java版本

jquery easyui datagrid数据绑定
  • jiangdefu
  • jiangdefu
  • 2015年03月03日 10:29
  • 1655
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery easyui从零单排之datagrid数据绑定
举报原因:
原因补充:

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