zoukankan      html  css  js  c++  java
  • 关于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

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

  • 相关阅读:
    网站微信扫码登陆总结以及在小程序登陆两者关联和关系,vue以及uniapp
    微信扫码登陆在chrome浏览器失败,浏览器禁止重定向
    element-ui多个表单如何同时验证
    vscode中react代码提示插件
    echarts主题全局颜色定义、自定义折线颜色--彩色折线图echarts
    vue本地储存加密
    Echarts多条折线图 y轴数值与实际值不符解决方法
    vue中swiper@5.3.6使用,
    解决 swiper设置loop为true时,echarts图表不显示
    vue+nginx配置,以及nginx配置跨域
  • 原文地址:https://www.cnblogs.com/FranklinD/p/4343398.html
Copyright © 2011-2022 走看看