关于EasyUI中DataGrid控件的一些使用方法总结

一,DataGrid         控件的工作流程

  1,通过JavaScript将一个空白的div美化成一个空白的Datagrid模板

  2,Datagrid模板通过制定的Url发送请求,获取数据

      3,Datagrid通过后台返回的Json将对应的数据按照Filed的名字进行匹配并显示

知道了这个流程那么,那么我们对整个的使用基本上有了百分之80的了解了

在第三步中,Datagrid会向后台发送一个请求,该请求是按照之前创建Datagrid时制定的url来访问的,

并且会自动添加两个参数

             ①,page:当前的页数

           ②,每页显示多少条数据

后台根据这两个条件就可以算出,需要查询的数据量(从第几条开始,需要查询几条)

begin=(page-1)*limt

开始记录=(当前页-1)*每页行数

如果当前页是4 每页显示4条

那么begin=(4-1)*4=12

可能这个地方会有疑问

第一页:1-4

第二页:5-8

第三页:9-12

第四页:13-16

那么起始条数应该是13啊

事实是这样的,因为在程序中0代表第一

所以在程序中是这样

第一页:0-3

第二页:4-7

第三页:8-11

第四页:12-15

这样那我们的查询语句就是select * from teacherInfo limit 12,4

但是你以为这样就ok了?

你图样图森破

其实Datagrid需要返回的json可以分为两大类

    ①,total  当前条件下查询的数据的总条数

    ②,rows 当前条件下所查询出的数据

只要有了这两条件前台就能算出,总共有多少页等次要信息

附上Datagrid返回Json的数据格式

{"total":28,"rows":[
    {"fileName":"001","productname":"Koi"},
    {"fileName":"002","productname":"Dalmation"},
    {"fileName":"002","productname":"Rattlesnake"},
  
]}

这里的fileName productname       分别对应两个不同的Filed的Name

也就是说每行有两列

一列为fileName productname

这样系统就会自动按照名字来匹配相应的值!

时间: 2024-10-04 14:36:34

关于EasyUI中DataGrid控件的一些使用方法总结的相关文章

EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager implements java.io.Serializable { private Integer id; private Role role; private String loginName; private String password; private int status; private Da

easyui 中Datagrid 控件在列较多且无数据时,列显示不全的解决方案

在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var dc = $(this).data('datagrid').dc; var header2Row = dc.header2.find('tr.datagrid-header-row'); dc.body2.find('table').append(header2Row.clone().css({"

wpf 中DataGrid 控件的样式设置及使用

本次要实现的效果为: 这个DataGrid需要绑定一个集合对象,所以要先定义一个Experience类,包含三个字段 /// <summary> /// 定义工作经历类 /// </summary> public class Experience { /// <summary> /// 获取或设置工作的起始时间 /// </summary> public string Start { get; set; } /// <summary> /// 获

EasyUI:datagrid控件简介

EasyUI:datagrid控件简介 1,水平滚动条属性: //显示滚动条 fitColumns:false //不显示滚动条 fitColumns:true 原文地址:https://www.cnblogs.com/lizm166/p/8467953.html

easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案

EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正常的“2012-11-10 12:18:00”这样的格式,json序列化后返回到前台页面就被转换成一个像 /Date(1419264000000)/的格式,导致easyUI无法解析这个字段.经过一番研究,下面给出两种解决方式 希望能帮到大家! 第一种:比较简单 定义函数:function forma

winform中DataGrid控件的宽度设置

最近修改一个win5.0的PDA程式,碰到一个问题.就是给DataGrid控件绑定数据的时候,这个控件的宽度不能调整,有时候数据较长,就显示不全.然后想在程式里自定义它的宽度,设置不成功.然后网上没找到合适的方法去设置它的宽度.最后从同事LYL那里得到解决方法 设置数据源: this.dataGrid1.DataSource = ds.Tables[1].DefaultView; 在这之前给DataGrid控件添加表样式,代码如下: DataGridTableStyle h = new Data

WPF中Datagrid控件添加行号

1 /// <summary> 2 /// 导入Excel文件按钮 3 /// </summary> 4 /// <param name="sender"></param> 5 /// <param name="e"></param> 6 private void InputExcelFile_Click(object sender, RoutedEventArgs e) 7 { 8 //将数据

easyui中 combogrid控件的loadData方法加载本地数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title

Silverlight 中datagrid控件-- 通过设置数据虚拟化加速显示

定义依赖属性作为datagrid的数据源 protected static readonly DependencyProperty ViewLogsProperty = DependencyProperty.Register("ViewLogs", typeof(ObservableCollection<RMSReportEvent>), typeof(LogViewer), new PropertyMetadata(null)); protected Observable