关于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

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

原文地址:https://www.cnblogs.com/FranklinD/p/4343398.html